Integration Guide (HTML + JS)

Suggest Edits

📘

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)

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',
                // Optional:
                delegatedMerchantId : '<merchant id to act on behalf of>'
            };

            // 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>

📘

You only need to include the initialization script once

The above script is applicable for both ChargeAfter's Apply UI and Checkout UI.

  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:
  • The ChargeAfter UI is hosted on CDNs with geographic redundancy. The geographic location of the CDN is automatically selected by our servers to minimize latency
  • The above function will:
    • Asynchronously fetch and load the ChargeAfter module
    • Initialize the ChargeAfter module so it is available on 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 10 months ago