Google Pay integration with Chargebee.js

Google Pay is a digital wallet platform and online payment system developed by Google to power in-app, online, and in-person contactless purchases on mobile devices, enabling users to make payments with Android phones, tablets, or watches.

This tutorial guides you on using Chargebee.js to integrate Google Pay on your website and creating a subscription after the user checks out after making a purchase.

Gateway Prerequisites

Chargebee currently supports the below payment gateways for Google Pay:

• Adyen. To enable Google Pay via Adyen, learn more.

• Braintree. To enable Google Pay via Braintree, learn more.

• Stripe. To enable Google Pay via stripe, learn more.

• BlueSnap. To enable Google Pay via BlueSnap, learn more.

Set up Chargebee.js

Include the Chargebee.js script on your page and initialize a Chargebee instance before you start. For the script tag, the Chargebee.init options, and the tearDown() caveat, see Set up Chargebee.js.

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 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.

Example:

curl https://{site-name}.chargebee.com/api/v2/payment_intents \
  -u {fullaccess_api_key}: \
  -d  amount=500 \
  -d currency_code="USD" \
  -d payment_method_type="google_pay"

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

Frontend code:

function createPaymentIntent() {
	return fetch('/payment-intents', {
		method: 'POST',
		body: JSON.stringify({
			amount: 500,
			currency_code: 'USD',
			payment_method_type: 'google_pay'
		})
	}).then(function(response) {
		return response.json();
	}).then(function(responseJson) {
		return responseJson.payment_intent;
	});
}

Authorize Payment Intent

Follow these steps to integrate Google Pay payments into your website.

1. Create a container in DOM to load the Google Pay button

Create a DOM container to hold and display the Google Pay button component.

<div  id='gpay-button'></div>

2. Setup Google Pay

Set up Google Pay on your checkout page using the below steps:

a. Load Google Pay integration

load Google Pay integration using cbInstance.load("google-pay").

b. Set payment intent

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

c. Mount the payment button

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

Sample Code:

cbInstance.load('google-pay').then((gpayHandler) => {
  createPaymentIntent().then((intent) => {
      gpayHandler.setPaymentIntent(intent);
      return gpayHandler.mountPaymentButton('#gpay-button')
  }).then(() => {
      // once button mounted
      return gpayHandler.handlePayment();
  }).then((result) => {
      // result.paymentIntent contains authorized payment intent
      // result.paymentData contains card details like last4, brand
  }).catch((error) => {
      // handle error
  });
});

3. Handle Payment

Use the gpayHandler.handlePayment function to initiate the transaction. The handlePayment function resolves to an authorized payment intent once the user authorizes the payment using the Google Pay wallet.

Example for promises and callbacks

gpayHandler.handlePayment()
.then((result) => {
  // result.paymentIntent contains payment intent
  // result.paymentData contains card details like last4, brand
  console.log("success", result);
}).catch((err) => {
  console.log("error", err);
});

gpayHandler.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);
        },
      }
    );

Learn more about the additional functions for Google Pay.

Create a subscription (server)

Pass the ID of the successfully authorized payment_intent to Chargebee’s create a subscription API.

curl  https://{site}.chargebee.com/api/v2/customers/__test__8asz8Ru9WhHOJO/subscription_for_items \
     -X POST \
     -u {site_api_key}: \
     -d payment_intent[id]="<Id of authorized payment_intent recieved in last step.>" \
     -d subscription_items[item_price_id][0]="basic-USD" \
     -d subscription_items[billing_cycles][0]=2 \
     -d subscription_items[quantity][0]=1 \
     -d subscription_items[item_price_id][1]="day-pass-USD" \
     -d subscription_items[unit_price][1]=100