Would you like to start accepting cryptocurrency payments in your web application? This article explores how to achieve that using the Fluidcoins Widget.

Getting Started

We are going to use our public key for this demo. To get your public key, log in to your Fluidcoins Merchant Dashboard, then go to the Developer’s section.

While building your web application, it’s advisable to do so in Test mode. In Test mode, you can simulate payments, test, and break things.

Since you are building a client-side web application, it is important to note that the secret key won’t work for this purpose. As a result, the secret key should only be used on the server.

Project Setup

If you’re already familiar with Vue, you can move ahead to Installing Fluidcoins Pay SDK section. Vue is a Javascript library for building user interfaces.

You should begin by installing the Vue CLI via command line using YARN or NPM ( most popular nodejs package managers)

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Once installed, you can use the command line to create a new Vue project.

vue create fluidcoins-test

You will be given the list of predefined setups from which to pick. If you’re a beginner, we recommend going with the default. This will create a Vue project in your current directory with the folder fluidcoins-test.

In this demo, we would be creating a donation app to receive the donor’s email, name and amount.

Take a look at my App.vue

Installing Fluidcoins Pay SDK

<template>
  <div id="app">
    <form @submit.prevent="submit">
      <div class="form-control">
        <label class="form-label" for="email">Email Address</label>
        <input id="email" class="form-input" type="email" v-model="email" placeholder="email adddress" />
      </div>
      <div class="form-control">
        <label class="form-label" for="fullname">Full name</label>
        <input id="fullname" class="form-input" type="text" v-model="fullname" placeholder="john doe" />
      </div>
      <div class="form-control">
        <label class="form-label" for="amount">Amount (NGN)</label>
        <input id="amount" class="form-input" type="number" min="0" step="100" v-model="amount" placeholder="1000" />
      </div>
      <button class="form-button" type="submit">Click to Pay {{ amount }}</button>
    </form>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {},
  data() {
    return {
      amount: 0,
      fullname: '',
      email: ''
    }
  },
}
</script>

The Fluidcoins Pay SDK contains the Javascript library and the checkout. To add the package to your project ;

yarn add @fluidcoins/pay.js
# OR
npm i @fluidcoins/pay.js

Once installed, you should import the library into your App.vue

<script>
import FluidcoinsPay from '@fluidcoins/pay.js'

export default {
  name: 'App',
  components: {},
  data() {
    return {
      amount: 0,
      fullname: '',
      email: ''
    }
  },
}
</script>

Now that you have imported the library, you are ready to use it in our submit function.

Accepting Crypto Payments

The Fluidcoins Payment SDK has four (4) required parameters

• key – Remember the public key in the Developer’s section
• amount – The amount you want to charge the customer.
• email – The customer’s email address
• onSuccess – A function to be called after a successful payment.

The amount must be converted to the smallest denomination. This is done by multiplying the value from the user by 100. For example, 1000 NGN will be 100000 KOBO

Here is our submit function;

methods: {
    submit() {
      const  { amount, fullname, email, onSuccess} = this

      const config = {
        key: 'FLUIDCOINS_PUBLIC_KEY',
        amount: amount * 100,
        email: email,
        // if you have the user's name and you want to annotate it on the Fluidcoins Dashboard
        name: fullname, 
        onSuccess,
      }
      
      try {
        const fPay = new FluidcoinsPay(config)
        fPay.setup() // sets up the widget
        fPay.open() // opens the widget
      } catch (error) {
        console.log(error) // log any error from Fluidcoins Pay validations
      }
    },
    onSuccess(payload){
      console.log(payload)
    }
  }

Voila!! Your crypto payment integration is now complete. Let’s test that it works!

Build the project;

yarn serve
# OR
npm run serve

Open your browser to http://localhost:8080/ . Fill in your information and click on the ‘Click to Pay’ button.

Yay!!! You can see the Fluidcoins Checkout widget

There you go! You can now start receiving crypto payments.

Finally, the full code sample can be found in this repository and you can check out the live demo