Embedding Banxa On and Off Ramps
The Referral Link (URL parametization) allows you to link customers out to Banxa checkout without the need to make API calls. You can implement this simply by directing the customer to a blank order form, or by sending through parameters needed to populate the Banxa order form. Your customer will be directed to the Banxa order which will be pre-filled with any parameters that were passed through.
Implementation
You can implement this by directing the customer to a blank order form with the base URL, or by constructing a URL that contains the parameters needed to populate the Banxa order form. Your customer will be directed to the Banxa order form which will be pre-filled with any parameters that were contained in the URL.
There are two UI approaches available for directing the customer to the Banxa checkout flow, a redirect to a new tab, or an iFrame.
➡️ Redirect to a new tab
This will redirect the customer to the Banxa checkout flow in another tab to complete their order. The customer’s order page will be pre-filled with the order details that have been passed through to Banxa via the referral URL.
Example of a redirect URL
https://buy.banxa.com/?coinType=ETH&fiatType=USD&fiatAmount=500&blockchain=ETH
🗔 iFrame embedded directly into your application
This will host the Banxa site in an iFrame and allow customers to complete the checkout process within this iFrame. The same URL can be used as in above example.
Dynamic Callback URL (Deeplinking)
If you would like to Banxa to append order parameters onto the callback URL, reach out to your Account Manager and we can set this up for you.
The available parameters that can be appended to a callback URL (the URL that we will use to redirect the customer back to your application after they have completed the checkout journey on Banxa), include:
fiatAmount
fiat
coinAmount
coin
orderId
orderRef
orderStatus
This is the overall status of the order.
fulfillmentStatus
This a sub-status for the progress of crypto transfer.
paymentStatus
This is a sub-status for the progress of fiat payment.
identityStatus
This is a sub-status for the progress of the customer's KYC.
Example of a callback URL
Building the Banxa Order Summary Page
If you would like to provide a link for your customer to the Banxa Order Status page, you can append the
orderRef
value to your Return on Success URL. e.g. https://binance.banxa.com/status/{{orderRef}}
Parameters
Here are the supported parameters that can be passed to Banxa. All of these parameters are optional, however we recommend that you pass through as many values as possible as this significantly improves conversions.
The exact name and case of the parameter must be used.
Parameter | Description |
---|---|
orderType | Can be used to indicate whether the customer wants to sell by passing through a value of sell . The customer will be shown the Sell Order Form when they are redirected to Banxa. If this parameter is not passed, then the order will default to buy. |
fiatType | Fiat currency code that the customer wants to exchange e.g USD |
fiatAmount | Fiat amount that the customer wants to exchange e.g. 500. If both a fiatAmount and coinAmount are passed, then the fiatAmount will be used |
coinType | Coin currency code that the customer wants to exchange e.g. ETH |
coinAmount | Coin amount that the customer wants to exchange e.g. 800. If both a fiatAmount and coinAmount are passed, then the fiatAmount will be used |
blockchain | Blockchain network code that is selected by the customer. If this parameter is not passed, the default blockchain configured for the coinType selected will apply |
walletAddress | Customer’s wallet address |
walletAddressTag | Customer’s wallet tag or memo. This is required for transacting on certain blockchains such as BNB and XRP |
backgroundColor | A solid background colour. This will override Banxa's custom themes. Will take a hex value without the hash (#) e.g. ffffff |
primaryColor | The color used for active buttons. Will take a hex value without the hash (#) e.g. ffffff |
secondaryColor | The color used for button hover effects. Will take a hex value without the hash (#) e.g. ffffff |
textColor | The color used for all text in the checkout flow. Will take a hex value without the hash (#) e.g. ffffff |
theme | Used to apply the correct contrast based on the selected background color. We suggest that for dark backgrounds, you use a dark theme so that input fields are contrasted correctly. |
Using the SDK
Embed the following Code Snippet
!function(callback){
var b=document.createElement('script'); b.type="text/javascript", b.async=!0,
b.src="https://sdk.banxa.com/js/banxa-sdk-latest.js";
var x=document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(b,x);
if(callback){b.addEventListener("load",function(){callback()})}}
(yourOnLoadFunction);
Initiate Banxa class
Use the following snippet to create an instance of the banxa class to generate redirect and iframes.
<script>
const production = new Banxa(buy); //Use this line of code if you want to use Production mode. 'your-partner-name` is the name of your company, e.g. `binance`
const sandbox = new Banxa(buy, `sandbox`); //Use this line of code if you want to use Sandbox mode
</script>
➡️ Redirect into a new tab
Use the following snippet to create a redirect to the Banxa Order page:
<script>
banxa.redirect('#redirect',
{
'fiatType': 'AUD',
'coinType': 'BTC',
'fiatAmount': 500,
'coinAmount': 0.2,
'walletAddress': '3Hiy7HuFcqwkgERyfRSwEHqrwSwTirm8zb',
'theme': 'dark'
});
</script>
<button id="redirect">Launch Redirect</button>
🗔 iFrame embedded directly into your application
Use the following snippet to create an iFrame:
<script>
banxa.iframe('#iframe', '#iframeTarget',
{
'fiatType': 'AUD',
'coinType': 'BTC',
'fiatAmount': 200,
'coinAmount': 0.5,
'walletAddress': '3Hiy7HuFcqwkgERyfRSwEHqrwSwTirm8zb',
'theme': 'dark'
},
"800px", //Optional width parameter – Pass `false` if not needed.
"400px" //Optional height parameter – Pass `false` if not needed.
);
</script>
<button id="iframeButton">Launch iframe</button>
<div id="iframeTarget">
<!-- Where the iframe will be loaded -->
</div>
Updated 5 months ago