Accept Payments Using CRED on Custom Checkout

Integrate CRED on Custom Checkout

See how you can integrate CRED with the following at Custom Checkout and enable users to pay using CRED:

• With Web

  .

• With Android

  .

• With iOS

  .

Prerequisites

1. Sign up

   for a Razorpay account.

2. Generate API Keys

   from the Dashboard.
3. Integrate Razorpay Custom Checkout on your

   website

   ,

   Android app

   or

   iOS App

   .

Web: Collect Flow Only

To add CRED as a payment method, you need to:

• Pass the app_offer parameter in Orders API.
• Pass the method and provider parameters in

  Create Payment Method

  .

1. Pass app_offer Parameter in Order

You must create an order using Orders API. In the response, you obtain an order_id which you must pass to Checkout.

Request Parameters

2. Pass Method and Provider Parameters During Payment Creation

razorpay.createPayment({
  amount: 12340,
  currency: 'INR',
  email: 'gaurav.kumar@example.com',
  contact: '9111145678',
  order_id: 'order_EAbtuXPh24LrEc',
  method: 'app',
  provider: 'cred'
});

Request Parameters

Along with the other checkout options, you must pass:

Android: Intent and Collect Flows

Customers can make payments on your Android app using their CRED Coins as well as the credit cards saved on CRED. The SDK supports two flows:

1. Intent

2. Collect

Prerequisites

For both collect and intent flow, you need to pass the app_offer parameter in the Orders API.

curl -u [YOUR_KEY_ID]:[YOUR_KEY_SECRET] \
-X POST https://api.razorpay.com/v1/orders \
-H "content-type: application/json" \
-d '{
  "amount": 1000,
  "currency": "INR",
  "receipt": "receipt#1",
  "app_offer": true
}'

Request Parameters

Intent Flow

The Android SDK performs the following functions to invoke the intent on the Android device:

• Handles the intent response from CRED
• Opens the CRED app
• Process the payment
• Send success or failure response back to your app

To use this flow:

1. Detect presence of CRED app on customer's Android device

   .

2. Create a payment

   .

3. Implement PaymentResultWithDataListener Method

   .

1. Detect Presence of CRED App

Use the below code to check if the CRED app is present in the customer's Android device. Razorpay.isCredAppInstalled(activity) returns a boolean value, disclosing whether the app is present on the device or not.

if (Razorpay.isCredAppInstalled(PaymentOptions.this)) {
  payWithCredBtn.setText("CRED Pay (Intent Flow)");
} else {
    payWithCredBtn.setText("CRED Pay (Collect Flow)");
}

2. Create Payment

After you receive the customer's app information, send it to the Razorpay API to complete the creation step of the payment flow. Below is the payload(JSON Object) to be sent:

razorpay.submit(payload,activityObject)

JSONObject data = new JSONObject("{currency:'INR'}");
data.put("amount", 29935);
data.put("order_id", "order_DgZ26rHjbzLLY2");
data.put("email", "gaurav.kumar@example.com");
data.put("contact", "9000090000");
data.put("method", "app");
data.put("provider", "cred");
data.put("app_present", true);

Request Parameters

3. Implement PaymentResultWithDataListener Method

The PaymentResultListener or PaymentResultWithDataListener methods can be implemented the way shown in the above function or directly globally to the activity class. The functions will be implemented based on the method chosen.

Sample Code for PaymentResultListener

Below are the sample codes for PaymentResultListener method.

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

Sample Code for PaymentResultWithDataListener

Below are the sample codes for PaymentResultWithDataListener method.

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

Collect Flow

In Collect Flow, the SDK sends a push notification to the contact number passed in the create request. Pass the following parameters to initiate a collect payment.

JSONObject data = new JSONObject();
data.put("amount", 29935);
data.put("order_id", "order_DgZ26rHjbzLLY2");
data.put("email", "gaurav.kumar@example.com");
data.put("contact", "9000090000");
data.put("method", "app");
data.put("provider", "cred ");
data.put("app_present", "false")

Request Parameters

iOS: Collect and Intent Flows

Customers can make payments on your iOS app using their CRED Coins as well as the credit cards saved on CRED. The SDK supports two flows:

1. Collect

2. Intent

Prerequisites

For both collect and intent flow, you need to pass the app_offer parameter in the Orders API.

