@spot-flow/vue-spotflow-checkout
v0.0.16
Published
This **Spotflow Vue.js library** wraps around the [inline library](https://github.com/Spotflow-One/spotflow-checkout-inline), which enables users to make payments seamlessly. It integrates smoothly into your Vue.js application, providing a streamlined ch
Downloads
281
Readme
Spotflow Checkout Vue.Js
This Spotflow Vue.js library wraps around the inline library, which enables users to make payments seamlessly. It integrates smoothly into your Vue.js application, providing a streamlined checkout experience.
Available Features:
- Collections: Card, Bank Transfers, USSD
- Recurring payments: Tokenization and Subscriptions.
Table of Contents
Requirements
- Spoflow Encryption keys
- Spotflow API keys
- Node versions >= 16.x.x npm >=7.x.x
Demo
Installation
To install the library, you can use either Yarn or npm. Choose the one that fits your project setup:
Using Yarn
yarn add @spot-flow/vue-spotflow-checkout
Using NPM
npm install @spot-flow/vue-spotflow-checkout
Usage
payment-component.vue
<template>
<h1>Payment Component</h1>
<div>
<checkout
:amount="amount"
:currency="currency"
:email="email"
:merchantKey="merchantKey"
:encryptionKey="encryptionKey"
:planId="planId"
>
Make Payment
</checkout>
</div>
</template>
<script lang="ts">
import checkout from "@spot-flow/vue-spotflow-checkout";
import { defineComponent, ref } from "vue";
export default defineComponent({
components: {
checkout,
},
data() {
return {
amount: 4000, // Not required for subscription payment
currency: "NGN", // Not required for subscription payment
email: "[email protected]",
merchantKey: "sk_test_fXXXXedhXXXXXXXXXXXXXXXX",
encryptionKey: "SKKXXXXXXXXXXXXXXXXX",
planId: "9e0808304-344d-XXXXXXXXX-XXXXX834034" // Not required for a one time payment
};
},
});
</script>
Parameters
Read more about our parameters and how they can be used here.
| Parameter | Required |Description | | ------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | merchantKey | True | Your API Secret | | reference | False | Your transaction reference. This MUST be unique for every transaction | | amount | False | Amount to charge the customer. NB: this most likely comes from the plan details. This is not required for subscription payments. | | currency | False | Currency to charge in. Defaults to NGN. This is not required for subscription payments. | | encryptionKey | True | This is the encryption key for the merchant | | planId | True | This is the plan id being paid for. This is not required for one time payments | | firstname | False | This is the Customer's First Name | | lastname | False | This is the Customer's Last Name | | email | True | This is the Customer's Email Address | | regionId | False | This is the merchant's region where the customer is subscribed to | | phone | False | This is the phone number of the customer |
Contribution Guidelines
We welcome contributions from the community. Read more about our community contribution guidelines here.
License
By contributing to this library, you agree that your contributions will be licensed under its MIT license.
Copyright (c) Spotflow Inc.