Using the Vue Payment Button

You can accept Bitcoin and Lightning payments via Bitnob on any Vue app.

To get started you have to have a Bitnob Business account. We will be using the public key we will generate for you.

Project Setup

If you are familiar with Vue, you can skip this stage and start from the bitnob package installation

vue create project_name

The terminal would show you a couple of preset configurations, for this tutorial, it’s recommended to choose the Vue 2 default. This would create a sample project with the project_name in the current directory.

Setting up the App.vue Component

For this guide, we will use a form that takes in an email and amount in the business-specified currency, for this case, NGN.

App.vue

<template>
  <div id="app" class="container">
    <section>
      <h1>Pay with Bitnob</h1>
      <div class="form-container">
        <hr />
        <div>
          <div class="input-div">
            <label for="email"><b>Email</b></label>
            <input
              type="text"
              placeholder="Enter Email"
              name="email"
              id="email"
              required
            />
          </div>
          <div class="input-div">
            <label for="amount"><b>Amount</b></label>
            <input
              type="number"
              placeholder="Enter amount in Naira"
              name="amount"
              id="amount"
              required
            />
          </div>
       </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "App",
  components: {
    Bitnob,
  },
  data() {
    return {
      publicKey: "xxxxxxxx",
      email: "",
      amount: 0,
      currency: "NGN",
      notificationEmail: "[email protected]",
      environment: "sandbox",
    };
  },
});
</script>

Bitnob Installation

The vue-bitnob is the Bitnob official Vue package that allows vendors and company receive payments on their Vue website. It gives access to the inline checkout that is easily set up using props.

Using npm

npm isntall vue-bitnob --save

Using yarn

yarn add vue-bitnob --save

To start using, add the package into the script.

<script lang="ts">
import Vue from "vue";

import { Bitnob } from "vue-bitnob";

export default Vue.extend({
  name: "App",
  components: {
    Bitnob,
  },
  data() {
    return {
      publicKey: "pk.xxxxxxxx",
      email: "",
      amount: 0,
      currency: "NGN",
      notificationEmail: "[email protected]",
      environment: "sandbox",
    };
  },
});
</script>

Accept Payment

The Bitnob Button uses the following props to generate a checkout for customer payment.

FieldRequiredDefaultDescription
publicKeyNoneThe payment amount in the specified currency
amountNoneThe payment amount in the specified currency
currencyUSDThe local currency of business
referenceNoneA unique reference for the transaction
customerEmailNoCustomer email is used for transaction tracking and also to send transaction receipt
notificationEmailYour business email on BitnobBusiness email used to receive transaction information and receipt
callbackUrlNoneBusiness callback URL to receive webhook events
successUrlNoneBusiness redirect URL for customers after successful payment
environmentsandboxThe current environment you're running. Remember to switch to production when going live
<bitnob
    :amount="amount"
    :currency="currency"
    :customerEmail="email"
    :publicKey="publicKey"
    :reference="reference"
    :environment="environment"
    :notificationEmail="notificationEmail"
  >
    Make Payment With Bitcoin
  </bitnob>

📘

Using Environment and PublicKey Props

The public key used should match the environment been used. sandbox should be used for a publickey gotten from; https://sandboxapp.bitnob.co/settings/api-webhooks. Also change to production when going live.

For a unique reference, you can use;

computed: {
  reference() {
    let text = "";
    let possible =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (let i = 0; i < 10; i++)
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
  },
}

Going Live

After you are done testing and you're ready to go live, there are two steps to take;

Getting live keys

Sign up on the production platform.

Change publicKeyand environment

data() {
    return {
      publicKey: "pk.livekeyxxxxx",
      email: "",
      amount: 0,
      currency: "NGN",
      notificationEmail: "[email protected]",
      environment: "production",
    };
  },