Nowadays, the development of cryptocurrency technologies allows for the swift and simple integration of payment options with crypto. This article will go through simple steps for adding a SMARTy Pay payment button on your website.
To follow this article you will need to install the MetaMask extension for your browser of choice.
Log in and follow the quick onboarding flow
1. Navigate to Login/Sign-up.
2. SMARTy Pay uses your web3 wallet for authentication so just connect a wallet and press the ”Login” button.
3. Next, you will need to fill in your company’s name and remember the Seed phrase that you will use to withdraw funds later on.
4. At the next step, you will need to select a blockchain network that will be used to accept payments and add a separate wallet from which a commission will be charged for transactions on the particular network.
The commission for one blockchain payment operation is usually $0.05 — $0.1 (depending on the network load). SMARTy Pay implements a mechanism for paying commissions through a dedicated merchant gas wallet. This makes it easier for customers of your e-commerce who do not need to get involved in such hassles.
5. Finally, select the crypto tokens you would like to accept as payment.
After completing this step you will be redirected to Merchant Admin Panel, where you will be able to fine-tune your merchant account.
Configure a gas wallet and create an API Key
Before going live and accepting real payments SMARTy Pay allows you to try out the integration in a test environment (using a test network of a particular blockchain). You can switch between main and test networks using a switch button in the header at any time.
The gas wallet configuration process is the same regardless of the network type.
1. Navigate to the “Settings” section on the left menu.
2. On the “Gas Wallets” block you should see wallets you had configured during the onboarding process.
3. Copy the blockchain address of the wallet for a particular network and transfer a small amount (0.2 minimum) of native tokens into it (BNB in this case). These tokens will be used for gas compensation for payment transactions from your customers.
3. Generate an API key for interaction with SMARTy Pay APIs. The secret part of the key will be shown only once so make sure you copied it to a safe place.
Install the payment button on your website
Congratulations! You have successfully set up your merchant account, and the final step is to add a payment button to your website
1. Copy the API key created in the previous step (hereinafter known as YOUR_API_KEY)
2. Place the HTML code of the payment button on your site, specifying your API key in the parameters (the YOUR _API_KEY from the previous step).
<form action="https://api.smartypay.io/checkout" method="POST" target= "_blank">
<input type="hidden" name="api-key" value= "YOUR_API_KEY">
<input type="hidden" name="token" value="bUSDT">
<input type="hidden" name="amount" value="1.5">
<input type="hidden" name="lang" value= "en">
<input type="image" src="https://checkout.smartypay.io/checkout-button-light.svg" border="0" name="submit" alt="SMARTy Pay" >
Let us go over the parameters of this form:
api-key — the api key you created in the previous step
token — The code name of the crypto payment token (bUSDT — the USDT token on the Binance network Smart chain).
You can find a list of all token codes in our documentation.
amount — The amount of payment in the given token (i.e. 1.5 USDT in the example)
lang — Interface language (en, es)
image — The image of the payment button.
There are currently 2 image options available:
<input type=“image” src=“https://checkout.smartypay.io/checkout-button-light.svg“ border=“0” name=“submit” alt=“SMARTy Pay“ >
<input type=“image” src=“https://checkout.smartypay.io/checkout-button-dark.svg“ border=“0” name=“submit” alt=“SMARTy Pay“ >
In this article, we have covered the simple steps for integration of the SMARTy Pay button which allows you to accept payments in crypto.
Thanks for your time and happy integration.
You can always find more information in the SMARTy Pay documentation section at https://docs.smartypay.io/