Appcharge’s Checkout Solution includes price localization, automatically determining a player’s geolocation to provide localized pricing for an enhanced user experience. The getPricePoints method is compatible across multiple frameworks, including ReactJS, VueJS, Angular, and Vanilla JavaScript. Additionally, the SDK supports both sandbox and prod environments, allowing flexible configuration for testing or production.

For more details on how to integrate price localization in different frameworks, please refer to the specific SDK documentation:

​
How Price Localization Works

The price localization feature operates during the initialization phase of the Appcharge FE SDK. Here’s how it works:

  1. Initialization: When the Init function is called, the SDK captures the player’s geographical location.
  2. Price Points Configuration: Based on the geolocation data, a list of price points is generated and configured by Appcharge.
  3. Accessing Price Points: The getPricePoints method is used to retrieve these price points in your application, allowing you to display the relevant prices for your users.

​
High-Level Tech Flow:

  1. Configure the price points in the dashboard (For more information, please follow the Price Points Dashboard Setup guide).

  2. Execute the Init function in the store launch phase synchronously to initialize the SDK and retrieve the player’s geolocation.

  3. Get your price points from the SDK using the new getPricePoints function, which provides:

  • USD price

  • Formatted price including currency symbol and presentation details

  1. Use the price points to present your offers dynamically to the player.

  2. When the player chooses an offer, execute createCheckoutSession with the relevant offer to initiate the checkout flow.

​
How to Use Price Points in Various Frameworks

The getPricePoints method works consistently across different front-end frameworks. The method accepts the same parameters and provides the same functionality in each framework.

Parameters:

  • environment (string, required): Can be either sandbox or prod.
  • domain (string, optional): Defaults to the current domain if not provided.

​
Implementation Steps:

  1. Import the getPricePoints function from the relevant SDK.
  2. Fetch the price points asynchronously using getPricePoints.
  3. Use the price points to present offers to your players.

​
Example Implementations:

​
1. ReactJS:

In ReactJS, import the getPricePoints function from the Appcharge ReactJS SDK:

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

async function fetchPricePoints() {
  try {
    const pricePoints = await getPricePoints(process.env.REACT_APP_ENV);
  } catch (error) {
    console.error(error);
  }
}

​
2. VueJS

In VueJS, import the getPricePoints function from the Appcharge VueJS SDK:

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

methods: {
  async fetchPricePoints() {
    try {
      const pricePoints = await getPricePoints("sandbox");
    } catch (error) {
      console.error(error);
    }
  }
}

​
3. Angular

In Angular, import getPricePoints from the Appcharge Angular SDK within your component:

import {
  AppchargeCheckoutService,
  Environment
} from 'appcharge-checkout-angular-sdk';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers:  [ AppchargeCheckoutService ]
})
export class AppComponent {
  constructor(
    private appchargeSdkLib: AppchargeCheckoutService,
  ) {}

  getPricePointHandler() {
    this.appchargeSdkLib.getPricePoints("sandbox");
  }
}

​
4. Vanilla JS

In Vanilla JavaScript, use the getPricePoints method directly:

async function fetchPricePoints() {
  const pricePoints = await getPricePoints('sandbox');
}