> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stigg.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Implementing price localization on your public website and application

## Overview

In order to future-proof your public website and application for price localization, it's recommended to implement these changes as part of your initial integration with Stigg.

Doing so will allow you to introduce and rollout changes to the price localization configuration, without requiring any additional code changes.

<Note>
  Stigg does not automatically determine a customer's billing currency. You are responsible for implementing the logic that resolves the correct `billingCountryCode` for each customer and passing it to Stigg's components and APIs.

  Common approaches include using the customer's IP address (GeoIP), their billing address, or a currency preference they select during onboarding. Make sure to apply the same logic on both your public pricing page and in-app experiences - customers who see one currency before subscribing should not be surprised by a different currency afterward.
</Note>

<Warning>
  1. When no localized pricing is defined for a specified country, the default pricing will be used.
  2. If the customer has already subscribed to a plan with a localized price, its billing country code would **override** the one that's provided programatically.
</Warning>

## Visibility for localized prices in your public pricing page

<CodeGroup>
  ```typescript React theme={null}
  // Implement your own logic to resolve billingCountryCode (e.g. from the visitor's IP via GeoIP).
  // Stigg does not determine this automatically.

  <Paywall
    highlightedPlanId="plan-id"
  	billingCountryCode="DK" // must be in the ISO-3166-1 format
    onPlanSelected={({ plan, customer }) => {
      // Handle customer intention to subscribe to plan
    }}
  />
  ```
</CodeGroup>

<img src="https://mintcdn.com/stigg/rbfzdbhZ6y5pB9n-/images/docs/9d5fd67-Screenshot_2023-03-30_at_0.11.07.png?fit=max&auto=format&n=rbfzdbhZ6y5pB9n-&q=85&s=47b2bebfaf93971bcfe1cd6a3417254f" alt="" width="3832" height="1840" data-path="images/docs/9d5fd67-Screenshot_2023-03-30_at_0.11.07.png" />

## Visibility for localized prices in your in your application

### In-app paywall

<CodeGroup>
  ```typescript React theme={null}
  // Implement your own logic to resolve billingCountryCode for customers who have never subscribed to a paid plan
  // (e.g. from their IP via GeoIP, billing address, or onboarding preference).
  // Once a customer has an active subscription with a localized price, that currency will take precedence.

  <Paywall
    highlightedPlanId="plan-id"
  	billingCountryCode="DK" // must be in the ISO-3166-1 format
    onPlanSelected={({ plan, customer }) => {
      // Handle customer intention to subscribe to plan
    }}
  />
  ```
</CodeGroup>

<img src="https://mintcdn.com/stigg/tWlJkHU9GfoKBEmJ/images/docs/5b03c36-Screenshot_2023-09-12_at_3.28.43.png?fit=max&auto=format&n=tWlJkHU9GfoKBEmJ&q=85&s=60fbd9f77b30bd868237b5ea0cd85d84" alt="" width="3804" height="1754" data-path="images/docs/5b03c36-Screenshot_2023-09-12_at_3.28.43.png" />

### Customer portal

<CodeGroup>
  ```typescript React theme={null}
  // Implement your own logic to resolve billingCountryCode for customers who have never subscribed to a paid plan.

  <CustomerPortal
  	paywallComponent={
      <Paywall
      billingCountryCode="DK" // must be in the ISO-3166-1 format
      onPlanSelected={({ plan, customer }) => {
        // Handle customer intention to subscribe to plan
      }}
      />
    }
  />
  ```
</CodeGroup>

<img src="https://mintcdn.com/stigg/FdQMosJ2Bzlx8vcI/images/docs/6b28e82-Screenshot_2023-09-12_at_3.39.46.png?fit=max&auto=format&n=FdQMosJ2Bzlx8vcI&q=85&s=12ebac90754a112362fd0ac70bfcddb4" alt="" width="1986" height="824" data-path="images/docs/6b28e82-Screenshot_2023-09-12_at_3.39.46.png" />

<img src="https://mintcdn.com/stigg/FdQMosJ2Bzlx8vcI/images/docs/6a9ba07-Screenshot_2023-09-12_at_3.39.19.png?fit=max&auto=format&n=FdQMosJ2Bzlx8vcI&q=85&s=ee54c7fd54e111de9c76ea99713dfe12" alt="" width="1992" height="1438" data-path="images/docs/6a9ba07-Screenshot_2023-09-12_at_3.39.19.png" />

### Checkout

<CodeGroup>
  ```typescript React theme={null}
  // Implement your own logic to resolve billingCountryCode for customers who have never subscribed to a paid plan.

  <Checkout
          planId={"revvenu-essentials"}
          onCheckoutCompleted={({ success, error }) => {
            // TODO: handle checkout completion
          }}
          billingCountryCode={"DK"} // must be in the ISO-3166-1 format
        />
  ```
</CodeGroup>

<img src="https://mintcdn.com/stigg/vKl0Sj1YLcCT0yUv/images/docs/3c9017c-Screenshot_2023-09-12_at_3.36.49.png?fit=max&auto=format&n=vKl0Sj1YLcCT0yUv&q=85&s=847e306984c12cef18f8841bca3c8a4c" alt="" width="1770" height="1290" data-path="images/docs/3c9017c-Screenshot_2023-09-12_at_3.36.49.png" />

## Provisioning subscriptions with localized pricing

<CodeGroup>
  ```javascript Node.js theme={null}
  // Implement your own logic to resolve billingCountryCode (e.g. GeoIP, billing address, or customer onboarding preference).
  // Stigg does not determine this automatically.

  const subscription = await stiggClient.provisionSubscription({  
      customerId: "customer-demo-01",  
      planId: "plan-basic",
      unitQuantity: 2,								// optional, required for subscriptions with per-unit pricing  
      billingPeriod: "MONTHLY", 				// optional, relevant only for paid subscriptions  
      addons: [{  										// optional
          addonId: "addon-10-campaigns",  
          quantity: 1,  
      }],  
      billingCountryCode: "DK",     		// must be in the ISO-3166-1 format
      awaitPaymentConfirmation: true,
      ...
  });
  ```
</CodeGroup>

## Additional resources

<Card title="Integrate Stigg into Your Codebase" icon="code" href="/api-and-sdks/integration/overview" horizontal />
