DEV Community: Omolade Ekpeni

Integrating Cryptocurrency as a Payment Option with API

Omolade Ekpeni — Sat, 16 Oct 2021 17:13:00 +0000

Continuous evolvement of cryptocurrency as a means of payment drives the need for multicurrency payment options on payment gateways. In this article, @tkings and I will be sharing a great solution that works for implementing cryptocurrency payment with API.

An example of how you can implement cryptocurrency in your project using CoinForBarter is below:

Sending an API post request to https://api.coinforbarter.com/v1/payments with the required payload will generate a payment object that you can work with.

Example in javascript using axios is shown below

/**
*
 * @returns a CoinForBarter payment object
 */
const createPaymentObject = async () => {
  try {
    const url = "https://api.coinforbarter.com/v1/payments";
    const requestPayload = {
      txRef: "RX1",
      amount: 10,
      currency: "BTC",
      currencies: [],
      meta: {
        consumer_id: 23,
      },
      customer: "example@gmail.com",
      customerPhoneNumber: "+234xxxxxx",
      customerFullName: "John Doe",
    };
    const secretKey = "xxxxxxxxxxxxxxxxxxx";
    const headers = {
      Authorization: `Bearer ${secretKey}`,
    };
    const { data } = await axios.post(url, requestPayload, { headers });
    return data;
  } catch (error) {
    // console.log(error)
  }
};

You will receive a response like below

{
    "status": "success",
    "data": {
        "payment": {
            "id": "613a1067500d0f0020adf882",
            "_id": "613a1067500d0f0020adf882",
            "status": "in progress",
            "description": "Payment from Dayne_OKon@gmail.com",
            "txRef": "hrgyuur743784",
            "redirectUrl": "",
            "amount": 0,
            "nairaValue": 0,
            "dollarValue": 0,
            "baseAmount": 0.01,
            "baseCurrency": "BTC",
            "currencies": [
                "BTC",
                "DOGE",
                "ETH",
                "USDT",
                "USDC",
                "BUSD",
                "DAI",
                "PAX",
                "BCH",
                "WBTC"
            ],
            "expiresBy": 0,
            "transactionFees": 0,
            "totalDue": 0,
            "customer": "Dayne_OKon@gmail.com",
            "customerDetails": {
                "email": "Dayne_OKon@gmail.com",
                "fullName": ""
            },
            "addressSentFrom": [],
            "transactionTimeLog": [
                {
                    "time": "2021–09–09T13: 47: 19.098Z",
                    "type": "event",
                    "event": "Started transaction"
                }
            ],
            "isCurrencyLocked": false,
            "createdAt": "2021–09–09T13: 47: 19.100Z"
        },
        "url": "https: //coinforbarter-checkout.herokuapp.com/v1/api-pay/6109aa97-ad5bab00–1b913f89–613a1067–500d0f00–20adf882"
    },
    "message": "payment created"
}

There are two modes in which this payment object can be used to process a full payment,
• CoinForBarter hosted.
• Self hosted.

CoinForBarter Hosted

You can simply redirect your customer to the data.url field to complete the payment. This is referred to as the CoinForBarter Standard. You can read more from the CoinForBarter Standard Documentation.

It will open a payment gateway like below for the customer to complete the payment.

You can provide a redirectUrl to the request payload to redirect the customer to that url when the payment ends.
You can also provide a webhook as seen here.

Self Hosted

For the self hosted, you can have your own interface shown to the customer all through the payment process.

The payment process has the following cycle.

Select currency and network
Lock currency
Get address and amount the customer is to pay with from selected currency.

An example is shown below using Javascript axios

/**
 *
 * @param {string} paymentId the payment id gotten from data.id
 * @param {string} currency the selected currency to process the payment in eg BTC
 * @param {string} network the selected blockchain network of the currency eg. BEP20
 * @returns an updated payment object containing extra information based on selected currency and network
 */
const setCurrency = async (paymentId, currency, network) => {
  try {
    const url = `https://api.coinforbarter.com/v1/payments/${paymentId}/currency/set/${currency}/${network}`;
    const secretKey = "xxxxxxxxxxxxxxxxxxx";
    const headers = {
      Authorization: `Bearer ${secretKey}`,
    };
    const { data } = await axios.patch(url, {}, { headers });
    return data;
  } catch (error) {
    // console.log(error)
  }
};

