⚡️Razorpay vue - npm package
Tags: npm, vue, razorpay, paymentgateway
Published: 2023-05-21 00:28:51

# RazorPay ⚡️ + Vue 3

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

[Web Integration by Razorpay](https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/)

## Install 
```javascript
npm install razorpay-vue
```

## Live Demo
Check out the [live demo](https://codesandbox.io/p/sandbox/happy-dewdney-nkbsfw) 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

```javascript
<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

```javascript
<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