Web

Commerce works on any website, inside a mobile or desktop app as a webview, and as a dApp that connects to your user's wallet.

As a dApp, anyone with a supported wallet can open bida.li/dapp in their wallet's browser, such as Phantom, Trust Wallet or Coinbase Wallet, and start shopping. There is nothing to install or build. Here it is in Phantom:

To embed Commerce in your own site or app, with more control over the experience, follow the steps below.

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

Production

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

Sandbox

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

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

The protocol values to use in paymentCurrencies are listed here:

Environment	URL
Sandbox	https://docs.bidali.com/commerce/currencies?environment=testnet
Production	https://docs.bidali.com/commerce/currencies

Usage

Pay from an external wallet

The user pays by scanning a QR code, copying the amount and address, or connecting a browser wallet such as MetaMask.

Default options

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

Limit the payment currencies

Pass paymentCurrencies to offer only the currencies you list, by protocol.

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

Pre-populate users email address

email is optional

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

Pay inside your wallet (web wallets)

The user pays inside your app or wallet. After they choose a payment currency, your app receives a paymentRequest with the amount and address to pay.

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

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',
    protocol: 'ethereum',
    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 to send, as a user readable string (ex. "25")
`symbol`	String	The symbol of the currency the user has chosen to pay with, ex: `USDC`. Not unique to a currency: USDC on Ethereum and USDC on Stellar both have the symbol `USDC`
`protocol`	String	The protocol of the currency the user has chosen to pay with, this is unique for each currency. ex: `usdcstellar`
`description`	String	A comma-delimited list of products being purchased. Can be used on your payment approval screen so the user sees what they are approving payment for. Ex: `$50 USD Amazon US, 2x $25 USD Apple US`
`lineItems`	Array	A list of products being purchased. Just like with `description`, you can use this on your payment approval screen. A line item looks like `{ name: 'Apple US', quantity: 1, amount: '$5 USD', image: 'https://assets.bidali.com/commerce/brands/apple.png' }`
`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. See memo / note requirements by network.
`extraIdName`	String	The name of the `extraId` that must be sent with the transaction. See memo / note requirements by network.

Networks that need a memo

On these networks, the payment request includes an extra field that MUST be sent with the transaction for the payment to be credited.

Network	`extraIdName`
Stellar	`Memo text`
Solana	`Memo`
Algorand	`Note/Memo`
Cosmos	`Memo`
Osmosis	`Memo`

On this page