Client addresses integrated into the Square orders form?

Questions
1

Hello all :wave: 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": "[email protected]",
"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!

2

That all looks correct. What’s the application ID? :slightly_smiling_face:

3

Hey- I sent you the App ID in a PM :slight_smile: Thanks!

4

Any credential I ask for in a public forum is okay to share. The one and only credential that’s not okay to share is the access token. :slightly_smiling_face:

5

Do you have any suggestions or reasons why this wouldn’t work? If needed, I can PM you the Gitlab repository, if needed.

6

Hello. Just checking in to see if there were any updates as to why this wouldn’t work! Thank you so much for your help :slight_smile:

7

Could you put the application ID in this thread? We don’t check the PMs cause they are so overloaded with messages. :slightly_smiling_face:

8

Hello! So sorry I didn’t realize. The Production ID is sq0idp-2ZMM5JBse96AUkZ2CnJsRQ and for Sandbox is sandbox-sq0idb-iLCWXj_bw6fHhJp7_vE6Lw. Thank you so much!

9

So sorry to bother, but I need to figure out a fix for this or we will have to move away from Square. Thank you so much!

10

@Bryan-Square Sorry to bother, but are there any updates, or should I open a support ticket? Thank you!

11

I’m waiting on an update from the team. Thank you for your patience. :slightly_smiling_face: