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