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 an optimized modern framework.

Installing

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

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

Methods of Usage

Our NPM package is usable in one of two ways:

Method 1: Import the initialize method and use it to create an SDK instance (Preferred)
Method 2: Import checkout and prequalify which accept initialization parameters, and use directly.

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 for the Checkout and Apply functionalities.