Abowire
Search…
Checkout SDK
Abowire offers a fully customizable drop-in Checkout to make it really easy to onboard your customers to your subscription business.
The Checkout is a pre-built UI component that you can integrate to your Website and handles:
    Signup
    Login
    Capturing Billing Information (including EU VAT details for B2B customers)
    Capturing Payment Information
    Subscribing customers to a plan
You can read more about the Checkout here:

Getting Started

Before you get started, you will need to create a frontend API Key.
In order to test the next examples, you will need to create at least one plan. You can use the SKUs we are using here (premium, scale, enterprise) or you can use your own.

Configuring the Checkout SDK

This is the base configuration to get started using the Checkout SDK:
1
<script src="https://sdk.abowire.com/abowire.min.js"></script>
2
<script>
3
abowire.config.changeConfig({
4
clientId: '<your client id>',
5
environment: 'sandbox',
6
});
7
</script>
Copied!
You can specify more configuration options here as well. For instance, if you would like to embed the checkout in your page instead of opening a modal window, you can also set the isModal: false flag:
1
abowire.config.changeConfig({
2
clientId: '<your client id>',
3
environment: 'sandbox',
4
isModal: false,
5
});
Copied!
If you want to force a specific language or currency, you can do so as well:
1
abowire.config.changeConfig({
2
clientId: '<your client id>',
3
environment: 'sandbox',
4
isModal: false,
5
currency: 'EUR',
6
locale: 'en_UK',
7
});
Copied!

Authenticating a user

If you're managing your users in your own system, you will probably want to authenticate them with our SSO solution, instead of creating a new user.
You can do so by using the REST API to create a Session Token and passing it in the configuration settings:
1
abowire.config.changeConfig({
2
clientId: '<your client id>',
3
environment: 'sandbox',
4
isModal: false,
5
currency: 'EUR',
6
locale: 'en_UK',
7
sessionToken: '<a-very-large-JWT-token>'
8
});
Copied!
This will load the Checkout of an already authenticated user and skip the first signup/login step.

Add a plan to the Checkout

The first step that starts the Checkout process, is the customer selecting a plan. For this, you can create a button that adds the desired plan to the cart. You will only need the SKU of the product to do so.
The easiest way to do this is to trigger this action whenever someone clicks a "Choose Scale Plan" button in your pricing page.
1
abowire.cart.addItem({ sku: 'scale' });
Copied!
Like this for example:
1
<button class="plan-button" data-plan="premium">Choose the Premium plan</button>
2
<button class="plan-button" data-plan="scale">Choose the Scale plan</button>
3
<button class="plan-button" data-plan="enterprise">Choose the Enterprise plan</button>
4
5
<script>
6
const buttons = document.getElementsByClassName("plan-button");
7
8
for(let button of buttons) {
9
const sku = button.getAttribute("data-plan");
10
11
button.addEventListener("click", () => {
12
abowire.cart.addItem({ sku });
13
abowire.cart.openCart();
14
});
15
}
16
</script>
Copied!
For this example to work, you need to create plans with these SKUs in the Abowire App first

Open the cart

Whenever you're ready, you can open the Checkout by triggering this action:
1
abowire.cart.openCart();
Copied!
You can of course do this right after adding the plan to the cart.

Full examples

You can visit the repository below to see a full working example:
https://github.com/abowire/web-sdk-demo/blob/main/checkout/basic-modal.html
github.com

More Actions

Last modified 10mo ago