Highlight axio on Checkout

Available in🇮🇳 India

After axio payment method is enabled, it appears as a Cardless EMI provider under EMI on Razorpay Standard Checkout. You can highlight axio on the Razorpay Checkout using a configuration and make it more prominent. Highlighted Axio on Checkout

Follow these steps to highlight axio on Razorpay Checkout:

Configure payment methods.
Build configuration.

1. Configure Payment Methods

Based on how you want to control the payment methods at the Checkout, there are two different ways to pass the configuration to Checkout: Options Parameter and Global Settings.

Method 1: Options Parameter
Method 2: Global Settings

Pass the configuration to the options parameter of the Checkout code at run time. Use it when you want to modify the order of the payment methods for a particular set of payments while rendering the Checkout.

2. Build Configuration

Using the display config, you can put together all the modules, that is, blocks, sequence, preferences, hide instruments as shown below: You can pass the display config in the Checkout options or the Orders API request using the checkout_config_id parameter.

let config = {
    display: {
        blocks: {
            walnutBlock: {
                name: "Pay With Axio", // The title of the block
                instruments: [{
                    "method": "cardless_emi",
                    "providers": ["walnut369"]
                }] // The list of instruments
            },
        },
        sequence: ["block.walnutBlock"], // The sequence in which blocks and methods should be shown
        preferences: {
            show_default_blocks: true // Should Checkout show its default blocks?
        }
    }
};

// beginning of the Checkout code
.....
let options = {
    key: "[YOUR_KEY_ID]",
    amount: 60000,
    currency: "INR",
    config: {
        display: {
            blocks: {
                walnutBlock: {
                    name: "Pay With axio", // The title of the block
                    instruments: [{
                        "method": "cardless_emi",
                        "providers": ["walnut369"]
                    }] // The list of instruments
                },
            },
            sequence: ["block.walnutBlock"], // The sequence in which blocks and methods should be shown
            preferences: {
                show_default_blocks: true // Should Checkout show its default blocks?
            }
        }
    }
};
let razorpay = new Razorpay(options);
razorpay.open();
....
//rest of the Checkout code

//Contact our Support Team to get your `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"
    }
}'

RazorpayClient razorpay = new RazorpayClient("[YOUR_KEY_ID]", "[YOUR_KEY_SECRET]");
        JSONObject orderRequest = new JSONObject();
        orderRequest.put("amount", 1000); // amount in the smallest currency unit
        orderRequest.put("currency", "INR");
        orderRequest.put("checkout_config_id", "config_Ep0eOCwdSfgkco");

        Order order = razorpayclient.orders.create(orderRequest);
        System.out.print(order);

import razorpay
client = razorpay.Client(auth=("YOUR_ID", "YOUR_SECRET"))

client.order.create({
"amount": 50000,
  "currency": "INR",
  "receipt": "receipt#1",
  "checkout_config_id": "config_Ep0eOCwdSfgkco"
 })

$api = new Api($key_id, $secret);

$api->order->create(array('amount' => 100, 'currency' => 'INR', checkout_config_id=> 'config_Ep0eOCwdSfgkco'));

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

Dictionary<string, object> options = new Dictionary<string,object>();
options.Add("amount", 50000); // amount in the smallest currency unit
options.Add("receipt", "receipt#1");
options.Add("currency", "INR");
options.Add("checkout_config_id", "config_Ep0eOCwdSfgkco");
Order order = client.Order.Create(options);

require "razorpay"
Razorpay.setup('YOUR_KEY_ID', 'YOUR_SECRET')

order = Razorpay::Order.create amount: 50000, currency: 'INR', receipt: 'receipt#1',   checkout_config_id: 'config_Ep0eOCwdSfgkco'

var instance = new Razorpay({ key_id: 'YOUR_KEY_ID', key_secret: 'YOUR_SECRET' })

instance.orders.create({
  amount: 50000,
  currency: "INR",
  receipt: "receipt#1",
  checkout_config_id: "config_Ep0eOCwdSfgkco"
})

import ( razorpay "github.com/razorpay/razorpay-go" )
client := razorpay.NewClient("YOUR_KEY_ID", "YOUR_SECRET")

data := map[string]interface{}{
  "amount": 50000,
  "currency": "INR",
  "receipt": "receipt#1",
  "checkout_config_id": "config_Ep0eOCwdSfgkco"
}
body, err := client.Order.Create(data, nil)

Know more about Orders API.

Sample Code

Given below is the sample code to highlight axio on Standard Checkout:

Highlight axio on Standard Checkout

        <html>
        <button id="rzp-button1">Pay</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": "500000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
            "currency": "INR",
            "name": "Acme Corp",
            "description": "Test Transaction",
            "image": "https://example.com/your_logo",
        //  "order_id": "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
            "handler": function (response){
                alert(response.razorpay_payment_id);
                alert(response.razorpay_order_id);
                alert(response.razorpay_signature)
            },
            "config": {
                "display": {
                    "blocks": {
                        "walnut": {
                            "name": 'Pay via axio',
                            "instruments": [
                                {
                            "method": 'cardless_emi',
                            "providers":['walnut369']
                        }
                    ],
                },
            },
        "sequence": ['block.walnut'],
        "preferences": {
            "show_default_blocks": false,
        },
        },
        },
            "prefill": {
                "name": "Gaurav Kumar",
                "email": "gaurav.kumar@example.com",
                "contact": "9000090000"
            },
            "notes": {
                "address": "Razorpay Corporate Office"
            },
            "theme": {
                "color": "#3399CC"
            }
        };
        var rzp1 = new Razorpay(options);
        rzp1.on('payment.failed', function (response){
                alert(response.error.code);
                alert(response.error.description);
                alert(response.error.source);
                alert(response.error.step);
                alert(response.error.reason);
                alert(response.error.metadata.order_id);
                alert(response.error.metadata.payment_id);
        });
        document.getElementById('rzp-button1').onclick = function(e){
            rzp1.open();
            e.preventDefault();
        }
        </script>
        </html>

Configure Payment Methods on Razorpay Checkout

​1. Configure Payment Methods

​2. Build Configuration

​Sample Code

​Related Information

1. Configure Payment Methods

2. Build Configuration

Sample Code

Related Information