Basic Integration
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.
The minimum requirements are a public API key provided by ChargeAfter.
The code snippet below shows how to add the ChargeAfter Payment SDK to your website.
Code samples
<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')
},
// Optional functionality that triggers when user flow finishes
// and modal closes
onComplete: function(payload, context) {
// payload includes same data as Apply/Checkout callbacks
const {data, status, token} = payload;
// 'APPLY' | 'CHECKOUT'
const source = context.source;
/**
only applicable for applications initiated from widget
sku?: string;
price?: string | number;
category?: string;
tag?: string;
*/
const promotion = context.promotion;
}
};
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')
},
// Optional functionality that triggers when user flow finishes
// and modal closes
onComplete: function(payload, context) {
// payload includes same data as Apply/Checkout callbacks
const {data, status, token} = payload;
// 'APPLY' | 'CHECKOUT'
const source = context.source;
/**
only applicable for applications initiated from widget
sku?: string;
price?: string | number;
category?: string;
tag?: string;
*/
const promotion = context.promotion;
}
};
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>
Properties
ChargeAfter Object
| Field | Type | Description |
|---|---|---|
| init | function | Initializes the ChargeAfter flow and receives config object. See Config object below. |
| cfg | object | References to the config the merchant has provided ChargeAfter in the init function. See Config object below. |
| payments | object | Represents the payments flows: Apply and/or Checkout. 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 resolves 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 Preferences object 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 that partners can use to tell ChargeAfter to which merchant the flow is referring. |
| onLoaded | function (Optional) | Event callback that fires when ChargeAfter finishes the initialization process. |
| preferences | object (Optional) | See Preferences object below. |
| onComplete | function (Optional) | Callback that will be executed on modal closure. |
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 in which the merchant operates |
| language | string (Optional) | The language to present to the consumer in the ChargeAfter modal Default: 'en' |
| marketingOptIn | boolean (Optional) | Opts in the consumer to marketing. Default: true |
Testing the integration
Change cdn.chargeafter.com to cdn-sandbox.ca-dev.co, and use your testing credentials 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.
Updated 2 months ago
What’s Next