ApplePay Container

Version: 2.0.0

Configuration

The ApplePay container provides the following configuration options:

Parameter	Type	Req?	Description
location	PaymentLocation	Yes	Location where the Apple Pay button is to be rendered.
getCartId	function	No	Required if createCart not provided. Should return a promise that resolves to the shopper’s cart ID.
createCart	{ getCartItems: () => CartItem[]; }	No	Location where the Apple Pay button is to be rendered.
onButtonClick	function	No	Called when the user clicks the Apple Pay button. This callback receives a ‘showPaymentSheet’ function as its only argument that must be called to begin the Apple Pay session and show the payment sheet. IMPORTANT: The ‘showPaymentSheet’ function must be called synchronously. If called asynchronously, it will throw … an exception “Must create a newApplePaySession from a user gesture handler.”
onSuccess	function	No	Called when payment flow is successful.
onError	function	No	Called when the payment flow was aborted due to an error. The function receives an object with two properties, { name: string, message: string }, containing the localized error name and message. Both properties are user-facing and can be translated using the “PaymentServices.ApplePay.errors” language definitions.
hidden	boolean	No	Called when the payment flow was aborted due to an error. The function receives an object with two properties, { name: string, message: string }, containing the localized error name and message. Both properties are user-facing and can be translated using the “PaymentServices.ApplePay.errors” language definitions.
disabled	boolean	No	Whether the button is hidden. Set this to true to hide the Apple Pay button (default: false).

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the ApplePay container:

import { render as provider } from '@dropins/storefront-payment-services/render.js';
import { ApplePay } from '@dropins/storefront-payment-services/containers/ApplePay.js';

await provider.render(ApplePay, {
  location: location,
  getCartId: getCartId,
  createCart: [],
})(block);