🚖

How to add the Drop-in Checkout in my Website?

Goal

Add Abowire Drop-in Checkout in the subscription button of your website.

Description

You can use our Drop-in Checkout, which will open as a modal window within your Website, keeping your customers there.

Benefit

This integration offers a good tradeoff between getting a fast time-to-market and a more integrated experience. It does involve a minimal effort on your side, since you need to create an API Key and configure the Javascript snippet yourself.

Expected Result

To have Abowire Drop-in Checkout in your subscription button in your website.

How to do it?

Step 1: Go to Settings > API Keys.

image

Step 2: Create an API Key in order to get your Client ID. These keys are tied to your account only. The API key type should be public for Front-end integrations

image

Remarks:

  • Key type: public for Front-end integrations
  • Application name: Website
  • Callback URL: Add your website URL or any of your choice
  • Scopes Field: please add the following ones:
    • openid profile
    • full_access
    • offline_access

Step 3: Once the Front-end API Key is created, copy the Client ID.

Step 4: Add your client ID in the following SKU script.

<script src="[https://sdk.abowire.com/abowire.min.js](https://sdk.abowire.com/abowire.min.js)"></script>

<script>

abowire.config.changeConfig({

clientId: '<your client id>',

environment: 'production',

locale: 'de_DE',

});

function subscribe(sku) {

abowire.cart.addItem({ sku });

abowire.cart.openCart();

return false;

}

</script>

Step 5: Paste the SDK's script used in step 4 with your Client ID in the body of your website as a block of code.

Step 6: Create an HTML element like this with the SKU Name of your plan.

<a href="#" onClick="return subscribe('SKU NAME')">Subscribe to the Premium plan</button>

Remember to put the SKU Name of your plan. Go to Plan > Edit Plan

image

Step 7:  Paste the HTML code in the body of the pricing/checkout page or directly in your subscription (call to action) button

Additional Remarks:

  • Client ID: you will have one client ID for 'production' and another for 'sandbox'. Choose the right Client ID.
  • Environments: You can't use your sandbox keys to access the production environment and vice versa. You will need a different set of credentials for each environment. Choose the right environment.
  • Locale: is the language setting. Please choose the language you want to show:
    • 'de_DE' -> German Language
    • 'en_EN' -> English Language
    • 'es_ES' -> Spanish Language
<script src="[https://sdk.abowire.com/abowire.min.js](https://sdk.abowire.com/abowire.min.js)"></script>

<script>

abowire.config.changeConfigabowire.config({

clientId: '<your client id>',

environment: '¿production or sandbox?',

locale: '¿de_DE or en_EN or es_ES?',

});

function subscribe(sku) {

abowire.cart.addItem({ sku });

abowire.cart.openCart();

return false;

}

</script>