Frontend Capabilities

# Integrate Apple Pay

Apple Pay is a mobile payment and digital wallet service by Apple Inc. that allows users to make payments in person, through iOS apps, and on the web using the Safari browser. It is supported on the iPhone, Apple Watch, iPad, and Mac.

This tutorial guides you on using Chargebee.js to integrate Apple Pay on your website and creating a subscription after the user completes the checkout.

# Gateway prerequisites

Chargebee currently supports the below payment gateways for Apple Pay:

# Setting up Chargebee JS

# Inserting chargebee.js script in your application

Include the following script in your HTML page. You need to do this only once per page.

<script src="https://js.chargebee.com/v2/chargebee.js"></script>
1

# Initializing a Chargebee instance

Inside your JavaScript code, initialize chargebee with the publishable key (opens new window) once the page is loaded and get 'chargebee instance' object. This object is used further to create components.

Example:

var cbInstance = Chargebee.init({
	site: "site-name", // your test site
	domain: "https://mybilling.acme.com" // this is an optional parameter.
    publishableKey: "test__"
})
1
2
3
4
5

Learn more about ​​initializing a Chargebee instance.

# Create a Payment Intent

You should create a payment intent before submitting the form to authorize the payments.

payment_intent performs the essential function of tracking different events involved in a transaction. This includes:

  • Automatically changing its status based on the outcome of authorization and capture events.

  • Automatically refunding in case of an error post-payment.

A payment_intent can be created at your server-side using create a payment intent API (opens new window) and returned to the client side. The payment method handler uses the created payment_intent internally to perform authorization.

Here's the sample code to create a payment_intent.

TIP

This must be done from your backend to avoid exposing sensitive data.

Example:

  • Curl

The above step should be initiated as a request from your front end.

Front end code:

function createPaymentIntent() {
  return fetch("/create-payment-intent", {
    body: JSON.stringify({
      amount: 500,
      currency_code: "USD",
      payment_method_type: "apple_pay",
    }),
  }).then(response => response.json())
    .then(resp => resp.payment_intent);
}
1
2
3
4
5
6
7
8
9
10

# Authorize Payment Intent

Authorize the payment intent by following the below steps:

# 1. Create a container element in the DOM

Create a container element in the DOM to render the Apple Pay button.

<div id='apple-pay-button'></div>
1

# 2. Set up Apple Pay

Set up Apple Pay using the steps below:

# a. Load Apple Pay integration.

load Apple Pay integration using cbInstance.load("apple-pay").

# b. Set payment intent.

Pass the payment_intent object to applePayHandler.setPaymentIntent(payment_intent).

# c. Mount the payment button.

Use the applePayHandler.mountPaymentButtonfunction to mount the Apple Pay button inside the container element. This function takes the query selector for the container element as an input parameter.

# 4. Handle Payment.

Use the applePayHandler.handlePayment function to initiate the transaction.

The handlePayment function resolves to an authorized payment intent once the user authorizes the payment using the Apple Pay wallet.

# Promises and Callbacks

TIP

We strongly advise utilizing callbacks as the default method for handling payment error cases, particularly for Apple Pay transactions. Please update your integration to prioritize callbacks for Apple Pay payments to ensure a seamless experience for you and your customers.

applePayHandler.handlePayment(
      {
        success: function (result) {
          // result.paymentIntent contains payment intent
          // result.paymentData contains card details like last4, brand
          console.log("success", result);
        },
        error: function (d) {
          console.log("error", d);
        },
      }
    );
1
2
3
4
5
6
7
8
9
10
11
12

Example:

cbInstance.load("apple-pay").then((applePayHandler) => {
  createPaymentIntent()
    .then((payment_intent) => {
      applePayHandler.setPaymentIntent(payment_intent);
      return applePayHandler.mountPaymentButton("#apple-pay-button");
    })
    .then(() => {
      // once button mounted
      return applePayHandler.handlePayment();
    })
    .then((paymentIntent) => {
      //paymentIntent contains authorized payment intent
    })
    .catch((error) => {
      // handle error
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Learn more about other Apple Pay API references.

# Create a subscription

Pass the ID of the successfully authorized payment_intent to Chargebee’s create a subscription API (opens new window).

  • Curl

← Integrate PayPal →