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

FieldTypeDescription
initfunctionInitializes the ChargeAfter flow, receives config object (see below)
cfgobjectReferences to the config the merchant has provided ChargeAfter
in the init function - See below
paymentsobjectRepresents the payments flows -- Apply &/or Checkout --
Example: ChargeAfter.payments.present('apply')
promotionsobjectHolds the widget and promotions, updating the widgets with new prices or opening the Promotion Modal manually
Example: ChargeAfter.promotions.update([...items]);
getDirectLendersfunctionReturns a promise which resolve an array of lenders that are defined as direct lenders and can be launched directly
eligibilityobjectRepresents the ability to present a widget in iframe for checking eligibility with a specific lender
poweredByLogofunctionGets the url of the "powered by" logo used by ChargeAfter
disposefunctionManually removes all resources ChargeAfter is using including the modal iframe
preferencesobject (Optional)See below

Config Object

FieldTypeDescription
apiKeystring (Required)Public api key provided by ChargeAfter
storeIdstring (Optional)An id used to identify a specific store in case the merchant has more than one
delegatedMerchantIdstring (Optional)The merchant id which partners can use to tell ChargeAfter which merchant is the flow referring to
onLoadedfunction (Optional)Event callback that fires when ChargeAfter finished the initialization process
preferencesobject (Optional)See below
onCompletefunction (Optional)Callback that will be executed on modal close

Preferences object

FieldTypeDescription
currencystring (Optional)The currency to show to the consumer in the ChargeAfter modal
Default: β€˜USD’
countrystring (Optional)The country that the merchant operates in
languagestring (Optional)The language to present to the consumer in the ChargeAfter modal
Default: 'en'
marketingOptInboolean (Optional)Default: true