Getting Started

Getting started with our Checkout widget is easy as pie.

Step 1: Obtain your Publishable Key

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.

Step 2: Include the checkout script

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

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

Step 3: Create a charge

This is how you can create a charge, in a nutshell.

const { Checkout } = bidali;

Checkout.render({
  key: 'pk_z3pwadfb5nmek0h6q0z0c',
  env: 'production',
  name: 'Test',
  description: 'Test charge',
  fields: ['firstName', 'lastName', 'email'],
  onCheckout: (info, actions) => {
    actions.createCharge({
      amount: 100,
      currency: 'usd',
      metadata: info
    });
  },
  onChargeUpdated: ({ statusCode }) => {
    switch (statusCode) {
      case 200:
        // Processing
        break;
      case 300:
        // Success
        break;
      case 400:
        // Failed
    }
  }
});

You can find detailed information about Charges here.

Create a donation

This is how you can create a donation, in a nutshell.

bidali.Checkout.render({
  key: 'pk_z3pwadfb5nmek0h6q0z0c',
  fields: ['firstName', 'lastName', 'email'],
  name: 'Earthling Project',
  description: 'Donate to the EARTHLING Project Fund',
  type: 'donation',
  currency: 'USD',
  onCheckout: async (info, actions) => {
    try {
      const charge = {
        metadata: {
          customerEmail: info.email,
          customerName: `${info.firstName} ${info.lastName}`
        }
      };
      return actions.createCharge(charge);
    } catch (e) {
      console.log(e);
    }
  }
});