Documentation

Load The ChargeAfter SDK

Suggest Edits

🚧

This article is deprecated.

📘

What do I need in order to finish this step?

You would need to provide a public API key provided by ChargeAfter for this step to work, as well as the storeId (if applicable)

📘

Already Integrated with the Apply UI?

You only need to include the setup script once. If you’ve already included it for Apply UI, you don’t need to include it again.

The code snippet below shows how to add the ChargeAfter Payment SDK to a website.
The URL below is a production URL. A sandbox (test environment) URL should be provided to you together with your sandbox credentials.

<html>
    <body>
        <script type="text/javascript">
            // 1.
            var caConfig = {
                apiKey: 'public-api-key',
                // Optional:
                storeId: 'your-store-id'
            };

            // 2.
            !function(e,t,c,a,n){var r,o=t.getElementsByTagName(c)[0];
            e.ChargeAfter || (e.ChargeAfter = {}),
            t.getElementById(a)||(e.ChargeAfter.cfg = n,(r=t.createElement(c)).id=a,
            r.src="https://cdn.chargeafter.com/web/v2/chargeafter.min.js?t="+1*new Date,
            r.async=!0,o.parentNode.insertBefore(r,o))}
            (window,document,"script","chargeafter-checkout-finance",caConfig);
        </script>
        
        <!-- 3. -->
        
    </body>
</html>

<html>
    <body>
        <script type="text/javascript">
            // 1.
            var caConfig = {
                apiKey: 'public-api-key',
                // Optional:
                storeId: 'your-store-id'
            };

            // 2.
            !function(e,t,c,a,n){var r,o=t.getElementsByTagName(c)[0];
            e.ChargeAfter || (e.ChargeAfter = {}),
            t.getElementById(a)||(e.ChargeAfter.cfg = n,(r=t.createElement(c)).id=a,
            r.src="https://cdn-sandbox.ca-dev.co/web/v2/chargeafter.min.js?t="+1*new Date,
            r.async=!0,o.parentNode.insertBefore(r,o))}
            (window,document,"script","chargeafter-checkout-finance",caConfig);
        </script>
        
        <!-- 3. -->
        
    </body>
</html>
  1. Defining the configuration variable:
  • Initialize an object that holds the configuration for the ChargeAfter module
  • Set public-api-key to be the public API key provided by ChargeAfter and is used to identify the merchant. The API key is public, as opposed to the private api key that is stored on the merchant’s servers only
  • If you want to specify a particular store, also set the storeId
  1. Loading the ChargeAfter module:
  • Checkout is hosted on CDNs with a geographic redundancy. The geographic location of the CDN is automatically selected by our servers to minimize latency
  • The above function will:
    • Asynchrnously fetch and load the ChargeAfter module
    • Initialize the ChargeAfter module so it is available in the current page
  1. The rest of the merchant website does not need to be modified or altered in order to host the ChargeAfter module

👍

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.

Updated over 2 years ago

What’s Next