RazorPay ⚡️ + Vue 3

It's client side package for rendering Razorpay Component for vue app.

Web Integration https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/

Install

npm install razorpay-vue

Live Demo

Check out the live demo of the component in action.

Props

| Prop | Default | Description | |--------------|-----------|------------| | label | "Pay" | Label for button which will display | | css | | To customize the css for the button you can add classes | | options | | It support default razorpay options for more detail follow below usage.|

Using Callback url

<template>
    <Razorpay label="Pay with Razorpay" :options="options" />
</template>
<script setup>
   import {Razorpay} from "razorpay-vue3";
   // Razorpay options follow link for more detail https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/build-integration/#12-integrate-with-checkout-on-client-side
   const 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
    "callback_url": "https://eneqd3r9zrjok.x.pipedream.net/",
    "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": "[email protected]",
        "contact": "9000090000" //Provide the customer's phone number for better conversion rates
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
}
</script>

Using Handler function

<template>
    <Razorpay label="Pay with Razorpay" :options="options" @success="onSuccess"/>
</template>
<script setup>
   import {Razorpay} from "razorpay-vue3";
   // Razorpay options follow link for more detail https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/build-integration/#12-integrate-with-checkout-on-client-side
   const 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
    "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": "[email protected]",
        "contact": "9000090000" //Provide the customer's phone number for better conversion rates
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
};

const onSuccess = (handlerResponse) => {
    console.log(handlerResponse);
    // post it to your server and capture the payment.
}
</script>

Support me

You can buy me coffee ☕️ https://www.buymeacoffee.com/mayankjhawar

Support me at Patreon https://patreon.com/mayank120

License

MIT