razorpay-vue

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": "[e-mail]",
        "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": "[e-mail]",
        "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