RazorPay ⚡️ + Vue 3
It's client side package for rendering Razorpay Component for vue app.
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": "gaurav.kumar@example.com",
"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": "gaurav.kumar@example.com",
"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>
Checkout us on Product hunt
https://www.producthunt.com/posts/razorpay-vue
Support me
You can buy me coffee ☕️
https://www.buymeacoffee.com/mayankjhawar
Support me at Patreon
https://patreon.com/mayank120
Top comments (0)