Skip to main content

Checkout SDK (V1)

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

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:

<script src="https://sdk.abowire.com/abowire.min.js"></script>
<script>
abowire.config.changeConfig({
  clientId: '<your client id>',
  environment: 'sandbox',
});
</script>

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:

abowire.config.changeConfig({
  clientId: "<your client id>",
  environment: "sandbox",
  isModal: false,
});

If you want to force a specific language or currency, you can do so as well:

abowire.config.changeConfig({
  clientId: "<your client id>",
  environment: "sandbox",
  isModal: false,
  currency: "EUR",
  locale: "en_UK",
});

In case you need to take the user to a specific page afterwards, you can also override the redirect URL that's predefined in your account's configuration:

abowire.config.changeConfig({
  clientId: '<your client id>',
  environment: 'sandbox',
  redirectUrl: 'https://google.com',
});

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:

abowire.config.changeConfig({
  clientId: "<your client id>",
  environment: "sandbox",
  isModal: false,
  currency: "EUR",
  locale: "en_UK",
  sessionToken: "<a-very-large-JWT-token>",
});

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.

abowire.cart.addItem({ sku: "scale" });

Like this for example:

<button class="plan-button" data-plan="premium">Choose the Premium plan</button>
<button class="plan-button" data-plan="scale">Choose the Scale plan</button>
<button class="plan-button" data-plan="enterprise">Choose the Enterprise plan</button>

<script>
const buttons = document.getElementsByClassName("plan-button");

for(let button of buttons) {
  const sku = button.getAttribute("data-plan");

  button.addEventListener("click", () => {
    abowire.cart.addItem({ sku });
    abowire.cart.openCart();
  });
}
</script>

{% hint style="warning" %} For this example to work, you need to create plans with these SKUs in the Abowire App first {% endhint %}

​

Open the cart​

Whenever you're ready, you can open the Checkout by triggering this action:

abowire.cart.openCart();

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

More Actions​

Add a plan

Remove a plan

Change language