Direct widget integration
This guide contains steps to integrate the Payfura widget in your website/app
Steps
- Get an API key by contacting us. Our contact info is mentioned here
- Place the widget
<iframe
src="https://exchange.payfura.com?apiKey={PARTNER_API_KEY}"
width="50%"
loading="lazy"
allow="camera; accelerometer; autoplay; ; gyroscope; payment"
frameborder="0"
height="100%">
Your browser does not support iframes.
</iframe>
We are also working on a partner dashboard where partners would be able to see all orders placed through their platform.
Ways to customise widget
The widget is customisable in a lot of ways.
The customisation options can be passed as query params with the widget link in src
tag of iframe. For eg. below example will always open up the widget with default selected fiat currency as US dollars and cryptocurrency as Bitcoin.
<iframe
src="https://exchange.payfura.com?apiKey={PARTNER_API_KEY}"
width="50%"
loading="lazy"
allow="camera; accelerometer; autoplay; ; gyroscope; payment"
frameborder="0"
height="100%">
Your browser does not support iframes.
</iframe>
More query params to customise widget
Following list contains all the possible query params that can be used to customise the widget.
API key unique to each partner.
Sample: apiKey=5b3b5af4-c9cd-4fc3-88b9-ec6aca28d6f2
Default selected crypto currency to show when widget loads
Sample: to=btc
Default selected fiat currency to show when widget loads
Sample: from=gbp
Default amount of fiat currency to show when widget loads
Sample: amt=1000
Comma separated values of wallet addresses in case you want to prefill wallet address when user tries to buy crypto
Sample: walletAddress=btc:0x43rwerlknwenrlekwnrewlnkr,eth:0x34kwmrkwernjnrs4k435kmk4432glfd
. In this case, whenever the selected currencies in the widget are btc
or eth
the provided wallet address would prefill in the wallet address field in the transaction flow.
Hexcode of color theme for sdk. Like button color etc.
Sample: primaryColor=4a88ce
cl
stands for crypto list. Comma separated list of crypto currencies if you only want to show a subset of available cryptocurrencies.
Sample: cl=btc,eth
Defaults to empty in which case we show all currencies
This param is used for masking all other params in the form of a JWT token
For more details check out here
To enforce only buy option in the widget, this key can used
Only possible value possible for it at the moment is buy
Sample: mode=buy
This will hide the sell tab and only show the buy tab on the main page of the widget when it loads
Defaults to empty in which case we show both buy & sell tab
Disables the dropdown for crypto change
Disables the dropdown for fiat change
Disables the textbox for changing fiat amount
Disabled the textbox for changing wallet address
The walletAddress
param mentioned above should be used in this case to set the wallet address for the user
How to sign query params in URL (Optional)
Payfura provides the ability to mask the query params if you don’t want your users to see or edit the query params.
This can be done by following the below process:
- Contact Payfura team to generate a JWT secret key for you.
- Form a JSON for your query params and sign that payload with JWT using your secret key.
- Pass on the generated token into the query param
q
while calling the widget. Eg. https://exchange.payfura.com?q=SIGNED_JWT_TOKEN
Sample code to generate the JWT token for masking query params.
const jwt = require("jsonwebtoken");
function encodeQueryParams(params) {
try {
const token = jwt.sign(params, JWT_SECRET_KEY), {
expiresIn: EXPIRY_TIME
});
return token;
} catch (e) {
console.error(`Error in encoding query params ${e}`);
}
}
// Now simply get the encoded params by calling encodeQueryParams
encodeQueryParams({"to": "btc", "mode": "buy"});