> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appcharge.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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:
```bash React theme={"system"}
npm i appcharge-checkout-reactjs-sdk
```
```bash Angular theme={"system"}
npm i appcharge-checkout-angular-sdk
```
```bash JavaScript theme={"system"}
npm i appcharge-checkout-js-sdk
```
```bash Vue 2 theme={"system"}
npm i appcharge-checkout-vuejs-sdk
```
```bash Vue 3 theme={"system"}
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:
```ts React theme={"system"}
import { AppchargeCheckout } from "appcharge-checkout-reactjs-sdk";
```
```ts Angular theme={"system"}
@NgModule({
declarations: [
...
],
imports: [
...,
AppchargeCheckoutModule,
],
providers: [],
bootstrap: [...]
})
```
```js Vue 2 theme={"system"}
import { AppchargeCheckout } from "appcharge-checkout-vuejs-sdk";
```
```js Vue 3 theme={"system"}
import { AppchargeCheckout } from "appcharge-checkout-vuejs3-sdk";
```
For JavaScript, add the following script tag in the `` of your HTML file, before any application script that calls the SDK:
```html theme={"system"}
```
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](/../../api-reference/checkout/checkout-session/create-checkout-session) 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](./manage-and-retrieve-price-points) 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:
```javascript React theme={"system"}
```
```html Angular theme={"system"}
```
```javascript JavaScript theme={"system"}
AppchargeCheckout({
checkoutUrl: parsedUrl
});
```
```vue Vue 2 theme={"system"}
```
```vue Vue 3 theme={"system"}
```
### Properties
The `AppchargeCheckout` component supports the properties below, and additional [event properties](./frontend-sdk-events) 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](./translate-your-checkout). |
### Complete example
You'll typically trigger the Checkout after creating the checkout session:
```jsx React theme={"system"}
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 && (
setShowCheckout(false)}
/>
)}
);
}
```
```typescript Angular theme={"system"}
// 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
```
```javascript JavaScript theme={"system"}
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();
```
```vue Vue 2 theme={"system"}
```
```vue Vue 3 theme={"system"}
```