Checkout Widget

In this section we'll go over the Checkout's methods and properties to create a charge. You can use the demo below to check how it all works.

Note that the demo is written in plain JavaScript, no UI libraries were used. It's modern JavaScript, yes, so all we're using there is Babel to convert it to old-browser-friendly ES5.

source code

Ok, let's go over that demo above. Once you include our Checkout script, a global bidali object will be exposed (check the Getting started section if you skipped it). This object has a Checkout property which we'll be using to show the widget and create charges for your customers to pay.


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


The render methods takes an Object as its only argument.

The options object

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

Property Description Default value Required
key This is your Publishable Key. The unique and public key that identifies your Bidali organization. It looks like pk_viqah4squsnuw6p0e1ue. null Yes
env The 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. null Yes
amount The Charge amount. For example: 50.00 null No
currency The Charge currency. For example: USD or CAD. null No
type This is the type of checkout, either payment or donation. payment No
name This is the name of your company or organization. For example: ACME Inc.. null No, but recommended
description The product's description. For example: 2 T-Shirts or Donation to ACME Fund. null No, but recommended
customer The 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' : '' } null No, but recommended
fields These 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 passed No
metadata Set 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' }. null No
paymentCurrencies Allows 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. null No
onCheckout This 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 more null No, not if the fields options is not specified and an amount and currency option are specified.
onChargeCreated This callback Function is invoked once the Charge is created and its only argument is the charge object itself. null No
onChargeUpdated The 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 more null No

results matching ""

    No results matching ""