Scope

How to configure Gpay in Chargebee?

How to create payment_intent for Google pay in Chargebee?

How to setup front to collect payment details for Google pay on checkout?

How to use Chargbee.js to setup Google pay?

How to create a DOM container to load the Google Pay button?

What are the Chargebee syntax supports Google pay payments?

Summary

Google Pay or GPay allows customers to make payments using its payment method vault.  Read more about GPay.

Currently, Chargebee offers support to integrate Gpay. It can be done using Braintree or Stripe.

Gpay via Braintree integration enables users to securely pay using any card (Credit or Debit) associated with their Google account. Businesses using Braintree can accept GPay from customers in the countries mentioned here.

Google Pay via Stripe integration enables users to securely pay using any card (Credit or Debit) associated with their Google account.

Solution

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 through using Chargebee.js to integrate Google Pay on your website and create a subscription after the user checks out.

Prerequisites

Chargebee currently supports the below payment gateways for Google Pay:

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

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

1. (Backend) Set up Chargebee

Use any of these client libraries to set up Chargebee in your backend.

2. Create a payment_intent

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.

Like our 3DS, a payment_intent must be created on your server-side using the the Create a payment intent API and returned to the client-side. Google Pay handler uses the created payment_intent internally to perform authorization.

Here's the sample code to create a payment_intent.

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

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

Front end code:

function  createPaymentIntent()  
{
return  fetch('/payment-intents',  
  {
    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;

  });

  }

3. (Frontend) Collect payment details

Setup your system for accepting payments via Google Pay by following the below steps: 

a. Setup Chargebee.js

Include the following script into your website’s header to integrate Chargebee.js SDK. This makes all the Chargebee.js functionalities available for use on your website.

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

b. Create a Chargebee Instance

Chargebee Instance is used to create the Google Pay handler object.

var  cbInstance  =  Chargebee.init({
site:  'chargebee-site-name',
 publishableKey:  'test_dMmqccu........cdq3avOzBa9Ia'
});

c. Create a DOM container to load the Google Pay button

Create a DOM container to hold and display the google pay button component. 

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

d. Setup Google Pay

Integrate google pay on your checkout page using the sample code below:

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
});

4. (Frontend) Submit the payment

Usegoogle-payas the input parameter inload function. Pass thepayment_intentobject as a parameter in the setPaymentIntentfunction that was created in step 2. Pass the paymentInfo as a parameter in handlePayment function. On receiving thepayment_intentthe transaction is initiated.

On successful authorization, thepayment_intentturns authorized, and Chargebee redirects the user back to your website(payment authorization page).

Callback

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

Promise-based approach

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

API Reference

This section contains an explanation of the functionalities of the Payment Method Helper.

Init

This function is used to initialize Chargebee with your site, and domain name. The ‘Chargebee Instance’ object returned as a result of initialization is used to create the Google Pay handler object.

Syntax:

createPaymentIntent

Use this API to create a payment intent for your Google Pay integration. 

setPaymentIntent

Use this function to set paymentIntent that was created at your server-side. 

Syntax

gpayHandler.setPaymentIntent(paymentIntent)

mountPaymentButton

Use this function to mount the payment button for your Google Pay integration for successful payments. 

Syntax:

gpayHandler.mountPaymentButton(container,buttonStyle)

handlePayment

Use this function to initiate the payment process. 

Syntax: 

gpayHandler.handlePayment(callback)

5. (Backend) Create a subscription

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

Curl

curl  https://<site-name>.chargebee.com/api/v2/subscriptions \
     -u {full_access_api_key}:\
     -d payment_intent[id]="<Id of authorized payment_intent recieved in last step.>"
     -d plan_id="pro_plan"\
     -d plan_quantity: 1\
     -d customer[first_name]="Gaurav" \ 
     -d customer[last_name]="Kumar" \
     -d customer[email]="[email protected]" \
     -d customer[allow_direct_debit]=true \ 
     -d billing_address[first_name]="Gaurav" \ 
     -d billing_address[last_name]="Kumar" \
     -d billing_address[line1]="PO Box 9999" \
     -d billing_address[city]="Circle Road" \
     -d billing_address[state]="New Delhi" \
     -d billing_address[zip]="100001" \
     -d billing_address[country]="IND"

 Learn more about accepting Google Pay payments using Stripe

This Google Pay direct integration with Stripe/Braintree as well as Adyen for Chargebee is currently available. Contact support to enable Google Pay for your Test and Live site.