https://github.com/seerbit/seerbit-vue
SeerBit VueJS Component for Vue 3.x
https://github.com/seerbit/seerbit-vue
Last synced: over 1 year ago
JSON representation
SeerBit VueJS Component for Vue 3.x
- Host: GitHub
- URL: https://github.com/seerbit/seerbit-vue
- Owner: seerbit
- License: mit
- Created: 2021-03-11T10:54:42.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-21T09:32:43.000Z (over 2 years ago)
- Last Synced: 2024-04-20T11:01:26.178Z (about 2 years ago)
- Language: Vue
- Homepage:
- Size: 345 KB
- Stars: 0
- Watchers: 1
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
SeerBit
# SeerBit Checkout Wrapper for VueJS
Seerbit Vue SDK can be used to integrate the SeerBit payment gateway into your Vue application.
This module was built and tested using VueJS 3.2.13
# Requirements
Register for a merchant account on [Seerbit Merchant Dashboard](https://dashboard.seerbitapi.com) to get started. \
--> Login -> Settings menu -> API Keys menu -> Copy your public key
## Install
```bash
npm install --save seerbit-vue
```
```bash
yarn add seerbit-vue
```
## Properties
| Property | Type | Required | Default | Description |
| :--- | :-- | :-- | :-- | :-- |
| currency | string | Optional | NGN | The currency for the transaction e.g NGN|
| email | string | Required | None | The email of the user to be charged |
mobileNo | string | Optional | None | The mobile number of the user to be charged |
| description | string | Optional | None | The transaction description which is optional |
| fullName | string | Optional | None | The full name of the user to be charged |
| country | string | Optional | "NG" | Transaction country which can be optional |
| tranref | string | Required | None | Set a unique transaction reference for every transaction |
| amount | string | Required | None | The transaction amount in naira |
| callbackUrl | string | Optional | None | This is the redirect url when transaction is successful |
| publicKey | string | Required | None | Your Public key or see **Requirements** above to get yours |
| closeOnSuccess | boolean | Optional | False | Close checkout when trasaction is successful |
| closePrompt | boolean | Optional | False | Close the checkout page if transaction is not initiated |
| setAmountByCustomer | boolean | Optional | False | Set to true if you want user to enter transaction amount |
| pocketRef | string | Optional | None | This is your pocket reference for vendors with pocket |
| vendorId | string | Optional | None | This is the vendorId of your business using pocket |
| tokenize | boolean | Optional | False | Tokenize card |
| planId | string | Optional | None | Subcription Plan ID |
| onCallback | Method | Optional | None | Callback method if transaction was successful |
| onCloseCheckout | Method | Optional | None | Callback method if transaction was cancelled |
| buttonText | String | Optional | Pay With SeerBit | Text to be displayed on launch button
| autoCheckout | boolean | Optional | false | Launch checkout automatically if true, or display a pay button if false
| customization | Object | Optional | None | Customization e.g below
```vue
customization: {
theme: {
border_color: "#000000",
background_color: "#004C64",
button_color: "#0084A0",
},
payment_method: ["card", "account", "transfer", "wallet", "ussd"],
display_fee: true,
logo: "logo_url | base64",
}
```
## Usage
```vue
import seerbit from "seerbit-vue";
export default {
components: {
seerbit,
},
data() {
return {
publicKey: "SBTESTPUBK_t4G16GCA1O51AV0Va3PPretaisXubSw1",
fullName: "John Doe",
email: "johndoe@mail.com",
mobileNo: "",
amount: "5.00",
planId: "",
description: "",
productId: "",
pocketRef: "",
tokenize: "",
currency: "NGN",
customization: {
theme: {
border_color: "#000000",
background_color: "#004C64",
button_color: "#0084A0",
},
payment_method: ["card", "account", "transfer", "wallet", "ussd"],
display_fee: true, // true
display_type: "embed", //inline
logo: "logo_url | base64",
},
callbackurl: "",
};
},
computed: {
tranref() {
return Date.now().toString();
},
},
methods: {
onCallback: function (response) {
console.log(response);
},
onCloseCheckout: function () {
console.log("checkout closed");
},
},
};
.seerbitButton {
align-self: center;
background-color: #000000;
color: #ffffff;
font-weight: 400;
cursor: pointer;
justify-content: center;
align-items: center;
border-radius: 10px;
font-size: 16px;
}
```
## License
MIT © [seerbit](https://github.com/seerbit)