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: 'YOUR PUBLISHABLE KEY',
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: 'YOUR PUBLISHABLE KEY',
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);
}
}
});