Client addresses integrated into the Square orders form?

Hello all Your friendly community developer here!

I’m trying to integrate client-entered addresses with Square so they appear in the Square orders form. Here’s my server-side code:

checkout_options: {
  ask_for_shipping_address: true,
},
"merchant_support_email": "orders@plantpowershop.com",
"pre_populated_data": {
  "buyer_address": {
    "address_line_1": shippingDetails.streetAddress,
    "country": shippingDetails.country,
    "postal_code": shippingDetails.postalCode,
    "locality": shippingDetails.city
  }
}

However, users are neither prompted to enter an address nor is the client-side entered address appearing. Is this a known issue, or is there something wrong with my code?

Here’s the relevant client-side code:

        <label for="street-address">Street address</label>
        <input type="text" id="street-address" name="street-address" autocomplete="street-address" required enterkeyhint="next"></input>
      
        <div>
            <label for="city">City</label>
            <input required type="text" id="city" name="city" autocomplete="address-level2" enterkeyhint="next">
          </div>
      <div>
        <label for="postal-code">ZIP or postal code </label>
        <input class="postal-code" id="postal-code" name="postal-code" autocomplete="postal-code" enterkeyhint="next">
      </div>
      <div>
        <label for="country">Country or region</label>
        <select id="country" name="country" autocomplete="country" enterkeyhint="done" required>
            <option></option>
            <option value="AE">United Arab Emirates</option>
            <option value="GB">United Kingdom</option>
            <option value="US">United States</option>
            <option value="UM">US Outlying Islands</option>
            <option value="VI">US Virgin Islands</option>
        </select> 

Along with it’s Javascript

  const streetAddress = document.getElementById('street-address').value;
  const city = document.getElementById('city').value;
  const postalCode = document.getElementById('postal-code').value;
  const country = document.getElementById('country').value;

  const shippingDetails = {
    streetAddress,
    city,
    postalCode,
    country
  };

  fetch('https://plantpowershop.com/proxy/square', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ totalCents, shippingDetails })
  })

Any insights would be appreciated!

1 post - 1 participant

Read full topic