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.

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.

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.

Visibility for localized prices in your public pricing page

React

// 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
  }}
/>

Visibility for localized prices in your in your application

In-app paywall

React

// 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
  }}
/>

Customer portal

React

// 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
    }}
    />
  }
/>

Checkout

React

// 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
      />

Provisioning subscriptions with localized pricing

Node.js

// 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,
    ...
});

Additional resources

Integrate Stigg into Your Codebase