Developer docs
/
FramePay
/
Advanced features
/
Shipping configuration
Last updated

These docs are intended for a developer audience.

Shipping configuration in express methods

This topic describes how to configure shipping using express methods.

FramePay digital wallets such as Google Pay and Apple Pay support configurable shipping information functionality.

To enable shipping configuration in native dialogs, set the requestShipping property in transactionData to true, and provide a list of shipping method options to display in the native dialogs.

For more information, see shipping-address-changed, shipping-option-changed, and transactionData.

const ORIGINAL_AMOUNT = 10;

const US_SHIPPING = [
  {
    id: 'free-shipping',
    label: 'Free shipping',
    detail: 'Arrives in 5 to 7 days',
    amount: 0,
  },
];

const INTERNATIONAL_SHIPPING = [
  {
    id: 'international-shipping',
    label: 'International shipping',
    detail: 'Arrives in 20 to 30 days',
    amount: 10,
  },
];

Framepay.initialize({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'website-123',
  transactionData: {
    currency: 'USD',
    amount: ORIGINAL_AMOUNT,
    label: 'Demo purchase label'
    requestShipping: true,
    shippingOptions: {
        defaultSelectedOptionId: 'free-shipping',
        options: [
            ...US_SHIPPING,
            ...INTERNATIONAL_SHIPPING,
        ],
    }
  },
});

Framepay.on('shipping-address-changed', (shippingAddress, updateShippingOptions) => {
  if (shippingAddress.country === 'US') {
    updateShippingOptions({ status: 'success', shippingOptions: US_SHIPPING });
  } else {
    updateShippingOptions({
        status: 'success',
        shippingOptions: INTERNATIONAL_SHIPPING,
        lineItems: [
            {
                label: 'Shipping',
                amount: shippingOption.amount,
            },
            {
                label: 'Tax',
                amount: '10.99',
            },
        ],
    });
  }
});

Framepay.on('shipping-option-changed', (shippingOption, updateTransaction) => {
  updateTransaction({
    amount: ORIGINAL_AMOUNT + shippingOption.amount,
    lineItems: [
        {
            label: 'Shipping',
            amount: shippingOption.amount,
        },
        {
            label: 'Tax',
            amount: '10.99',
        }
    ],
  });
});