Skip to main content

Apple Pay Button

Introduction​

The Apple Pay button is a web element that integrates an Apple Pay into your application if supported. The Apple Pay button provides customization options, allowing you to modify the button's appearance, ensuring a professional and cohesive user experience during the payment process.

Step 1: Prepare the page​

Add the following script element to your page's html to include the Payment Elements SDK in your site:

<head>
  <script src="https://sandbox-cdn.pci.getfwd.com/sdk/forward.js"></script>

Your webpage also needs an element where it can be mounted. This is typically achieved by defining a <div> and assigning it a unique identifier.

<div id="payment-button" />

Step 2: Check if Apple Pay is supported​

Before creating the Apple Pay button, you should check if Apple Pay is supported on the current device and browser. You can do this by calling the isApplePaySupported method from the window.Forward object.

// <script>
if (window.Forward.isApplePaySupported()) {
  // Apple Pay is supported, proceed with creating the Apple Pay button
} else {
  // Apple Pay is not supported, handle accordingly
}
note

Apple Pay is supported on Safari on macOS and iOS devices, provided it has not been disabled in the user's browser settings.

Step 3: Create a Apple Pay button​

The Forward class can be accessed through the window object. To instantiate a Apple Pay button, you can call the createApplePayButton static class helper with the following:

  • apiKey: Your public key.
  • clientSecret: The client_secret of the payment intent.
// <script>
if (window.Forward.isApplePaySupported()) {
  const applePayButton = await window.Forward.createApplePayButton({
    apiKey: 'pk_123948342832',
    clientSecret: 'pi_123948342832_secret_123948342832',
  });

Step 4: Mount the Apple Pay button​

After creating an instance of the Apple Pay button, you can add it to the page by using the mount method.

Provide the element selector where you want the form to be placed as well as the following callbacks as arguments to the mount method:

  • onSuccess: This callback is invoked when the user successfully enters their payment details via Apple Pay. The callback is provided with a token representing a PaymentMethod id, which can be utilized to process payments on your backend, and applePayPayment info.
  • onError: This callback is invoked when an error occurs during payment info processing. The callback is provided with an error object containing information about the error.
  • onCancel: (optional) This callback is invoked when the user prematurely closes the Apple Pay pop-up window.
info

Your onSuccess callback MUST return a Promise that sends the token to your server to process the payment. If the payment is successful, the Promise should be resolved. If the payment fails, the Promise should be rejected with an error message.

The mount method returns a function that you can use to remove the Apple Pay button from the page.

// <script>
const unmountApplePayButton = applePayButton.mount('#payment-button', {
  onSuccess: async ({ token, applePayPayment }) => {
    console.log(token);
    console.log(applePayPayment);
    // Send token to your server to process payment
    // Resolve promise or throw error
  },
  onError: (error) => {
    console.log(error);
  },
  onCancel: () => {
    console.log('User closed Apple Pay pop-up window');
  },
});

// Remove the Apple Pay button from the page
unmountApplePayButton();

Apple Pay Payment Request​

You can customize the Apple Pay payment request by specifying applePayPaymentRequest on mount.

applePayPaymentRequest is an object that may contain any subset of the properties of an ApplePayPaymentRequest.

// <script>
applePayButton.mount('#payment-button', {
  onSuccess: async ({ token }) => { ... },
  onError: (error) => { ... },
  applePayPaymentRequest: {
    total: {
      label: 'COMPANY, INC.',
      type: 'final',
      amount: '38.06',
    },
  }
});

You may also subsequently update the Apple Pay payment request by calling the setApplePayPaymentRequest method (prior to the user clicking the Apple Pay button):

// <script>
applePayButton.setApplePayPaymentRequest({
  total: {
    label: 'COMPANY, INC.',
    type: 'final',
    amount: '38.06',
  }
});

Appearance​

You may customize the Apple Pay button appearance by specifying applePayButtonOptions on mount.

export type ApplePayButtonOptions: {
  buttonstyle?: 'black' | 'white' | 'whiteWithOutline';
}

Example of adjusting Apple Pay button styling​

// <script>
applePayButton.mount('#payment-button', {
  onSuccess: async ({ token }) => { ... },
  onError: (error) => { ... },
  applePayButtonOptions: {
    buttonstyle: "white-outline",
  },
});

Apple Pay Payment​

The onSuccess callback is provided with both a token and an applePayPayment object.

See the ApplePayPayment documentation for more information.