A list of supported currencies and their networks to choose from can be found here.

After selecting a currency, the returned payload will look like below

{
    "status": "success",
    "data": {
        "id": "60d461fe6410f43ce05be378",
        "status": "in progress",
        "description": "Payment from Jody_Wolff21@hotmail.com",
        "txRef": "hrgyuur743784",
        "fee": 0.00030047,
        "currency": "BTC",
        "currencyNetwork": "bitcoin",
        "amount": 0.01030047,
        "baseAmount": 0.01,
        "baseCurrency": "BTC",
        "currencies": [],
        "transactionFees": 0,
        "totalDue": 0,
        "customer": "Jody_Wolff21@hotmail.com",
        "customerDetails": {
            "email": "Jody_Wolff21@hotmail.com"
        },
        "addressInformation": {
            "address": "19xqUGJ5Keo1LjDfatShxfHcKQT6HV24x3",
            "network": "bitcoin",
            "id": "60c7ca61ef2a380a447ed864"
        },
        "addressSentFrom": [],
        "transactionTimeLog": [
            {
                "time": "2021–06–24T10:44:14.787Z",
                "type": "event",
                "event": "Started transaction"
            },
            {
                "time": "2021–06–24T10:44:54.905Z",
                "type": "event",
                "event": "set currency to BTC, bitcoin"
            },
            {
                "time": "2021–06–24T10:45:40.482Z",
                "type": "event",
                "event": "locked currency"
            }
        ],
        "isCurrencyLocked": true,
        "createdAt": "2021–06–24T10:44:14.788Z"
    },
    "message": "currency locked"
}

The object above contains data.currency and data.currencyNetwork. This confirms that a currency has been selected.
data.amount is the amount to be paid now in the selected currency.

The next step will be to confirm that the transaction is to be made in our selected currency.

An example is below

/**
 *
 * @param {string} paymentId paymentId the payment id gotten from data.id
 * @returns an updated payment object containing extra information based on the locked currency and network
 */
const lockCurrency = async (paymentId) => {
  try {
    const url = `https://api.coinforbarter.com/v1/payments/${paymentId}/currency/lock`;
    const secretKey = "xxxxxxxxxxxxxxxxxxx";
    const headers = {
      Authorization: `Bearer ${secretKey}`,
    };
    const { data } = await axios.patch(url, {}, { headers });
    return data;
  } catch (error) {
    // console.log(error)
  }
};

The data returned above is similar to this

 {
    "status": "success",
    "data": {
        "id": "60d461fe6410f43ce05be378",
        "status": "in progress",
        "description": "Payment from Jody_Wolff21@hotmail.com",
        "txRef": "hrgyuur743784",
        "fee": 0.00030047,
        "currency": "BTC",
        "currencyNetwork": "bitcoin",
        "amount": 0.01030047,
        "baseAmount": 0.01,
        "baseCurrency": "BTC",
        "currencies": [],
        "transactionFees": 0,
        "totalDue": 0,
        "customer": "Jody_Wolff21@hotmail.com",
        "customerDetails": {
            "email": "Jody_Wolff21@hotmail.com"
        },
        "addressInformation": {
            "address": "19xqUGJ5Keo1LjDfatShxfHcKQT6HV24x3",
            "network": "bitcoin",
            "id": "60c7ca61ef2a380a447ed864"
        },
        "addressSentFrom": [],
        "transactionTimeLog": [
            {
                "time": "2021–06–24T10: 44: 14.787Z",
                "type": "event",
                "event": "Started transaction"
            },
            {
                "time": "2021–06–24T10: 44: 54.905Z",
                "type": "event",
                "event": "set currency to BTC, bitcoin"
            },
            {
                "time": "2021–06–24T10: 45: 40.482Z",
                "type": "event",
                "event": "locked currency"
            }
        ],
        "isCurrencyLocked": false,
        "createdAt": "2021–06–24T10: 44: 14.788Z"
    },
    "message": "currency locked"
}

The object above contains data.isCurrencyLocked This confirms that the transaction has been locked for the selected currency.
data.addressInformation shows the address and network the amount is to be sent to.

The final step is to get notified and verify when a payment has been received.

You can use the CoinForBarter Webhooks to get notified.

Then verify the transaction by checking the data.amountReceived to be equal to data.amount with the following endpoint.

