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.
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
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
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>