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
andprequalify
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.
Updated 23 days ago