/**
 *
 * @param {string} paymentId paymentId paymentId the payment id gotten from data.id
 * @returns the present state of the payment object
 */
const verifyPayment = async (paymentId) => {
  try {
    const url = `https://api.coinforbarter.com/v1/payments/${paymentId}`;
    const secretKey = "xxxxxxxxxxxxxxxxxxx";
    const headers = {
      Authorization: `Bearer ${secretKey}`,
    };
    const { data } = await axios.patch(url, {}, { headers });
    return data;
  } catch (error) {
    // console.log(error)
  }
};

You can get your secret key on your CoinForBarter's dashboard.

You can also use the data.status to be success if payment was successful, error if payment failed, inProgress if payment is in progress or cancelled if payment was cancelled.

In this article, we learnt how to integrate cryptocurrency as a payment option with APIs. @tkings and I wrote it. We previously wrote about how to implement cryptocurrency as a means of payment using html and javascript. In the future, we will be writing on implementing it using React and React Native. We will appreciate your comments, and if you have any questions, do not hesitate to hit either Kingsley or me up on Twitter.

Integrating Cryptocurrency as a Payment Option: Javascript

Omolade Ekpeni — Tue, 05 Oct 2021 20:52:32 +0000

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: "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>

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.

Integrating Cryptocurrency as a Payment Option: HTML

Omolade Ekpeni — Wed, 29 Sep 2021 16:48:01 +0000

Developers face a new challenge when matching the growing demand to learn the skills needed to meet their clients demand by integrating cryptocurrency as a means of payment into the platform of businesses. Without further ado, let's dive into how you can integrate this payment option for your client.

The following are the basic steps showing how the process works.

Step 1: A customer places their order and then presses the Submit or Checkout button, or its equivalent button, on your website.

Step 2: Once this happens, the website or the e-commerce platform takes the customer to a payment gateway to enter all the relevant information needed for the transaction.
The payment gateway then takes the user directly to the page to make a secured payment.

Step 3: Once the payment gateway gets a new transaction, the payment gateway sends a message to the merchant accordingly.

Step 4: The payment gateway settles the money with the merchant.

Once this process completes, the customer gets a confirmation message of the order they placed.

Integration Process

We will be using CoinForBarter for this tutorial, 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. You can integrate CoinForBarter in a bare HTML file.

An example of how you can implement the HTML is below(of course, yours should look better 😉):

<form method="POST" action="https://checkout.coinforbarter.com/v1">
<input type="hidden" name="publicKey" value="xxxxxxxxxxxxxxxxxxxxxxxxxx" />
<input type="hidden" name="customer" value="jessepinkman@walterwhite.org" />
<input type="hidden" name="customerPhoneNumber" value="0900192039940" />
<input type="hidden" name="customerFullName" value="Jesse Pinkman" />
<input type="hidden" name="txRef" value="bitethtx-019203" />
<input type="hidden" name="amount" value="3400" />
<input type="hidden" name="currency" value="DOGE" />
<input type="hidden" name="currencies[]" value="BTC" />
<input type="hidden" name="currencies[]" value="DOGE" />
<input type="hidden" name="customizations[title]" value="Miss TryPad" />
<input type="hidden" name="customizations[description]" value="Buy try pads" />
<input type="hidden" name="redirectUrl" value="https://example.com/" />
<button type="submit">CoinForBarter CHECKOUT</button>
</form>

see this to fully customize the html checkout button

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[title]: The title you will prefer to show on the payment page. This is an optional field.

• customizations[description]: The description you will prefer to show on the payment page. This is optional.

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

Having inserted a user's public key (Tochukwu's) with the above HTML code, the 'CoinForBarter CHECKOUT' button leads to the page below.

NOTE

• CoinForBarter helps you get settled in your local bank account automatically. Click here to set that.

• This is a list of supported currencies - BTC, DOGE, ETH, USDT, USDC, BUSD, DAI, PAX, BCH, WBTC.

• This is a list of currencies you can set in for the currency field above - USD, NGN, BTC, DOGE, ETH, USDT, USDC, BUSD, DAI, PAX, BCH, WBTC. NGN is only available in Nigeria.

In this article, we learnt how to integrate cryptocurrency as a payment option with HTML. @tkings and I wrote it. In the future, we will be writing on implementing it using JavaScript, 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.