Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aureatelabs/vsf-payment-razorpay
Razorpay Payment Extension for Vue Storefront - Integrated to accept online payment
https://github.com/aureatelabs/vsf-payment-razorpay
magento2 payment-methods pwa razorpay vsf-payment-razorpay vue-storefront vuejs
Last synced: 3 months ago
JSON representation
Razorpay Payment Extension for Vue Storefront - Integrated to accept online payment
- Host: GitHub
- URL: https://github.com/aureatelabs/vsf-payment-razorpay
- Owner: aureatelabs
- License: mit
- Created: 2019-07-16T06:21:53.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-10-09T09:21:24.000Z (about 5 years ago)
- Last Synced: 2024-05-22T17:33:56.211Z (6 months ago)
- Topics: magento2, payment-methods, pwa, razorpay, vsf-payment-razorpay, vue-storefront, vuejs
- Language: TypeScript
- Homepage:
- Size: 5.38 MB
- Stars: 16
- Watchers: 5
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-vuestorefront - Razorpay payment integration
README
# Razorpay Payment extension for Vue Storefront
[Razorpay](https://razorpay.com/) Payment extension for [vue-storefront](https://github.com/DivanteLtd/vue-storefront), by [Aureate Labs](https://aureatelabs.com)
Experience the Razorpay Payment demo [here](https://vue-storefront-demo.aureatelabs.com/)
## Installation
By hand (preferer):
```
git clone https://github.com/aureatelabs/vsf-payment-razorpay.git ./vue-storefront/src/modules/payment-razorpay
```
Add the following config to your `config/local.json` and configure the `razorpay.key` & `razorpay.keySecret` to point to your Razorpay credential details.
```
"razorpay" : {
"method_code": "razorpay",
"title": "Razorpay",
"endpoint": "http://localhost:8080/api/ext/payment-razorpay",
"api_url": "https://checkout.razorpay.com/v1/checkout.js",
"key": "{{RAZORPAY-KEY}}",
"keySecret": "{{RAZORPAY-KEY-SECRET}}",
"merchant": "Magento",
"theme": "#F37254",
"notes": {
"Title": "Description"
}
}
```
## Registration the Razorpay Payment extension
Add script import to `./src/modules/index.ts`
```
...
import { Razorpay } from './payment-razorpay'
export const registerModules: VueStorefrontModule[] = [
...,
Url,
Razorpay
]
```
## Customization
You can also customize the appearance of Razorpay elements using some of following config.
```
"razorpay" : {
"title": "Razorpay",
"merchant": "Magento",
"theme": "#F37254",
"notes": {
"Title": "Description"
}
}
```
# Razorpay Payment API extension
Install additional extension for `vue-storefront-api`:
```
$ cp -f ./API/payment-razorpay ../vue-storefront-api/src/api/extensions/
```
Add the following config to your `./vue-storefront-api/config/local.json` for Registration
```
"registeredExtensions": [
...
"mail-service",
"payment-razorpay"
],
```
Need to install razorpay extension dependency by running following command on root of `vue-storefront-api` directory
```
sudo npm i razorpay
sudo yarn install
```
Configure the `razorpay.key` & `razorpay.keySecret` to point to your Razorpay credentials details in `../vue-storefront-api/config/local.json`.
```
"extensions": {
...,
"razorpay": {
"key": "{{RAZORPAY-KEY}}",
"keySecret": "{{RAZORPAY-KEY-SECRET}}"
}
},
```
# Magento 2 integration
Make sure [Razorpay](https://github.com/razorpay/razorpay-magento) Magento 2 extension should be configured properly at Magento instance.
After Installation, Go to `vendor/razorpay/magento/Model/PaymentMethod.php` file and replace line no. 228 with below:
```
'razorpay_order_id' => $request['paymentMethod']['additional_data']['rzp_order_id'] ?? $this->order->getOrderId(),
```
# License
This project is licensed under the [MIT License](https://github.com/aureatelabs/vsf-payment-razorpay/blob/master/LICENSE.txt)