Google Pay Integration - Custom Checkout

Prerequisites

1. Sign up

   for a business account with Google Pay.

2. Contact our Support Team

   and have them whitelist your VPA (UPI ID).
3. Verify your VPA (UPI ID) details on the

   Google Merchant Console

   . Google deposits a small amount into the bank account linked to your VPA (UPI ID).
4. You should have already integrated one of the following:

   • Razorpay Web Integration - Custom Checkout

     .

   • Razorpay Android Integration - Custom Checkout

     .

5. Generate API Keys

   from the Dashboard.

General Branding Guidelines

Refer to

Desktop Integration

On desktop browsers, the Collect request flow works the same way as

1. Collect the customer's VPA and pass it in the payment request with method as upi.
2. Razorpay then triggers a Collect request. The collection request is sent to the customer's Google Pay application where they can make the payment.

Mobile-Web Integration (Google Chrome)

On mobile-web, for intent-based payments, the flow should be as follows:

1. Check if Google Pay is installed on the user’s device. If installed, show the necessary UI elements.
2. Once the user chooses to pay using Google Pay, you can initiate an intent-based payment from your checkout.
3. Google Chrome will request the user to make a payment using Google Pay.

Detect Google Pay Installation on Device

1. Add Razorpay.js to your website

   html

   copy

   <script type="text/javascript" src="https://checkout.razorpay.com/v1/razorpay.js"></script>

   Know more about

   Custom Web Integration

   .

2. Instantiate Razorpay

   javascript

   copy

   var razorpay = new Razorpay({  key: '<YOUR_KEY_ID>' });

3. Detect if Google Pay on available on the device

   javascript

   copy

   razorpay.checkPaymentAdapter('gpay')
     .then(() => {
       // Google Pay is available, show the payment option
     })
     .catch(() => {
       // Google Pay is unavailable
     });

Initiate Payment Using Google Pay

1. Create a payment through Google Pay. Skip passing the vpa field in the payment data and pass { gpay: true } as the second argument to createPayment.

   javascript

   copy

   var paymentData = {
     amount: 100000, //pass in paise (amount: 100000 equals ₹1000)
     method: 'upi',
     contact: '9000090000',  // customer's mobile number
     email: 'gaurav.kumar@example.com',  //customer's email address
     order_id: 'order_00000000000001'//..  and other payment parameters, as usual
   };
   razorpay.createPayment(paymentData, { gpay: true });
   .on('payment.success', function(response) {
     // response.razorpay_payment_id
     // response.razorpay_order_id
   })
   .on('payment.error', function(error) {
     // display error to customer
   })

Refer to the

Android Integration

Collect-Based Integration

This is the same as the existing

1. Collect the customer's VPA and pass it in the payment request, with method as upi.
2. Razorpay then triggers a collect request. The collection request is sent to the customer's Google Pay application, where they can make the payment.

Intent-Based Integration

On Android, for intent-based payments, first you need to check if Google Pay is installed on the user’s device. You can use the razorpay.getAppsWhichSupportUpi method to retrieve the list of apps that support intent-based payments installed on a phone.

When a user selects Google Pay as the payment method, you need to submit the Google Pay's package name along with other checkout options to the Razorpay function razorpay.submit:

try
{
  JSONObject data = new JSONObject();
  data.put("amount", 100000); //pass in paise (amount: 100000 equals ₹1000)
  data.put("email", "gaurav.kumar@example.com");  //customer's email address
  data.put("contact", "9876543210");  //customer's mobile number
  data.put("order_id", "order_00000000000001");  //Razorpay Order id
  JSONObject notes = new JSONObject();
  notes.put("custom_field", "Make it so.");  //notes for the payment, if any
  data.put("notes", notes);

  data.put("method", "upi");  //Method specific fields
  data.put("_[flow]", "intent");
  data.put("upi_app_package_name", "com.google.android.apps.nbu.paisa.user");
  razorpay.submit(data, new PaymentResultWithDataListener()

  {
    @Override
      public void onPaymentSuccess(String razorpayPaymentId, PaymentData data)
      {
        // Razorpay payment ID, Razorpay order ID and Razorpay Signature is passed here after a successful payment
        // You will need the payment ID to capture the payment on your end
      }

    @Override
    public void onPaymentError(int code, String description)
    {
    // Error code and description is passed here
    }
  });
}
catch (Exception e)
{
  Log.e(TAG, "Error in submitting payment details", e);
}

Additionally, if you want to open Google Pay within your application for customers to make the payment without any redirection, you can do so by integrating with

Intent-Based Integration Using Google Pay SDK

You also have the option to integrate Google Pay with the Custom Checkout on your Android app using Google's SDK.

This offers the advantage of letting you open Google Pay within your application for customers to make the payment without any redirection, improving the user experience.

To integrate Google Pay with the Checkout on your Android app using Google's SDK:

1. Download the

   Google Pay SDK

   and add the .aar files to the application library.
   Handy Tips

   The Razorpay-Google Pay SDK acts as a wrapper over the native Google-SDK. This SDK connects Razorpay's SDK with the Google SDK. You need all the 3 SDKs (listed below) for the flow to work.

   • Razorpay Android SDK
   • Google Pay SDK
   • Razorpay-Google Pay SDK

2. Add the following lines of code to the build.gradle file of your application:

   build.gradle

   copy

   dependencies {
         implementation(name: 'razorpay-googlepay-1.3.0', ext: 'aar')
         implementation(name:'google-pay-client-api-1.0.0  ', ext:'aar')
         implementation 'com.android.support:customtabs:26.1.0'
         implementation 'com.google.android.gms:play-services-tasks:15.0.1
       }

This adds the dependencies for the SDK and creates a Google Pay UPI payment method on your Checkout form.