Google Pay Card Payments - Android Custom Integration

Prerequisites

• You should have already integrated

  Razorpay Custom Checkout

  on your Android app.
• Complete the onboarding process mentioned

  here

  .

Integration Steps

1. Add or update the Google SDKs

2. Update the Razorpay Custom Integration SDK

3. Add dependencies in the Build Gradle file

4. Add metadata in the Android Manifest file

   .

5. Instantiate and initialize the Razorpay Android Custom SDK

6. Implement Orders API in your server-side

   .

7. Fetch payment methods

   .

8. Check if Google Pay Cards is setup on the customer's device

   .

9. Set up the WebView

   .

10. Submit payment data and handle success and error events

    .

11. Store fields in the server

    .

12. Verify payment signature

    .

Step 1: Add or Update the Google SDKs

You will need to integrate the Google SDK in your Android app.

Import the SDK from our Maven repository by adding the following lines to your app's build.gradle file.

repositories {
    mavenCentral()
}

dependencies {
    implementation 'com.razorpay:gpay:1.0.0'
}

Step 2: Update Razorpay Custom Integration SDK

Google Pay Cards is supported on Razorpay Android - Custom Checkout version 3.8.8 and higher. If you are using an older version, you will need to update the same.

You can update the Custom Checkout version in your build.gradle file as shown below:

dependencies {
  ...
  implementation(name:'razorpay-android-3.8.8', ext: 'aar')’)
}

Step 3: Add Dependencies in Build Gradle File

Add the following lines to your app's build.gradle file.

dependencies {
    ...
    implementation 'com.android.support:customtabs:26.1.0'
    implementation 'com.google.android.gms:play-services-tasks:15.0.1'
    implementation 'com.google.android.gms:play-services-wallet:18.0.0'
    ...
}

Step 4: Add Metadata in Android Manifest File

Add the following lines inside the app’s AndroidManifest.xml file.

<meta-data
   android:name="com.google.android.gms.wallet.api.enabled"
   android:value="true" />

Step 5: Instantiate and Initialize Razorpay Android Custom SDK

Instantiate

To instantiate Razorpay, pass a reference of your activity to the Razorpay constructor, as shown below:

import com.razorpay.Razorpay
Razorpay razorpay = new Razorpay(activity);

Initialize

Add your Razorpay API keys to AndroidManifest.xml.

The sample AndroidManifest.xml file with auto-OTP reading feature enabled is shown below:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <application>
    <meta-data
        android:name="com.razorpay.ApiKey"
        android:value="YOUR_KEY_ID"
        />
  </application>
</manifest>

To set your API key programmatically, that is, at the runtime instead of statically defining it in your AndroidManifest.xml, you can pass it as a parameter to the Razorpay constructor, as shown below:

Razorpay razorpay = new Razorpay(activity, "YOUR_KEY_ID");

Step 6: Implement Orders API in your Server-side

Order is an important step in the payment process.

• An order should be created for every payment.
• You can create an order using the

  Orders API

  . It is a server-side API call. Know how to

  authenticate

  Orders API.
• The order_id received in the response should be passed to the checkout. This ties the Order with the payment and secures the request from being tampered.

Request Parameters

Here is the list of parameters and their description for creating an order:

Know more about

Response Parameters

Descriptions for the response parameters are present in the

Error Response Parameters

The error response parameters are available in the

The razorpay_order_id, returned on successful creation of the order, should be sent to the Checkout form.

Step 7: Fetch Payment Methods

To get a list of available payment methods, call getPaymentMethods. This fetches the list of payment methods asynchronously and returns the result in JSON format in the onPaymentMethodsReceived callback. For the structure of the JSON result, you can refer:

razorpay.getPaymentMethods(new Razorpay.PaymentMethodsCallback() {
	@Override
	public void onPaymentMethodsReceived(String result) {
		JSONObject paymentMethods = new JSONObject(result);
	}

	@Override
	public void onError(String error){

	}
	});
});

Know

Step 8: Check if Google Pay Cards is Setup on Customer's Device

Use the code given below to check if Google Pay cards are setup on your customer’s device.

razorpay.isUserRegisteredOnGpay(this, new GPayCardsRegisteredListener(){
	@Override
	public void isUserRegisteredOnGpay(boolean status){
		//status of user 
	}
}

You should show Google Pay cards method to your customers only when isUserRegisteredOnGpay returns true.

Step 9: Set Up the WebView

The bank ACS pages are displayed to the user in a WebView. You need to define a WebView in your layout and pass the reference to our SDK using setWebView, as shown below:

webview = findViewById(R.id.payment_webview);
// Hide the WebView until the payment details are submitted
webview.setVisibility(View.GONE);
razorpay.setWebView(webview);

Step 10: Submit Payment Data and Handle Success and Error Events

Once you have received the customer's payment information, it needs to be sent to Razorpay to complete the creation step of the payment flow. You can do this by invoking the submit method. Before invoking this method, you have to make your WebView visible to the customer. The data that needs to be submitted in the form of a JSONObject is shown below:

try {

	JSONObject data = new JSONObject();
	data.put("amount", 1000); // pass in currency subunits. For example, paise. Amount: 1000 equals ₹10
	data.put("order_id", "order_DgZ26rHjbzLLY2");//sample order_id. Generate orders using Orders API
	data.put("email", "gaurav.kumar@example.com");
	data.put("contact", "9876543210");
	JSONObject notes = new JSONObject();
	notes.put("custom_field", "abc");
	data.put("notes", notes);
	data.put("provider", "google_pay");

	// Make WebView visible before submitting payment details
	webview.setVisibility(View.VISIBLE);

	razorpay.submit(data, new PaymentResultListener() {
		@Override
		public void onPaymentSuccess(String razorpayPaymentId) {
			// Razorpay payment ID is passed here after a successful payment
		}

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

Using PaymentResultWithDataListener

You have the option to implement PaymentResultListener or PaymentResultWithDataListener to receive callbacks for the payment result.

PaymentResultListener provides only payment_id as the payment result. PaymentResultWithDataListener provides additional payment data, such as email and contact of the customer, along with the order_id, payment_id, signature and more.

razorpay.submit(data, new PaymentResultWithDataListener() {
        @Override
        public void onPaymentSuccess(String razorpayPaymentId, PaymentData paymentData) {
            // Razorpay payment ID and PaymentData passed here after a successful payment
        }

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

Step 11: Store the Fields in the Server

A successful payment returns the following fields to the Checkout form.

Step 12: Verify Payment Signature

This is a mandatory step to confirm the authenticity of the details returned to the Checkout form for successful payments.

RazorpayClient razorpay = new RazorpayClient("[YOUR_KEY_ID]", "[YOUR_KEY_SECRET]");

String secret = "EnLs21M47BllR3X8PSFtjtbd";

JSONObject options = new JSONObject();
options.put("razorpay_order_id", "order_IEIaMR65cu6nz3");
options.put("razorpay_payment_id", "pay_IH4NVgf4Dreq1l");
options.put("razorpay_signature", "0d4e745a1838664ad6c9c9902212a32d627d68e917290b0ad5f08ff4561bc50f");

boolean status =  Utils.verifyPaymentSignature(options, secret);