Basic Integration
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')
},
// 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>
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 has provided ChargeAfter in the init function - See below |
| payments | object | Represents the payments flows -- Apply &/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 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 |
| onComplete | function (Optional) | Callback that will be executed on modal close |
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 about 1 month ago