Integrate Payment Gateway — RazorPay with Laravel

RazorPay integration with laravel using Web Integrations easy steps.

This guide will walk you through the process of integrating the Razorpay payment gateway into your Laravel application on Blade File. By following a few simple steps, you can quickly get the desired result. Don’t miss any of the steps to avoid confusion.

Let’s get started with our app

first of all create a laravel app using this command in your desired directory,

composer create-project laravel/laravel RazorpayIntegrationLaravelp

Connect the app with your Database if needs any Database operation in this Process to store any data or else you can skip this step

Get RazorPay Credentials

Our next step is that get your Required Razorpay credentials ready to use in our Script for successful execution.

1. For this Process Login into Your Razorpay Account,
2. After successful login goto Accounts & settings from your sidebar
3. Look for API keys if you don’t have any key then Create a test API key and copy the Key id we will be needing that later.

Let’s start Integration

Steps to integrate the Standard Checkout form on your website.

Add this Given Script in your Script section to initiate Razorpay on your page for payments

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

If you want to add the Default payment button given by Razorpay You can use the given button to initiate the payment.

<button id="rzp-button1">Pay</button>

You can definitely ignore this step if you are having your own button as needed in your webpage just make sure to initialise the Razorpay script inside the code of your custom button.

This is the most important step for this integration,

You can comment out the order_id in options if you are using it on webpage

<script>
var options = {
    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
    "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    "name": "Acme Corp", //your business name
    "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)
    },
    "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
        "name": "Gaurav Kumar", //your customer's name
        "email": "gaurav.kumar@example.com",
        "contact": "9000090000" //Provide the customer's phone number for better conversion rates 
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
};

// these above options are required for successful payment.
var rzp1 = new Razorpay(options);

//Comment if you are using your own button start
document.getElementById('rzp-button1').onclick = function(e){
    rzp1.open(); // this is the important thing to start your payment process
    e.preventDefault();
}
//Comment if you are using your own button end
</script>

if you are using your custom button to initiate payment with your some custom validation and rules you can comment out the last lines and instead use only initiator for example.

cont myFunction = ()=?{
//my validation part here
...
//my validation part ends here after successful validation
rzp1.open();
}

One more and last thing that you must know that we have used Handler Function Checkout method. the good thing is that you can call your API or some sort of coding stuff after getting successful checkout, You can write you Own code to Perform some Database operation to store the payment_id and execute some other task as required.

"handler": function (response){
        alert(response.razorpay_payment_id);
        alert(response.razorpay_order_id);
        alert(response.razorpay_signature)
        // Write your specific operation code here 
          // call api or perform some operation after successful checkout.
    },

One more thing to make it more easier for you is that if your only perpose is to collect some certain amount on a single click you can always prefer to check Razorpay payment button where you can Create Payment Button with Already set amount on that button all you need to paste as it is button at suitable position on your page.

This is the sample button code that you can use.

<form>
<script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="id inserted here" async> 
</script> 
</form>

Conclusion

I hope this integration guide going to be useful for you with your ongoing project, you can give it a try i tried to make it as simple to understand as possible, Thanks for Reading this stoty.

If you find this Story Helpful, You can show some support to help me.