JS SDK

To seamlessly integrate Appcharge’s Checkout JS SDK into your application, follow these steps:

1. Install the SDK:
   In your app, execute npm i appcharge-checkout-js-sdk to install the Appcharge Checkout JS SDK.

npm i appcharge-checkout-js-sdk

2. Integrate the Library:
   Note that the Appcharge's React SDK is comprised of two components, AppchargeCheckout and AppchargeCheckoutInit.
   AppchargeCheckoutInit should be called once - this will create a handshake with Appcharge's Checkout solution, resulting in faster loading times for the checkout itself.

AppchargeCheckoutInit({
  domain: 'yourDomain',
  environment: 'sandbox',
});

domain (string, optional): The domain for which Appcharge Checkout is being initialized. Defaults to the current window's host.

environment (string): The environment for Appcharge Checkout. Use 'sandbox' for testing and 'prod' for the production environment.

AppchargeCheckout should be called each time a user selects an offer in your application and makes an action that requires payment (clicking on a bundle, for example). It performs a server-to-server request to create a checkout session, more data can be found here.

AppchargeCheckout({
  checkoutUrl,
  sessionToken,
  onClose: onCloseCallback,
  onInitialLoad: onInitialLoadCallback,
  onOrderCreated: onOrderCreatedCallback,
  onOrderCompletedFailed: onOrderCompletedFailedCallback,
  onOrderCompletedSuccessfully: onOrderCompletedSuccessfullyCallback,
  onPaymentIntentFailed: onPaymentIntentFailedCallback,
  onPaymentIntentSuccess: onPaymentIntentSuccessCallback,
});

3. Working with the Library:
   Once you have your checkoutUrl and your sessionToken, you can start working with Appcharge's Checkout, here's a quick sample of how to do so:

const bundle = document.querySelector(".bundle");
bundle.addEventListener("click", () => {
    AppchargeCheckout({
      checkoutUrl: RECEIVED_CHECKOUT_URL,
      sessionToken: RECEIVED_SESSION_TOKEN,
      onClose: () => {
        console.log("Checkout Closed"); // Hook to the close event of Appcharge's Checkout
      },
  });
});

4. Appcharge's checkout component allowed properties:

All frontend events are received with a set of parameters, please notice that not all parameters are available for every event, parameters that are not available will be undefined.