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

2. Import the SDK:
   In your React component, import the AppchargeCheckout and AppchargeCheckoutInit components:

import { AppchargeCheckout, AppchargeCheckoutInit } from "appcharge-checkout-reactjs-sdk";

3. 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 - 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"
/>

Each time a user selects an offer in your application, 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}
  referrerUrl={window.location.protocol + "//" + window.location.host}
  onClose={() => console.log("Payment prompt closed")}
/>

You can show 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}
       referrerUrl={window.location.protocol + "//" + window.location.host}
       onClose={() => setShowCheckout(false)}
       />}
}

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.