DEV Community

Cover image for Integrating Cryptocurrency as a Payment Option: Javascript
Omolade Ekpeni
Omolade Ekpeni

Posted on

Integrating Cryptocurrency as a Payment Option: Javascript

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.

Payment Process Flowchart

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: "example@gmail.com",
                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>
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text
Alt Text

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.

Top comments (1)

Collapse
 
busyboy11 profile image
Deanna C. Darling

Hi all!

Recently, more and more companies are starting to accept cryptocurrencies as a payment option. This is due to the fact that cryptocurrencies are becoming increasingly popular and convenient to use.

If you want to integrate cryptocurrencies as a payment option into your business, you need to use best crypto payment gateways.

Payment gateways are services that allow companies to accept cryptocurrencies as payment. They provide a wide range of features and services that make the process of accepting cryptocurrency payments easier and faster.

Here are some benefits of using them:

Security: Gateways use state-of-the-art security measures to protect user funds.
Convenience: They are easy to use and set up.
Scalability: payment systems allow you to scale your business as the number of clients grows.

I hope this information was useful to you.