A Payment Gateway creates a secure pathway between a customer and the business to facilitate payments securely. It involves the authentication of both parties from the banks involved. You can accept payments from customers on your website and mobile apps using the Razorpay Payment Gateway as a business owner.
Prerequisites
Create a
Razorpay Account
.
Generate the
API Keys
from the Razorpay Dashboard. To go live with the integration and start accepting real payments, generate Live Mode API Keys and replace them in the integration.
Know about the
Razorpay Payment Flow
Integration Steps
Follow these integration steps:
<!-- rzp_test_1V2UbZjJhXnIE1 -->
<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 (GO-TO account&setting -> API>Generate YOUR KEY)", // Enter the Key ID generated from the Dashboard
"amount": "1000",
"currency": "INR",
"description": "Acme Corp",
"image": "https://s3.amazonaws.com/rzp-mobile/images/rzp.jpg",
"prefill":
{
"email": "test@example.com",
"contact": +91990045450000,
},
config: {
display: {
blocks: {
utib: { //name for Axis block
name: "Pay using Axis Bank",
instruments: [
{
method: "card",
issuers: ["UTIB"]
},
{
method: "netbanking",
banks: ["UTIB"]
},
{
method: 'wallet',
wallets: ['freecharge']
},
{
method: 'upi'
},
]
},
other: { // name for other block
name: "Other Payment modes",
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>
That's it!