Integrate the SDK

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

npm i appcharge-checkout-angular-sdk

npm i appcharge-checkout-js-sdk

npm i appcharge-checkout-vuejs-sdk

npm i appcharge-checkout-vuejs3-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";

@NgModule({
  declarations: [
		...
  ],
  imports: [
		...,
    AppchargeCheckoutModule,
  ],
  providers: [],
  bootstrap: [...]
})

import { AppchargeCheckout } from "appcharge-checkout-vuejs-sdk";

import { AppchargeCheckout } from "appcharge-checkout-vuejs3-sdk";

For JavaScript, add the following script tag in the <head> of your HTML file, before any application script that calls the SDK:

<script src="./node_modules/appcharge-checkout-js-sdk/script.js"></script>

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 calls the Create Checkout Session API to create a checkout session.

Localize your checkout prices

Include localized pricing in the priceDetails property so players see prices in their preferred currency. You can do this in one of two ways:

Pass your own localized price and currency directly in the request.
Retrieve localized prices on your backend using the Price Points API, then pass them in the request.

You can also use the Price Points API to localize prices displayed in your external web store, not only when creating a checkout session.

The API responds with the parsedUrl value, which is the checkout URL used in the next step.

Step 4 | Render and configure the checkout component

Once you receive the parsedUrl returned by your backend, you need 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}
/>

<appcharge-checkout
  [checkoutUrl]="parsedUrl">
</appcharge-checkout>

AppchargeCheckout({
  checkoutUrl: parsedUrl
});

<AppchargeCheckout
  :checkoutUrl="parsedUrl"
/>

<AppchargeCheckout
  :checkoutUrl="parsedUrl"
/>

Properties

The AppchargeCheckout component supports the properties below, and additional event properties to enable realtime analytics.

Prop	Type	Required	Params available	Description
`checkoutUrl`	string	Yes	No	The checkout URL as provided by the backend-to-backend request.
`referrerUrl`	string	No	No	The domain you’re coming from, for example, `www.appcharge.com`. The `referrerUrl` must be an HTTPS domain.
`locale`	string	No	No	Defines 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)}
        />
      )}
    </>
  );
}

// component.ts
export class MyComponent implements OnInit {
  showCheckout = false;
  checkoutUrl: string | null = null;

  async ngOnInit() {
    // Your backend request to the Create Checkout Session API
    const { parsedUrl } = await createCheckoutSession();
    this.checkoutUrl = parsedUrl;
    this.showCheckout = true;
  }

  closeCheckout = () => {
    this.showCheckout = false;
  }
}

// component.html
<appcharge-checkout
  *ngIf="showCheckout && checkoutUrl"
  [checkoutUrl]="checkoutUrl"
  [onClose]="closeCheckout">
</appcharge-checkout>

let showCheckout = false;
let checkoutUrl = null;

async function initializeCheckout() {
  // Your backend request to the Create Checkout Session API
  const { parsedUrl } = await createCheckoutSession();
  checkoutUrl = parsedUrl;
  showCheckout = true;

  if (showCheckout && checkoutUrl) {
    AppchargeCheckout({
      checkoutUrl: checkoutUrl,
      onClose: () => {
        showCheckout = false;
      }
    });
  }
}

initializeCheckout();

<template>
  <AppchargeCheckout
    v-if="showCheckout && checkoutUrl"
    :checkoutUrl="checkoutUrl"
    :onClose="closeCheckout"
  />
</template>

<script>
export default {
  data() {
    return {
      showCheckout: false,
      checkoutUrl: null,
    };
  },
  async mounted() {
    // Your backend request to the Create Checkout Session API
    const { parsedUrl } = await createCheckoutSession();
    this.checkoutUrl = parsedUrl;
    this.showCheckout = true;
  },
  methods: {
    closeCheckout() {
      this.showCheckout = false;
    }
  }
};
</script>

<template>
  <AppchargeCheckout
    v-if="showCheckout && checkoutUrl"
    :checkoutUrl="checkoutUrl"
    @close="closeCheckout"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const showCheckout = ref(false);
const checkoutUrl = ref(null);

async function initializeCheckout() {
  // Your backend request to the Create Checkout Session API
  const { parsedUrl } = await createCheckoutSession();
  checkoutUrl.value = parsedUrl;
  showCheckout.value = true;
}

function closeCheckout() {
  showCheckout.value = false;
}

onMounted(() => {
  initializeCheckout();
});
</script>

Overview

Checkout

Payment Links

Step 1 | Install the SDK

Step 2 | Import the checkout component

Step 3 | Create a checkout session

Localize your checkout prices

Step 4 | Render and configure the checkout component

Properties

Complete example

​Step 1 | Install the SDK

​Step 2 | Import the checkout component

​Step 3 | Create a checkout session

​Localize your checkout prices

​Step 4 | Render and configure the checkout component

​Properties

​Complete example

Step 1 | Install the SDK

Step 2 | Import the checkout component

Step 3 | Create a checkout session

Localize your checkout prices

Step 4 | Render and configure the checkout component

Properties

Complete example