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:
- Initialization: When the
Init
function is called, the SDK captures the player’s geographical location. - Price Points Configuration: Based on the geolocation data, a list of price points is generated and configured by Appcharge.
- 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:
- Configure the price points in the dashboard
(For more information, please follow the Price Points Dashboard Setup guide). - Execute the Init function in the store launch phase synchronously to initialize the SDK and retrieve the player’s geolocation.
- Get your price points from the SDK using the new
getPricePoints
function, which provides:- USD price
- Formatted price including currency symbol and presentation details
- Use the price points to present your offers dynamically to the player.
- 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:
- Import the
getPricePoints
function from the relevant SDK. - Fetch the price points asynchronously using
getPricePoints
. - 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');
}