Getting Started with the Web SDK
The Abowire Web SDK is a frontend library you can add to your Website to easily integrate Abowire to your business. The Web SDK includes:
- Checkout SDK
- Customer Portal SDK
To install the Abowire Web SDK into your Website, copy & paste the SDK's script into the <head> section of the page.
<script src="https://sdk.abowire.com/abowire.min.js"></script>
<script>
abowire.config.changeConfig({
clientId: '<your client id>',
environment: 'sandbox'
});
</script>
Parameter | Description | Is required |
clientId | Your Abowire OAuth2 Client ID | Required |
environment | Abowire environment (sandbox or production) | Required |
sessionToken | A customer-bound Session Token | Optional |
currency | Currency ISO code (eg. EUR) | Optional |
locale | Language ISO code (eg. en_UK) | Optional |
windowPosition | Position in which the dialog opens (left or center) | Optional |
After the SDK is loaded, a variable named
abowire will be globally available (window.abowire). Disable sessionStorage State
Please note that the checkout saves the current state in sessionStorage. This means that if you refresh or leave and come back (given that you're using the same tab), it will resume the same state in which you left it. If you don't want this behavior, you can disable it by setting
abowireDisableStorage = true before loading the SDK.For example:
<script>
window.abowireDisableStorage = true;
</script>
<script src="https://sdk.abowire.com/abowire.min.js"></script>
<script>
abowire.config.changeConfig({
clientId: '<your client id>',
environment: 'sandbox'
});
</script>
Render the checkout inside a custom element
If you want to render the checkout inside a custom element, you can define it using
abowireContainerId = 'myCustomDiv' before loading the SDK.For example:
<div id="myCustomDiv">The checkout will be rendered here</div>
<script>
window.abowireContainerId = 'myCustomDiv';
</script>
<script src="https://sdk.abowire.com/abowire.min.js"></script>
<script>
abowire.config.changeConfig({
clientId: '<your client id>',
environment: 'sandbox'
});
</script>
Last modified 1yr ago