Pablo Ferradás
April 27, 2023

How to use the Vottun TPV to offer a crypto payment gateway in your website

The rapid evolution of Crypto and Defi has raised the interest of many website and online shop owners, as they recognize the potential for implementing crypto payments as a new payment option for their customers. In this tutorial, you will learn how to use the Vottun TPV to integrate crypto payments in your website.

Prerequisites

Before you start developing, you need to have the following:

Ethereum wallet (e.g., Metamask)
Vottun API credentials

These are the steps you need to follow in order to implement a functional crypto TPV using our solution:

Creating the payment
Redirecting the user to the Vottun TPV
Finishing the payment and navigating back to the website

How to get my credentials

Getting credentials is very easy. You have the option to get a 30 days trial at the URL https://apis.vottun.tech/trial. Fill in the form and you will receive an email like the one below with your credentials ready to use. In addition to the credentials, you also will receive the public key of a wallet that you can use in your tests (for security reasons, the private key is always kept on our servers). This email will provide you with the JWT token (used as Bearer Authentication) and the Application ID, which is passed in another header. The detailed explanation of this configuration is explained further. You will find more information about APIs at https://developers.vottun.tech.

Step 1: Creating the payment

Before redirecting the user to the TPV, the payment “intent” has to be created. This is achieved with a POST call to our API, which returns a hash that is used to identify the payment later on. The body passed in this POST call has the following attributes:

productName: The name of the product (will be displayed in the TPV)
productDescription: The description of the product (will be displayed in the TPV)
productUrl: A url that points to the image of the product (will be displayed in the TPV)
fiat_amount: The price of the product which the user is paying for (in fiat)
currency: The fiat currency that will be used for the crypto conversion

The API call we need to make to the Vottun API in order to create the payment is:

By sending it, we will receive something like this:

Step 2: Redirecting the user to the Vottun TPV

Once we have created the payment successfully, we can redirect the user to the Vottun TPV in order to perform the crypto payment. The URL where the user must be redirected is: https://tpv.vottun.tech/?h=<paymentToken>&r=<redirect_url> Which contains two query params:

h: The hash that identifies the payment, obtained in the previous step.
r: The redirect URL, where the user will be redirected back once the payment is completed.

The website of the Vottun TPV where the user is sent to looks like this:

The product information is displayed, including the fiat price and the currency of the payment. There are also two buttons that let the user choose the desired crypto for the payment, which display the conversion to the corresponding price in crypto.

If the user clicks the “Atrás” button, the process will be cancelled and he will be sent to the previous page. If the payment wants to be performed again, the process must be restarted from the beginning.

If, instead, the user clicks the “Pagar” button, the Metamask wallet extension will pop up: first, asking the user to connect its wallet; then, switching its network to the selected one and finally creating the blockchain transaction for the payment. Once the user completes the payment in Metamask, a confirmation page appears for the user:

From this page, the user can now click the “Hecho” button and will be redirected back to the original website.

CONCLUSIONS

In this tutorial, you have learned how to use the Vottun TPV to integrate crypto payments into your website. You now know how to implement an easy way to offer a crypto-payments gateway to your customers and take advantage of the potential benefits of this new emerging technology. Implementing a crypto payments gateway in your website not only offers a more convenient and secure payment option for your customers, but also allows you to tap into the growing market of crypto users, giving you a competitive edge and potentially boosting your revenue.

In future articles we will go deeper into the use of this TPV, with real use cases of its implementation in tools like WordPress or Shopify.