Respond to a change in shipping contact information when using Apple Pay or Google Pay with the Square payment form.
Square Payment Form

Respond to a Shipping Contact Change Deprecated
This component is deprecated. See below for guidance about what to use instead.

Note

The Square payment form is deprecated and replaced by the Web Payments SDK.

You should use the Web Payments SDK to take payments on a web client. The Web Payments SDK uses modern web styling as shown in the following image:

A graphic showing the five visual elements of the Card payment method, which are represented as selectors that you specify in a card option styling object.

Recalculate shipping fees and taxes when a buyer changes the shipping address in the Apple Pay or Google Pay payment sheet.

Before you start Permalink Get a link to this section

Shipping contact change Permalink Get a link to this section

Use the shippingContactChanged callback to validate a shipping contact or respond to a change in the shipping contact chosen in the Apple Pay or Google Pay payment sheet.

Add the shippingContactChanged callback function to the callbacks property of the SqPaymentForm initializing argument. Use the callback to calculate a new shipping cost and other fees. If the calculation results in a line item amount change or different shipping options, update the payment request with the new amounts by calling the done function in the callback.

For an Apple Pay payment request, avoid a time out by calling done within 30 seconds to respond to the shipping contact change. Pass in an optional PaymentDetailsUpdate object to send errors or update the payment total, line items, and shipping options.

Google Pay does not timeout the shipping option changed callback.

Note

To provide granular shipping address error messages, set shippingContactErrors to an object of the SqShippingErrors type.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
var paymentForm = new SqPaymentForm({

  ...

  // SqPaymentForm callback functions
  callbacks: {

    ...

    shippingContactChanged: function (shippingContact, done) {
      var valid = true;
      var shippingErrors = {};

      if (!shippingContact.postalCode) {
        shippingErrors.postalCode = "postal code is required";
        valid = false;
      }

      if (!valid) {
        done({shippingContactErrors: shippingErrors});
        return;
      }

      // Shipping address unserviceable.
      if (shippingContact.country !== 'US' || shippingContact.country !== 'CA') {
        done({error: 'Shipping to outside of the U.S. and Canada is not available.'});
        return;
      }

      // Update total, lineItems, and shippingOptions for Canadian address.
      if (shippingContact.country === 'CA') {
        const tax = 1000 * 0.08;
        done({
          total: {
            label: "MERCHANT NAME",
            amount: (1000 + tax).toFixed(2),
            pending: true
          },
          lineItems: [
            {
              label: "Subtotal",
              amount: "1000.00",
              pending: false
            },
            {
              label: "Tax",
              amount: tax.toFixed(2),
              pending: false
            }
          ],
          shippingOptions: [
            {
              id: "1",
              label: "International Shipping",
              amount: "20.00"
            }
          ]
        });
        return;
      }

    // Everything looks good and nothing to update
      done();
    }
  ...
});

If you need more assistance, contact Developer Support or ask for help in the Developer Forums.