paylode-vue v1.0.3

SeerBit Checkout Wrapper for VueJS

Requirements

This module was built and tested using VueJS 2.6.7

Get Started

A simple way to add Paylode to your VueJS application

Install

npm install --save paylode-vuejs

yarn add paylode-vuejs

Usage

<template>
    <div class="container">
            <seerbit
                    :amount="amount"
                    :email="email"
                    :publicKey="publicKey"
                    :reference="reference"
                    :onCallback="onCallback"
                    :onCloseCheckout="onCloseCheckout"
                    :autoCheckout="false"
            >
            Checkout with SeerBit
            </seerbit>
    </div>
</template>

<script type="text/javascript">
    import seerbit from 'seerbit-vuejs';
    export default {
    components: {
        seerbit
    },
    data(){
        return{
          publicKey: "SBTESTPUBK_XeKUDcFUGw1kmEfanjgp0iLviCseMX2N",
          fullName: "John Doe",
          email: "johndoe@mail.com",
          amount: "200000.00"
        }
    },
    computed: {
        reference(){
        return Date.now().toString();
      }
    },
    methods: {
        onCallback: function(response){
        console.log(response)
      },
        onCloseCheckout: function(){
          console.log("checkout closed")
      }
    },

    }
</script>
<style>
    .container {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .SeerBitCheckoutButton{
        background-color: #263a81;
        color: #ffffff;
        border: 0 transparent;
        width: 250px;
        height: 50px;
        font-weight: 800;
        cursor: pointer;
    }
</style>

Please checkout Seerbit Documentation for other available options you can add to the tag

License

MIT © seerbit