Sample Codes
Sample codes to help you integrate the payment methods of your choice on Razorpay Checkout.
If you want to list all the payment methods offered by Axis
bank, allow card payments for ICICI
bank only and hide upi
payment method from the Checkout, you can do so as follows:
<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": "example.com/image/rzp.jpg","prefill":{"email": "gaurav.kumar@example.com","contact": +919900000000,},config: {display: {blocks: {utib: { //name for Axis blockname: "Pay Using Axis Bank",instruments: [{method: "card",issuers: ["UTIB"]},{method: "netbanking",banks: ["UTIB"]},]},other: { // name for other blockname: "Other Payment Methods",instruments: [{method: "card",issuers: ["ICIC"]},{method: 'netbanking',}]}},hide: [{method: "upi"}],sequence: ["block.utib", "block.other"],preferences: {show_default_blocks: false // Should Checkout show its default blocks?}}},"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>
Watch Out!
You can use the payment methods enabled for your account on the Razorpay Dashboard. Also, you can raise a request with our
for additional payment methods or providers.Use the code given below to show OlaMoney and Freecharge on Checkout:
config: {display: {blocks: {banks: {name: 'Methods With Offers',instruments: [{method: 'wallet',wallets: ['olamoney']},{method: 'wallet',wallets: ['freecharge']}]},},sequence: ['block.banks'],preferences: {show_default_blocks: true,},},},};
Use the code given below to show the most used methods:
config: {display: {blocks: {banks: {name: 'Most Used Methods',instruments: [{method: 'wallet',wallets: ['freecharge']},{method: 'upi'},],},},sequence: ['block.banks'],preferences: {show_default_blocks: true,},},},};
Use the code given below to show the instruments of a certain bank only on Checkout:
config: {display: {blocks: {banks: {name: 'Pay Using Axis Bank',instruments: [{method: 'netbanking',banks: ['UTIB'],},{method: 'card',issuers: ['UTIB'],}],},},sequence: ['block.banks'],preferences: {show_default_blocks: false,},},},};
Watch Out!
This configuration is not applicable for
.Use the code given below to highlight the instruments of a certain bank only on Checkout:
config: {display: {blocks: {banks: {name: 'Pay Using Axis Bank',instruments: [{method: 'netbanking',banks: ['UTIB'],},{method: 'card',issuers: ['UTIB'],}],},},sequence: ['block.banks'],preferences: {show_default_blocks: true,},},},};
Use the code given below to reorder payment methods on Checkout:
config: {display: {blocks: {banks: {name: 'All Payment Options',instruments: [{method: 'upi'},{method: 'card'},{method: 'wallet'},{method: 'netbanking'}],},},sequence: ['block.banks'],preferences: {show_default_blocks: false,},},},};
Use the code given below to remove a method from Checkout:
config: {display: {hide: [{method: 'emi'}],preferences: {show_default_blocks: true,},},},};
Use the code given below to show only a certain payment method on Checkout:
config: {display: {blocks: {banks: {name: 'Pay via UPI',instruments: [{method: 'upi'}],},},sequence: ['block.banks'],preferences: {show_default_blocks: false,},},},};
Is this integration guide useful?