Display CRED Pay on Checkout

Use Case

You can display CRED Pay as a payment method on Checkout, under Cards.

Configuring Payment Methods

Depending on how you want to control the payment methods on the Checkout, there are different ways in which the configuration can be passed to the Checkout:

• Pass the configuration to the options parameter of the Checkout code at run time.
  This is useful when you want to modify the order of the payment methods for a particular set of payments while rendering the Checkout. See the

  sample code

  for details.

• Create a global setting of the payments as a Configuration ID and pass these values while creating the Order.
  This is useful when you want to fix the order of the payment methods on all the Checkout renderences.
  

  Handy Tips

  
  Contact our

  Support Team

  for more details about the Configuration ID.

Understanding the Configuration

Let us understand the building blocks that are required to build a configuration of your choice:

1. Payment Methods

2. Payment Instruments

3. Blocks

4. Sequence

5. Preferences

Payment Methods

Before deciding the payment methods or payment instruments that you want to configure on the Checkout, refer to the

Payment Instruments

A payment instrument is a combination of the payment method and its associated properties. For example, cred is the payment instrument, where app is the payment method and cred is the provider.

An instrument is a JSON object with a key named method. Each method and its associated properties are described in the sections below:

Apps

For the method app, the payment instrument is listed below:

// beginning of the code
....
{
  "custom": {
    "name": "Pay with Apps",
    "instruments": [
      {
        "method": "app",
        "providers": [
          "cred"
        ]
      }
    ]
  }
}
...
//rest of the code

Blocks

A block is a collection of one or more payment instruments. Each block has a name and code associated as shown below:

// Block creation
let myPayments = {
  name: "My Custom Block",
  instruments: ["gpay", "freecharge"]
};
// Usage in config
let config = {
  display: {
    block: {
      highlighted: myPayments
    }
  }
};

Here, highlighted is the code associated with myPayments. Multiple blocks can be added to the config at the same time.

Sequence

You can specify the sequence, that is the order, in which the payment methods should be displayed on the Checkout.

A sequence is an array of strings, where each string is the name of the payment method or a block.

In a sequence, you can include any block using the block.${code} format. The block with code highlighted should be represented as block.highlighted as shown below:

let sequence = ["block.highlighted", "upi", "netbanking"];

The above sequence will place the code highlighted first followed by the payment methods upi and netbanking in that particular order.

Preferences

Using the preferences object, you can enhance the configuration of the Checkout. By setting this value, you can decide whether the default list of payment methods should be displayed or not.

Possible values are:

Hide Payment Instruments

You can also hide or remove certain instruments from the Checkout.

This is an array containing the method key used to hide either the payment method and/or the payment instrument associated with that payment method. For example, you can hide the methods, card and HDFC netbanking on the Checkout.

let cardInstrument = {
  method: "card"
};

let instrumentOfSomeBank = {
  method: "netbanking",
  banks: ["HDFC"]
};

let hiddenInstruments = [cardInstrument, instrumentOfSomeBank];

The method card is hidden on the checkout in the image below.

Building the Display Configuration

This section details the display configuration.

Using the display config, you can put together all the modules, that is, blocks, sequence, preferences, hide instruments as shown below:

The display config can be passed in the Checkout options or in the Orders API request using the checkout_config_id parameter.

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

Sample Code

Given below are the sample codes for the use cases mentioned above:

• Display only PayWithCred.
• Display PayWithCred along with the other payment methods.

<html>
<button id="rzp-button1" class="btn btn-outline-dark btn-lg"><i class="fas fa-money-bill"></i> Own Checkout</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
  var options = {
    "key": "[YOUR_KEY_ID]", // Enter the Key ID generated from the Dashboard
    "amount": "1000",
    "currency": "INR",
    "description": "Acme Corp",
    "image": "http://example.com/image/rzp.jpg",
    "prefill":
    {
      "email": "gaurav.kumar@example.com",
      "contact": +919900000000,
    },
    config: {
    "display": {
      "blocks": {
        "custom": {
          "name": "Pay with Apps",
          "instruments": [
            {
              "method": "app",
              "providers": [
                "cred"
              ]
            }
          ]
        }
      },
    "sequence": [
      "block.custom"
    ],
    "preferences": {
      "show_default_blocks": false
    }
  }
},
    "handler": function (response) {
      alert(response.razorpay_payment_id);
    },
    "modal": {
      "ondismiss": function () {
        if (confirm("Are you sure, you want to close the form?")) {
          txt = "You pressed OK!";
          console.log("Checkout form closed by the user");
        } else {
          txt = "You pressed Cancel!";
          console.log("Complete the Payment")
        }
      }
    }
  };
  var rzp1 = new Razorpay(options);
  document.getElementById('rzp-button1').onclick = function (e) {
    rzp1.open();
    e.preventDefault();
  }
</script>
</html>

Supported Apps

Supported app is listed below:

Related Information

• Configurability of Payment Methods on Razorpay Checkout