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