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',
description: 'Arrives in 5 to 7 days',
amount: 0,
},
];
const INTERNATIONAL_SHIPPING = [
{
id: 'international-shipping',
label: 'International shipping',
description: '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',
}
],
});
});