Skip to main content
This article explains how to integrate Appcharge’s Frontend SDK into your app.

​
Step 1 | Install the SDK

In your app, install the SDK: 
npm i appcharge-checkout-reactjs-sdk

​
Step 2 | Import the checkout component

Add the following import statement to the component where you plan to trigger the checkout flow: 
import { AppchargeCheckout } from "appcharge-checkout-reactjs-sdk";
This component must only be rendered after a player performs an action that requires payment, for example, selects an offer in your web store.

​
Step 3 | Create a checkout session

When a player selects an offer in your web store, your backend must call the Create Checkout Session API to create a checkout session for the player. When creating the checkout session, you must include localized pricing information by passing the localized price and currency in the priceDetails property. You can do this in one of the following ways:
  • Pass your own localized prices directly in the Create Checkout Session request.
  • Manage and retrieve localized prices using Appcharge Price Points, and pass the relevant price points in the request.
The API responds with the parsedUrl value, which is the checkout URL.

​
Step 4 | Render and configure the checkout component

Once you receive the parsedUrl returned by your backend, the next step is to render the checkout component. This example shows a basic setup with minimal configuration, but your implementation may include any of the supported properties listed below: 
<AppchargeCheckout
  checkoutUrl={parsedUrl}
/>

​
Properties

The AppchargeCheckout component supports the properties below, and additional event properties to enable realtime analytics.
PropTypeRequiredParams availableDescription
checkoutUrlstringYesNoThe checkout URL as provided by the backend-to-backend request.
referrerUrlstringNoNoThe domain you’re coming from, for example, www.appcharge.com. The referrerUrl must be an HTTPS domain.
localestringNoNoDefines the checkout language. For more details, see Translate your Checkout.

​
Complete example

You’ll typically trigger the Checkout after creating the checkout session: 
function MyComponent() {
  const [showCheckout, setShowCheckout] = useState(false);
  const [checkoutUrl, setCheckoutUrl] = useState(null);

  useEffect(() => {
    async function fetchSession() {
      // Your backend request to the Create Checkout Session API
      const { parsedUrl } = await createCheckoutSession();
      setCheckoutUrl(parsedUrl);
      setShowCheckout(true);
    }

    fetchSession();
  }, []);

  return (
    <>
      {showCheckout && checkoutUrl && (
        <AppchargeCheckout
          checkoutUrl={checkoutUrl}
          onClose={() => setShowCheckout(false)}
        />
      )}
    </>
  );
}