Documentation
Using the Vue Payment Button

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.

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

shell
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.

<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: "businessemail@gmail.com",
      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

shell
 
npm isntall vue-bitnob --save

Using yarn

shell
 
yarn add vue-bitnob --save

To start using, add the package into the script.

App.vue
<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: "businessemail@gmail.com",
      environment: "sandbox",
    };
  },
});
</script>

Accept Payment

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

FieldRequiredDefaultDescription
publicKeyNoneThe public key generated from Bitnob
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
Text

<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 (opens in a new tab). Also change to production when going live.

For a unique reference, you can use;

Text

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 (opens in a new tab).

Change publicKeyand environment

App.vue
data() { return { publicKey: "pk.livekeyxxxxx", email: "", amount: 0, currency:
"NGN", notificationEmail: "businessemail@gmail.com", environment: "production",
}; },