Express Checkout: shipping in the Apple Pay and Google Pay sheets

const checkout = document.querySelector('primer-checkout');

checkout.options = {
  applePay: {
    // Apple Pay nests these under `shippingOptions`.
    shippingOptions: {
      requireShippingMethod: true,
      requiredShippingContactFields: ['postalAddress', 'name', 'email'],
    },
  },
  googlePay: {
    // Google Pay takes them at the top level. The nesting is not the same
    // as Apple Pay, so do not copy the block above.
    captureShippingAddress: true,
    requireShippingMethod: true,
  },
};

checkout.addEventListener('primer:shipping-address-change', (event) => {
  // Tell the SDK to wait. Required whenever you respond asynchronously.
  event.preventDefault();

  const { shippingAddress, setShippingOptions } = event.detail;

  (async () => {
    const rates = await fetch('/my-backend/shipping-rates', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ shippingAddress }),
    }).then((r) => r.json());

    setShippingOptions(rates);
  })();
});

interface ShippingOption {
  id: string;           // Stable identifier. Echoed back on selection, and
                        // must match order.shipping.methodId when you confirm.
  name: string;         // Display label, e.g. "Standard"
  description: string;  // Display detail, e.g. "5-7 business days"
  amount: number;       // Shipping cost in MINOR UNITS, e.g. 500 = £5.00
}

checkout.addEventListener('primer:shipping-option-change', (event) => {
  event.preventDefault();

  // `continue` is a reserved word in JavaScript. Alias it when destructuring.
  const { selectedShippingOption, continue: confirmShipping } = event.detail;

  (async () => {
    const response = await fetch('/my-backend/commit-shipping', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      // Send the id only. Your backend resolves the price.
      body: JSON.stringify({ shippingOptionId: selectedShippingOption.id }),
    });

    if (!response.ok) {
      // Do not call continue() here. The PATCH did not land, so the session
      // still holds the old shipping. Acknowledging anyway would let the
      // shopper reach authorization and fail there, which is harder to
      // understand. Log it and let the callback time out instead.
      console.error('Shipping PATCH failed, not confirming the selection');
      return;
    }

    confirmShipping();
  })();
});

curl -X PATCH https://api.sandbox.primer.io/client-session \
  -H "X-Api-Key: YOUR_API_KEY" \
  -H "X-Api-Version: 2.4" \
  -H "Content-Type: application/json" \
  -d '{
    "clientToken": "YOUR_CLIENT_TOKEN",
    "orderId": "order-123",
    "order": {
      "shipping": {
        "methodId": "standard",
        "methodName": "Standard",
        "methodDescription": "5-7 business days",
        "amount": 500
      },
      "lineItems": [
        { "itemId": "sku-1", "description": "T-shirt", "amount": 2000, "quantity": 1 }
      ]
    }
  }'

sum over line items of (quantity x amount + taxAmount - discountAmount)
+ shipping.amount
+ any fees

checkout.addEventListener('primer:payment-failure', (event) => {
  const { error } = event.detail;
  console.error(error.origin, error.code, error.message, error.suggestion);
});