Commerce SDK - Web

Step 1: Obtain your API Key

To get set up with an API Key please email us at support@bidali.com with your request.

Step 2: Include the Commerce script

Copy and paste this into the head of your website

<script type="text/javascript" src="https://commerce.bidali.com/commerce.min.js"></script>

This will expose a global object, bidaliSdk, which you can use to render the Commerce widget.

Usage

Pay via External Wallet

User pays by scanning QR code / copying amount & address, or via MetaMask

Default options

bidaliSdk.Commerce.render({
  apiKey: 'YOUR API KEY'
});

Pay with Dai only

bidaliSdk.Commerce.render({
  apiKey: 'YOUR API KEY',
  paymentCurrencies: ['DAI']
});

Pre-populate users email address

email is optional

bidaliSdk.Commerce.render({
  apiKey: 'YOUR API KEY',
  paymentCurrencies: ['DAI'],
  email: 'user@email.com'
});

Payment in-wallet (Custodial Wallets)

User pays in-app / wallet, after selecting a payment currency wallet receives a paymentRequest specifying the amount and address to send to.

bidaliSdk.Commerce.render({
  apiKey: 'YOUR API KEY',
  paymentType: 'prefill',
  onPaymentRequest: (paymentRequest) => {
    const { amount, currency, description, chargeId } = paymentRequest;
    console.log('received onPaymentRequest', paymentRequest);
  }
});

Prepopulate users email address

info

This will pre-populate the users email address and they will be prompted to confirm it in the checkout flow

bidaliSdk.Commerce.render({
  apiKey: 'YOUR API KEY',
  paymentType: 'prefill',
  email: 'user@email.com',
  onPaymentRequest: (paymentRequest) => {
    const { amount, currency, description, chargeId } = paymentRequest;
    console.log('received onPaymentRequest', paymentRequest);
  }
});

Here's what a paymentRequest looks like:

  {
    amount: '0.125',
    currency: 'ETH',
    address: '0x220b48eda85a0a067c769f0442dd2f4e03ba625a',
    chargeId: 'vIQ807gvR',
    description: '$50 Amazon Gift Card'
  }

A PaymentRequest has the following properties:

Property	Type	Description
address	String	The address to send to
amount	String	The amount of currency to send to address
currency	String	The symbol of the currency the user has chosen to pay with, ex: BTC
description	String	Description of the order, can be used on your payment approval screen so the user sees what they are approving payment for. Ex: 1 x Gift Card - Amazon $20 CAD
chargeId	String	The users order reference, helpful to reference the order in the future or if there are any issues. Ex: vIQ807gvR
extraId	String	The extraId that must be passed for the payment to be credited appropriately to the order. Currently only applicable to currencies on Stellar, Algorand, and Solana networks
extraIdName	String	The name of the extraId that must be sent with the transaction. Currently only applicable to currencies on Stellar, Algorand, and Solana networks

Note for currencies on Stellar, Algorand, and Solana networks

Below are the additional fields that will be populated on the BidaliPaymentRequest and MUST be passed with the transaction for it to be successful.

Network	extraIdName
Stellar	Memo text
Solana	Memo
Algorand	Note/Memo