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
Register for a merchant account on Seerbit Merchant Dashboard to get started.
--> Login -> Settings menu -> API Keys menu -> Copy your public key
npm install --save seerbit-vue
yarn add seerbit-vue
Property | Type | Required | Default | Description |
---|---|---|---|---|
currency | string |
Optional | NGN | The currency for the transaction e.g NGN |
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 |
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",
}
<script type="text/javascript">
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");
},
},
};
</script>
<template>
<div class="container">
<seerbit
:amount="amount"
:email="email"
:publicKey="publicKey"
:tranref="tranref"
:onCallback="onCallback"
:onCloseCheckout="onCloseCheckout"
:planId="planId"
:customization="customization"
:pocketRef="pocketRef"
:callbackurl="callbackurl"
:tokenize="tokenize"
:description="description"
:productId="productId"
:currency="currency"
:mobileNo="mobileNo"
:buttonText="buttonText"
/>
</div>
</template>
<style>
.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;
}
</style>
MIT © seerbit