To seamlessly integrate Appcharge’s Checkout JS SDK into your application, follow these steps:
- Install the SDK:
In your app, executenpm i appcharge-checkout-js-sdk
to install the Appcharge Checkout JS SDK.
npm i appcharge-checkout-js-sdk
- Integrate the Library:
Note that the Appcharge's JS SDK is comprised of two components,AppchargeCheckout
andAppchargeCheckoutInit
.
AppchargeCheckoutInit
should be called once at the top level of the web app - this will create a handshake with Appcharge's Checkout solution, resulting in faster loading times for the checkout itself.
AppchargeCheckoutInit({
checkoutToken: 'yourCheckoutToken',
environment: 'sandbox',
});
checkoutToken (string): The checkout Public Key for your store as written in the Appcharge dashboard.
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,
checkoutToken,
onClose: onCloseCallback,
onInitialLoad: onInitialLoadCallback,
onOrderCreated: onOrderCreatedCallback,
onOrderCompletedFailed: onOrderCompletedFailedCallback,
onOrderCompletedSuccessfully: onOrderCompletedSuccessfullyCallback,
onPaymentIntentFailed: onPaymentIntentFailedCallback,
onPaymentIntentSuccess: onPaymentIntentSuccessCallback,
});
- Working with the Library:
Once you have yourcheckoutUrl
and yoursessionToken
, 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,
checkoutToken: CHECKOUT_TOKEN
onClose: () => {
console.log("Checkout Closed"); // Hook to the close event of Appcharge's Checkout
},
});
});
- Appcharge's checkout component allowed properties:
Prop | Type | Mandatory | Params available | Description |
---|---|---|---|---|
checkoutUrl | string | Yes | No | The checkoutUrl as provided by the "backend-to-backend" request |
sessionToken | string | Yes | No | The session token as provided by the "backend-to-backend" request |
checkoutToken | string | Yes | No | Unique public token for each game. Used to distinguish multiple game stores under the same domain |
locale | string | No | No | Language (ISO 639-1) and country (ISO 3166-1 Alpha2) localization property (e.g en-uk, en) |
onClose | Function | No | Yes | The checkout popup has closed |
onOrderCreated | Function | No | Yes | Order has been created |
onOrderCompletedFailed | Function | No | Yes | The order has failed due to an internal error/publisher reward error |
onOrderCompletedSuccessfully | Function | No | Yes | An order has updated with the publisher and confirmation was received |
onPaymentIntentFailed | Function | No | Yes | The player has clicked on ‘Pay’ and the payment failed |
onPaymentIntentSuccess | Function | No | Yes | The player has clicked on ‘Pay’ and the payment has been charged successfully |
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
.
Name | Type | Description |
---|---|---|
orderId | string | Unique identifier for the order. |
orderExternalId | string | External identifier for the order. |
date | string | Date of the order. |
sessionId | string | Identifier for the session associated with the order. |
purchaseInvoiceId | string | Identifier for the associated purchase invoice. |
appChargePaymentId | string | Identifier for the payment associated with the order. |
bundleName | string | Name of the bundle associated with the order. |
bundleId | string | Identifier for the bundle. |
bundleSKU | string | Stock Keeping Unit (SKU) for the bundle. |
products | Product[] | Array of products included in the order. |
totalSum | number | Total sum of the order. |
totalSumCurrency | string | Currency of the total sum. |
paymentMethodName | string | Name of the payment method used for the order. |
userId | string | (Optional) Identifier for the user placing the order. |
userCountry | string | (Optional) Country associated with the user. |
reason | string | (Optional) Reason for the order or additional notes. |
- Price points:
The getPricePoints function allows you to retrieve price points for your store. It takes two parameters:
- environment (string, mandatory): This parameter specifies the environment and can be either sandbox or prod.
- domain (string, optional): This parameter is the domain of your store. If not provided, the function will use the current domain as the default.
async function fetchPricePoints() {
const pricePoints = await getPricePoints('sandbox');
}