Docs
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.
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.
Use any of these client libraries to set up Chargebee in your backend.
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.
Articles & FAQNote: This must be done from your backend to avoid exposing sensitive data
Sample code:
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;
});
}
Setup your system for accepting payments via Google Pay by following the below steps:
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>
Chargebee Instance is used to create the Google Pay handler object.
var cbInstance = Chargebee.init({
site: 'chargebee-site-name',
publishableKey: 'test_dMmqccu........cdq3avOzBa9Ia'
});
Create a DOM container to hold and display the google pay button component.
<div id='gpay-button'></div>
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
});
Usegoogle-payas the input parameter inload function. Pass thepayment_intentobject as a parameter in the setPaymentIntentfunction that was created in (https://www.chargebee.com/checkout-portal-docs/upi.html#2-create-a-payment-intent “https://www.chargebee.com/checkout-portal-docs/upi.html#2-create-a-payment-intent”). 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);
});
This section contains an explanation of the functionalities of the Payment Method Helper.
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:
Chargebee.init(options)
Use this API to create a payment intent for your Google Pay integration.
Use this function to set paymentIntent that was created at your server-side.
Parameter Name | Description |
|---|---|
| Pass a function that resolves into a payment intent. |
Syntax
gpayHandler.setPaymentIntent(paymentIntent)
Use this function to mount the payment button for your Google Pay integration for successful payments.
Parameter Name | Description | Options | Allowed values |
|---|---|---|---|
container | CSS selector to place gpay button |
|
|
buttonStyle |
| buttonColor | default, black, white |
buttonType | long, short |
Syntax:
gpayHandler.mountPaymentButton(container,buttonStyle)
Use this function to initiate the payment process.
Parameter Name | Optional | Type | Description | Options |
|---|---|---|---|---|
| Yes | Function | Callback that can be passed during the payment process. Usage is limited based on value returned from the redirected page. | Success |
| Error |
Syntax:
gpayHandler.handlePayment(callback)
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]="gaurav@acme.com" \
-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.