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
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
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: "businessemail@gmail.com",
environment: "sandbox",
};
},
});
</script>
Accept Payment
The Bitnob Button uses the following props to generate a checkout for customer payment.
Field | Required | Default | Description |
---|---|---|---|
publicKey | ✅ | None | The public key generated from Bitnob |
amount | ✅ | None | The payment amount in the specified currency |
currency | ❌ | USD | The local currency of business |
reference | ✅ | None | A unique reference for the transaction |
customerEmail | ✅ | No | Customer email is used for transaction tracking and also to send transaction receipt |
notificationEmail | ❌ | Your business email on Bitnob | Business email used to receive transaction information and receipt |
callbackUrl | ❌ | None | Business callback URL to receive webhook events |
successUrl | ❌ | None | Business redirect URL for customers after successful payment |
environment | ❌ | sandbox | The 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 (opens in a new tab). 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 (opens in a new tab).
Change publicKeyand environment
data() { return { publicKey: "pk.livekeyxxxxx", email: "", amount: 0, currency:
"NGN", notificationEmail: "businessemail@gmail.com", environment: "production",
}; },