curl -u [YOUR_KEY_ID]:[YOUR_KEY_SECRET] \
-X POST https://api.razorpay.com/v1/orders \
-H "content-type: application/json" \
-d '{
  "amount": 1000,
  "currency": "INR",
  "receipt": "receipt#1",
  "app_offer": true
}'

Request Parameters

Collect Flow

In the Collect Flow, the SDK sends a push notification to the contact number passed in the create request. To initiate collect flow, send app_present the parameter as 0 while creating the payment.

let options: [String: Any] = [
  "amount": 100,
  "currency": "INR",
  "contact": "9000090000",
  "order_id": "order_FNPoKwCtPyhJOt",
  "email": "gaurav.kumar@example.com",
  "method": "app",
  "provider": "cred",
  "app_present": 0
]
razorpay?.authorize(options)

Request Parameters

Along with the other payment creation request parameters, you must pass:

Intent Flow

In Intent Flow, the SDK invokes an intent, which is handled by the Cred app installed on the iOS device. Follow these steps:

Step 1: Update the info.plist File

You must make the following changes to your iOS app's info.plist file:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>credpay</string>
</array>

Step 2: Detect CRED App in Customer's Mobile

• Check if the CRED app is present on the customer's mobile using the isCredAppAvailable() method.

  ViewController.swiftViewController.m

  copy

  /// This checks if the app is available on the device or not.
  private func isCredAppAvailable() -> Int {
      let credURIScheme = "credpay://" // This will open the CRED URL.
      if let urlString = credURIScheme.addingPercentEncoding(withAllowedCharacters: NSCharacterSet.urlQueryAllowed) {
          if let credURL = URL(string: urlString) {
              if UIApplication.shared.canOpenURL(credURL) {
                  return 1
              }
          }
      }
      return 0
  }

• CRED app listens to the URI Schema.

  xml

  copy

  credpay://

  This can be passed in the uriSchema parameter in the above function. isCredAppAvailable() returns a boolean value informing whether the app is present on the device or not.

  ViewController.swiftViewController.m

  copy

  if (isCredAppAvailable()) {
      payWithCredBtn.setText("CRED Pay (Intent Flow)");
  } else {
      payWithCredBtn.setText("CRED Pay (Collect Flow)");
  }

• If the CRED app is installed, pass the callback_url parameter in the payload:

  ViewController.swiftViewController.m

  copy

  options["callback_url"] = "<MerchantApp URI-Scheme>://"

Listen to CRED Callback

Listen to CRED callback in the AppDelegate class by implementing the open url method. Handle the success response.

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    DispatchQueue.main.asyncAfter(deadline: .now() + 4.0) {
        /** Post the notification to CustomWebVC **/
        NotificationCenter.default.post(name: NSNotification.Name(rawValue: "CREDPAYURIEVENT"), object: nil, userInfo: ["response":url.absoluteString])
    }
    return false
}

Register for Notification

Register for notification in CustomWebVC using the code sample given below:

NotificationCenter.default.addObserver(self, selector: #selector(self.statusCredData(_:)), name:NSNotification.Name(rawValue: "CREDPAYURIEVENT"), object: nil);

Use the code given below to handle payment data:

@objc func statusCredData(_ notification: NSNotification) {
    if let dict = notification.userInfo {
        if let uriScheme = dict["response"] as? String {
            DispatchQueue.main.async {
                self.razorpay?.publishUri(with: uriScheme)
            }
        }
    }
}

Initiate Intent Flow

To initiate intent flow, send the app_present parameter as 1 while creating the payment.

let options: [String:Any] = [
  "amount": 100,
  "currency": "INR",
  "contact": "9000090000",
  "order_id": "order_FNPoKwCtPyhJOt",
  "email": "gaurav.kumar@example.com",
  "method": "app",
  "provider": "cred",
  "app_present": 1,
  "callback_url": "<MerchantApp URI-Scheme>://"
]
razorpay.payWithCred(options)

Request Parameters

Along with the other payment creation request parameters, you must pass:

Webhooks

Webhooks help a web application send information to another application in real-time when a specific event happens.

Example: If you have subscribed to the order.paid webhook event, you will receive a notification every time a user pays you for an order.

Given below are the sample payloads for payment.captured and payment.authorized applicable for CRED:

Payload - payment.authorized

Payload - payment.captured

Related Information

• Webhooks

• Check CRED Eligibility for Users