Integrating Cryptocurrency as a Payment Option: Javascript

Integrating Cryptocurrency as a Payment Option in your website (2 Part Series)

Considering the extent to which cryptocurrency as a medium of payment has evolved, Soon enough your employers will start requesting to integrate multi-currency as a payment option in their platforms or they already did 😏. In this article, @tkings and I will be sharing a great solution that works for implementing cryptocurrency payment on javascript.

The diagram above shows the flow of how the implementation will serve the merchant and customer . The steps are outlined in the previous article.

Implementation

CoinForBarter gives developers a seamless experience, and they support 11 currencies across multiple chains for customers. To proceed, you will need to sign up with them and generate an API KEY from CoinForBarter. CoinForBarter like Flutterwave or Stripe provides an implementation method for JavaScript.

An example of how you can implement cryptocurrency in your javascript is below:

<form>
<script src="https://checkout.coinforbarter.com/v1/script.js"></script>
<button type="button" onClick="makePayment()">Pay Now</button>
</form>
<script>
        function makePayment() {
            CoinForBarterCheckout({
                publicKey: "xxxxxxxxxxxxxxxxxxxxxxx",
                txRef: "RX1",
                amount: 10,
                currency: "BTC",
                redirectUrl: "http://example.com",
                currencies: [], //accept all currencies if you leave it empty
                meta: {
                    consumer_id: 23,
                },
                customer: "[email protected]",
                customerPhoneNumber: "+234xxxxxx",
                customerFullName: "John Doe",
                customizations: {
                    title: "My store",
                    description: "Payment for items in cart",
                    logo: "https://assets.example.com/logo.png",
                },
                onError: (data) => {
                    console.log(data);
                    alert(data.message)
                },
                onSuccess: (data) => {
                    console.log(data);
                }
            });
        }
    </script>

This is an example implementation for php.

Input Names and Description

• publicKey: You can get your publicKey from your CoinForBarter dashboard. It helps identify your transaction.

• customer: The email address of the customer to make that payment.

• customerPhoneNumber: This is the phone number of the customer. It is an optional field.

• customerFullName: This is the full name of the customer. It is an optional field.

• txRef: This is a random string to help you remember this transaction.

• amount: The amount to charge your customer.

• currency: The currency that you have set the amount in.

• customizations: An object to display the title and description to be displayed on the payment page.

• redirectUrl: A url to redirect the customer to when the transaction ends. This is optional.

• currencies: You can have multiple of these fields. It will be a list of the currencies you want to accept for this transaction. It is optional, and if left empty, the customer will pay in any supported currency.

• onError: A function to handle the data sent back if transactions fails or is cancelled. If provided, it overrides the redirectUrl.

• onSuccess : A function to handle the data sent back if transactions is successful. If provided, it overrides the redirectUrl.

Having inserted a user's public key (Tochukwu's) into the above JavaScript code, the 'Pay Now' button leads to this screen below on your website.

CoinForBarter has a long list of supported currencies and helps you get settled in your local bank account automatically. The list of supported currencies can be viewed in the note section of the previous article.
In this article, we learnt how to integrate cryptocurrency as a payment option with Javascript. @tkings and I wrote it. In the future, we will be writing on implementing it using React, React Native and API. We will appreciate your comments, and if you have any questions, do not hesitate to hit either Kingsley or me up on Twitter.