Documentation

SDK Integration

Suggest Edits

NPM Integration

The preferred method of integrating the ChargeAfter SDK is via NPM.
Our NPM package is always up-to-date, is strongly typed (Typescript), and optimized modern frameworks.

Our NPM package is usable in one of two ways:

  • Import the initialize method and use to create an SDK instance - Preferred (see below)
  • Import checkout and prequalify which accept initialization parameters, and use directly

Installing

// using NPM
npm install @chargeafter/payment-sdk

// using yarn
yarn add install @chargeafter/payment-sdk

Getting Started

import { EnvironmentType, initialize } from "@chargeafter/payment-sdk";
import * as React from "react";
import * as ReactDOM from "react-dom";

const CheckoutButton = () => {
  const cfg = {
    //optional - use in case of more than a single store
    storeId: "<storeId>",
    apiKey: "<your api key>",
    // Optional:
    delegatedMerchantId: "<merchant id to act on behalf of>",
    // Optional:
    preferences: {
      // Optional: default en
      language: "en",

      // Optional: true/false to opt in to marketing or optout
      marketingOptIn: true,

      // Optional:
      currency: "<merchant currency, e.g USD>",

      // Optional:
      // used to determine language and currency
      // if they are not provided
      country: "<merchant country>"
    }
  };
  const onClick = async () => {
    try {
      // initialize is called with config as first parameter, and environment name as second.
      // if not passed, production is assumed.
      const caObject = await initialize(cfg, "sandbox");
      
      // caObject.payments.present("apply");
      // caObject.payments.present("checkout", {
      //   callback: () => {},
      //   cartDetails: {
      //     items: [],
      //     taxAmount: 5,
      //     shippingAmount: 6,
      //     totalAmount: 7
      //   }
      // });
      
    } catch (ex) {
      console.log(ex.message);
    }
  };
  return (
    <button onClick={onClick}>
      Click to checkout
    </button>
  );
};

import { checkout, ICheckoutProps } from "@chargeafter/payment-sdk";

const checkoutButton = () => {
  const cfg: ICheckoutProps = {
    config: {
      //optional - use in case of more than a single store
      storeId: "<storeId>",
      env: {
        name: "qa",
        apiKey: "<your api key>"
      }
    },
    callback: () => {},
    cartDetails: {
      items: [],
      taxAmount: 5,
      shippingAmount: 6,
      totalAmount: 7
    }
  };
  const onClick = async () => {
    try {
      const { consumerId } = await checkout(cfg);
      console.log(consumerId);
    } catch (ex) {
      console.log(ex.message);
    }
  };
  return <button dataButtonType="small-generic" onClick={onClick}>Click to checkout</button>;
};

All types are exported from the package for your convenience.

See the following sections in the SDK User Guide for the Checkout and Apply functionalities.

HTML Integration

If an NPM integration (preferred by ChargeAfter) is not possible, you can use an HTML 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

Objects

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

Updated 6 months ago

What’s Next