Integrating Cryptocurrency as a Payment Option: HTML

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. Nwachukwu Kingsley 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.