seerbit-vue

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: "[e-mail]",
      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