Skip to content

Latest commit

 

History

History
159 lines (146 loc) · 5.19 KB

README.md

File metadata and controls

159 lines (146 loc) · 5.19 KB
Raw

VueJS 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 to get started.
--> Login -> Settings menu -> API Keys menu -> Copy your public key

Install

npm install --save seerbit-vue
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 
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

<script type="text/javascript">
import seerbit from "seerbit-vue";
export default {
  components: {
    seerbit,
  },
  data() {
    return {
      publicKey: "SBTESTPUBK_t4G16GCA1O51AV0Va3PPretaisXubSw1",
      fullName: "John Doe",
      email: "[email protected]",
      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>

License

MIT © seerbit