Web SDK

    Primer.showUniversalCheckout(clientToken, {
    googlePay: {
    captureBillingAddress: true // defaults to false - not required
    }
    })

const checkout = await Primer.showUniversalCheckout(clientToken, options);
// After you patched the client session
await checkout.refreshClientSession();

Primer.showUniversalCheckout(clientToken, {
/\* Other options \*/
googlePay: {
buttonSizeMode: 'fill',
buttonType: 'subscribe'
}
});

// Before
headless.configure({
// Other options
onAvailablePaymentMethodsLoad(paymentMethods) {
// paymentMethods is a list of strings representing the unique id of the payment method
}
})
// Now
headless.configure({
// Other options
onAvailablePaymentMethodsLoad(paymentMethods) {
// paymentMethods is a list of objects containing
// - `type`: the unique id of the payment method
// - `managerType`: the type of payment method manager. Can be `CARD`, `NATIVE`, or `REDIRECT`
}
})

const assetsManager = headless.getAssetsManager()
const { iconUrl, paymentMethodName, backgroundColor } = await assetsManager.getPaymentMethodAsset('ADYEN\_IDEAL') // ADYEN\_IDEAL comes from `paymentMethod.type`

const checkout = await Primer.showUniversalCheckout(clientToken, {
container: '#container',
onPaymentCreationStart() {
// will be called before tokenization and payment creation
// will be followed by calls of either onCheckoutComplete
// or onCheckoutFail
},
onCheckoutComplete({ payment }) {
console.log('onCheckoutComplete', payment);
},
onCheckoutFail(error, { payment }, handler) {
console.error('onCheckoutFail', error, payment);
handler?.showErrorMessage(');
},
});

const headless = await Primer.createHeadless(clientToken);
await headless.configure({
onAvailablePaymentMethodsLoad(paymentMethodTypes) {
// Handle payment methods
},
onCheckoutComplete({ payment }) {
// Show success screen
},
onCheckoutFail(error, { payment }, handler) {
// Show checkout fail
return handler.showErrorMessage();
}
});

Primer.showUniversalCheckout(clientToken, {
applePay: {
captureBillingAddress?: true // defaults to false - not required
}
})

const checkout = await Primer.showUniversalCheckout(clientToken, {
// provide your settings
})
// This will result in the checkout
// being updated after patching a client session
checkout.refreshClientToken();

const options = {
/\* Other checkout options ... \*/
onPaymentMethodAction(action, { paymentMethodType }) {
// Notifies you when a specific payment method has been selected or unselected
// action will either be 'PAYMENT\_METHOD\_SELECTED' or 'PAYMENT\_METHOD\_UNSELECTED'
},
};

const checkout = await Primer.showUniversalCheckout(clientToken, {
container: '#container',
submitButton: {
amountVisible: true,
}
}

{
// other client session options
"order": {
"countryCode": "SE",
"lineItems": [
{
"amount": 500,
"description": "Voucher",
"quantity": 1,
"itemId": "ABC123",
"productType": "DIGITAL" // digital product
},
{
"amount": 1500,
"description": "Blue Shoes",
"quantity": 2,
"itemId": "XYZ123",
"productType": "PHYSICAL" // physical product
}
]
},
}

const Primer = await loadPrimer(); // If the package is loaded from npm
const primer = new Primer({ credentials: { clientToken }});
const checkout = await primer.checkout(options);

// To initialize Universal Checkout
const universalCheckout = await Primer.showUniversalCheckout(clientToken, options);
// To initialize Vault Manager
const vaultManager = await Primer.showVaultManager(clientToken, options);

primer.checkout({
onTokenizeSuccess(paymentMethodTokenData) {
// Implement some verbose logic 🤢
},
onResumeSuccess(resumeTokenData) {
// Do it all again 😵
}
})