Payment Form: Cookbook

Respond to a change in shipping option

Recalculate shipping fees and taxes when a buyer selects a shipping option in the Apple Pay payment sheet.

Payment Form

Use the shippingOptionChanged callback to respond to a change in the shipping option selected in the Apple Pay payment sheet.

Add a shippingOptionChanged callback function to the callbacks property of the SqPaymentForm initializing argument. The callback is invoked when a shipping option is changed on the Apple Pay sheet. Use the callback to calculate a new shipping cost and other fees. If the calculation results in line item amount change, update the payment request with the new amounts by calling the done function in the callback.

To avoid an Apple Pay timeout, call done within 30 seconds to respond to the shipping option change. Pass in an optional PaymentDetailsUpdate to update the payment total or line items.

var paymentForm = new SqPaymentForm({

  ...

  // SqPaymentForm callback functions
  callbacks: {

    ...
    shippingOptionChanged: function(shippingOption, done) {
    const newLineItems = getNewLineItems(shippingOption);
    const newTotal = {
      label: "MERCHANT NAME",
      amount: calculateNewTotal(shippingOption),
      pending: false
    };

    done({
      lineItems: newLineItems,
      total: newTotal
    });
    }
  ...

});

Contact Developer Support, join our Slack channel, or ask for help on Stack Overflow