Google Pay Integration - Custom Checkout

Integrate Google Pay at Razorpay's Custom Checkout page for desktop, mobile-web (M-Web) and Android apps.


To enable Google Pay at your Custom Checkout:

  1. Show Google Pay as a separate option.
  2. Trigger payment when the user clicks Google Pay at your checkout.

Google Pay,

, can be integrated using two types of UPI flows:

  • Collect Request Flow: This flow is available on desktop and mobile browsers. The customers enter their Google Pay VPA on the checkout form. Upon triggering a payment request via Razorpay’s upi method, the Collect request reaches the customer’s Google Pay application. The customer then completes the payment.

  • Intent-based Payment: This flow is applicable only to mobile and mobile-web payments. In these cases, the customer is redirected to Google Pay’s application to complete the payment. Intent-based payments are available on the Android SDK and on Google Chrome for Android (v56 and above, but not on Google Chrome WebViews).

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.

Handy Tips

As the APIs exposed by Google Pay are available only in Chrome's JavaScript engine, you will need to use our JavaScript-based integration.

Watch Out!

This feature is only available for webpages running on HTTPS.

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.

  1. Add Razorpay.js to your website

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

    Know more about

    .

  2. Instantiate Razorpay

    var razorpay = new Razorpay({ key: '<YOUR_KEY_ID>' });
  3. Detect if Google Pay on available on the device

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

  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.

    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

section for more details.

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.

NPCI Restrictions for UPI Collect Flow

  • MCC 6540: UPI Collect flow is not available for this MCC. You can use as an alternative.
  • MCC 4812: Maximum amount limited to ₹5,000 per transaction for UPI Collect flow. You can use as an alternative.
  • MCC 4814: Maximum amount limited to ₹5,000 per transaction for UPI Collect flow. You can use as an alternative.

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

.

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

    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:

    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.


Is this integration guide useful?