ReactJS SDK

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

  1. Install the SDK:
    In your ReactJS app, execute npm i appcharge-checkout-reactjs-sdk to install the Appcharge ReactJS SDK.
npm i appcharge-checkout-reactjs-sdk
  1. Import the SDK:
    In your React component, import the AppchargeCheckout and AppchargeCheckoutInit components:
import { AppchargeCheckout, AppchargeCheckoutInit } from "appcharge-checkout-reactjs-sdk";
  1. Integrate the Component:
    Note that the Appcharge's React SDK is comprised of two components, AppchargeCheckout and AppchargeCheckoutInit.
    • AppchargeCheckoutInit component needs to be rendered once at the top level of the web app (App.js) - this component will create a handshake with Appcharge’s Checkout solution, resulting in faster loading times for the checkout itself.
    • AppchargeCheckout component needs to be conditionally rendered once a user makes an action that requires payment (clicking on a bundle, for example).
      Start by rendering the AppchargeCheckoutInit component once the app loads:
<AppchargeCheckoutInit
  environment="sandbox"
  checkoutToken={checkoutToken}
/>

Each time a user selects an offer in your application, Appcharge's React SDK performs a server-to-server request to create a checkout session, more data can be found here.
Then, incorporate Appcharge’s ReactJS Component into your code by adding the following snippet:

<AppchargeCheckout
  checkoutUrl={checkoutUrl}
  sessionToken={sessionToken}
	checkoutToken={checkoutToken}
  referrerUrl={window.location.protocol + "//" + window.location.host}
  onClose={() => console.log("Payment prompt closed")}
/>

You can render Appcharge’s ReactJS component once you have the required props by adding a state for showing and hiding the checkout component like in the following snippet:

function MyComponent() {
  const [showCheckout, setShowCheckout] = useState(false);

  useEffect(()=> {
    // some logic to get the required props
    setShowCheckout(true);
   }, [])

  return (
    {showCheckout && 
     <AppchargeCheckout
       checkoutUrl={checkoutUrl}
       sessionToken={sessionToken}
       checkoutToken={checkoutToken}
       referrerUrl={window.location.protocol + "//" + window.location.host}
       onClose={() => setShowCheckout(false)}
       />}
}
  1. Appcharge's checkout component allowed properties:
PropTypeMandatoryParams availableDescription
checkoutUrlstringYesNoThe checkoutUrl as provided by the "backend-to-backend" request
sessionTokenstringYesNoThe session token as provided by the "backend-to-backend" request
checkoutTokenstringYesNoUnique public token for each game. Used to distinguish multiple game stores under the same domain
referrerUrlstringNoNoThe domain you're coming from, for example: "www.appcharge.com" - The referrerUrl must be an HTTPS domain,
localestringNoNoLanguage (ISO 639-1) and country (ISO 3166-1 Alpha2) localization property (e.g en-uk, en)
onCloseFunctionNoYesThe checkout popup has closed
onOrderCreatedFunctionNoYesOrder has been created
onOrderCompletedFailedFunctionNoYesThe order has failed due to an internal error/publisher reward error
onOrderCompletedSuccessfullyFunctionNoYesAn order has updated with the publisher and confirmation was received
onPaymentIntentFailedFunctionNoYesThe player has clicked on ‘Pay’ and the payment failed
onPaymentIntentSuccessFunctionNoYesThe 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.

NameTypeDescription
orderIdstringUnique identifier for the order.
datestringDate of the order.
sessionIdstringIdentifier for the session associated with the order.
bundleNamestringName of the bundle associated with the order.
bundleIdstringIdentifier for the bundle.
bundleSKUstringStock Keeping Unit (SKU) for the bundle.
productsProduct[]Array of products included in the order.
totalSumnumberTotal sum of the order.
totalSumCurrencystringCurrency of the total sum.
paymentMethodNamestringName of the payment method used for the order.
userIdstringIdentifier for the user placing the order.
userCountrystringCountry associated with the user.
reasonstring(Optional) Reason for the order or additional notes.
  1. Price points:

In your ReactJS component, import the getPricePoints function:

import { getPricePoints } from "appcharge-checkout-reactjs-sdk";

The getPricePoints function allows you to retrieve price points for your store. It takes two parameters:

  1. environment (string, mandatory): This parameter specifies the environment and can be either sandbox or prod.
  2. 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() {
    try {
      const pricePoints = await getPricePoints(process.env.REACT_APP_ENV);
    } catch (error) {
      console.error(error);
    }
  }