Skip to main content

Checkout Widget

In this section we'll go over the Checkout's methods and properties to create a charge.

Bidali identifies the charges your customers make on your application using your Publishable Key. You can get yours by logging into Bidali's Dashboard and selecting the Developers > API Keys item in the sidebar menu.

A publishable key is a string of random letters and numbers prefixed by pk_. For example pk_z3pwadfb5nmek0h6q0z0c.

Once you get your key, you can include our Checkout script like this:

<script type="text/javascript" src=""></script>

Once you include it, a global bidali object will be exposed. This object has a Checkout property which we'll be using to show the widget and create charges for your customers to pay.

The bidali.Checkout Object

In few words, the way you show the Checkout widget is by invoking its render method, like so:


The render methods takes an options Object as its only argument.

Creating charges with the widget


You can find detailed information about Charges here.

Creating a charge is pretty straight forward. Be sure to keep your Publishable Key handy.

name: 'Test',
description: 'Test charge',
fields: ['firstName', 'lastName', 'email'],
type: 'payment', // Can be set to 'donation', defaults to 'payment'
onCheckout: (info, actions) => {
amount: 100,
currency: 'usd',
metadata: info
onChargeUpdated: ({ statusCode }) => {
switch (statusCode) {
case 200:
// Processing
case 300:
// Success
case 400:
// Failed

The options object

Let's go over the properties of the options Object.

PropertyDescriptionDefault valueRequired
keyThis is your Publishable Key. The unique and public key that identifies your Bidali organization. It looks like pk_viqah4squsnuw6p0e1ue.nullYes
envThe env property identifies the environment you want to create the charge in. In most cases you'll want to set its value to production. You can also set it to staging or development.nullYes
amountThe Charge amount. For example: 50.00nullNo
currencyThe Charge currency. For example: USD or CAD.nullNo
typeThis is the type of checkout, either payment or donation.paymentNo
nameThis is the name of your company or organization. For example: ACME Inc..nullNo, but recommended
descriptionThe product's description. For example: 2 T-Shirts or Donation to ACME Fund.nullNo, but recommended
customerThe customer to create this charge for. This can be either the customer's id or an object to create a customer from. Ex. 19c03eae-08bc-4587-af31-46ef1f1d4053 or { 'firstName' : 'Kevin', 'lastName' : 'Bacon', 'email' : '' }nullNo, but recommended
fieldsThese are the fields that will be shown in the first step of the checkout process. It takes an Array of Strings, like: ['firstName', 'lastName', 'email']. The values collected here are passed to the onCheckout callback.null, ignored if customer option is passedNo
metadataSet of key-value pairs that you can attach to a charge. This can be useful for storing additional information about the charge in a structured format. Ex. { 'invoiceNumber' : '1234' }.nullNo
paymentCurrenciesAllows you to only show certain cryptocurrencies as payment options. It takes an Array of Strings that are the coin symbols, like: ['BTC', 'ETH']. The cryptocurrency must be enabled in the merchant dashboard to appear.nullNo
onCheckoutThis is a callback Function that is invoked once the form is submitted. The function takes two arguments, info and actions. The info argument contains the values collected in the first step of the checkout process. The actions argument is used to create the Charge in your Bidali organization. Read morenullNo, not if the fields options is not specified and an amount and currency option are specified.
onChargeCreatedThis callback Function is invoked once the Charge is created and its only argument is the charge object itself.nullNo
onChargeUpdatedThe charge object will change over time. Once a cryptocurrency transaction is detected, or a charge expires or fulfilled, this callback Function will be called and its only argument is the charge object. This is where you would handle a successful or failed payment, depending on the charge's statusCode. Read morenullNo