Integration Guide (HTML + JS)
The code snippet below shows how to add the ChargeAfter Payment SDK to your website.
Minimum requirements are a public API key provided by ChargeAfter.
<html>
<body>
<script>
// the script goes to the end of the body section
function onLoadChargeAfterSDKScript() {
var config = {
// Required: if not provided the SDK will not be initilized
apiKey: 'public-api-key',
// Optional:
storeId: 'your-store-id',
// Optional:
delegatedMerchantId: '<merchant id to act on behalf of>',
// Optional:
onLoaded: function() {
// now we can work with chargeafter sdk
// ChargeAfter.payments.present('apply')
// ChargeAfter.payments.present('checkout',{...})
// not required, automaticly handled by the SDK and widget
// ChargeAfter.promotions.present('sku')
},
};
ChargeAfter.init(config);
}
var script = document.createElement('script');
script.src = 'https://cdn.chargeafter.com/web/v2/chargeafter.min.js?t=' + Date.now();
script.type = 'text/javascript';
script.async = true;
script.onload = onLoadChargeAfterSDKScript;
document.body.appendChild(script);
</script>
</body>
</html>
<html>
<body>
<script>
// the script goes to the end of the body section
function onLoadChargeAfterSDKScript() {
var config = {
// Required: if not provided the SDK will not be initilized
apiKey: 'sandbox-api-key',
// Optional:
storeId: 'your-store-id',
// Optional:
delegatedMerchantId: '<merchant id to act on behalf of>',
// Optional:
onLoaded: function() {
// now we can work with chargeafter sdk
// ChargeAfter.payments.present('apply')
// ChargeAfter.payments.present('checkout',{...})
// not required, automaticly handled by the SDK and widget
// ChargeAfter.promotions.present('sku')
},
};
ChargeAfter.init(config);
}
var script = document.createElement('script');
script.src = 'https://cdn-sandbox.ca-dev.co/web/v2/chargeafter.min.js?t=' + Date.now();
script.type = 'text/javascript';
script.async = true;
script.onload = onLoadChargeAfterSDKScript;
document.body.appendChild(script);
</script>
</body>
</html>
ChargeAfter SDK is non-obtrusive by design, it is very light-weight (30KB) and loads async in order to prevent the possibility of slowing down the containing website.
Testing the integration
Change cdn.chargeafter.com to cdn-sandbox.ca-dev.co, and use your testing credentials in order to access our sandbox environment. Please refer to the sandbox environment instructions for more details.
A sandbox (test environment) URL should be provided to you together with your sandbox credentials
ChargeAfter Object
Field | Type | Description |
---|---|---|
init | function | Initializes the ChargeAfter flow, receives config object (see below) |
cfg | object | References to the config the merchant hs provided ChargeAfter in the init function |
payments | object | Represents the payments flows, Apply and Checkout, that consumers can do in ChargeAfter. Example: ChargeAfter.payments.present('apply') |
promotions | object | Holds the widget and promotions, updating the widgets with new prices or opening the Promotion Modal manually Example: ChargeAfter.promotions.update([...items]); |
getDirectLenders | function | Returns a promise which resolve an array of lenders that are defined as direct lenders and can be launched directly |
eligibility | object | Represents the ability to present a widget in iframe for checking eligibility with a specific lender |
poweredByLogo | function | Gets the url of the "powered by" logo used by ChargeAfter |
dispose | function | Manually removes all resources ChargeAfter is using including the modal iframe |
preferences | object (Optional) | See below |
Config Object
Field | Type | Description |
---|---|---|
apiKey | string (Required) | Public api key provided by ChargeAfter |
storeId | string (Optional) | An id used to identify a specific store in case the merchant has more than one |
delegatedMerchantId | string (Optional) | The merchant id which partners can use to tell ChargeAfter which merchant is the flow referring to |
onLoaded | function (Optional) | Event callback that fires when ChargeAfter finished the initialization process |
preferences | object (Optional) | See below |
Preferences object
Field | Type | Description |
---|---|---|
currency | string (Optional) | The currency to show to the consumer in the ChargeAfter modal Default: ‘USD’ |
country | string (Optional) | The country that the merchant operates in |
language | string (Optional) | The language to present to the consumer in the ChargeAfter modal Default: 'en' |
marketingOptIn | boolean (Optional) | Default: true |
Updated 4 months ago