parityedge on npm

'use client';

import React from 'react';
import { ParityProvider, useParityEdge, ParityBanner } from 'parityedge/react';

// Wrap your app (or layout) with ParityProvider — one fetch for the whole tree
export function App() {
  return (
    <ParityProvider projectId="prj_live_your_project_id">
      <PricingSection />
    </ParityProvider>
  );
}

export function PricingSection() {
  const { data, loading, error } = useParityEdge();

  if (loading) return <div>Checking localized rates...</div>;
  if (error) console.warn('[ParityEdge] lookup failed, showing default price');

  const basePrice = 49;
  const discountedPrice = data?.eligible
    ? (basePrice * (1 - data.discountPercentage / 100)).toFixed(2)
    : basePrice.toFixed(2);

  return (
    <div>
      <h2 className="text-xl font-bold">Standard Plan</h2>
      <p className="text-2xl font-bold">${discountedPrice} USD</p>

      {/* SDK auto-mutates checkout links — no manual coupon needed */}
      <a href="https://buy.stripe.com/example_checkout">
        Purchase with Regional Discount
      </a>
    </div>
  );
}

// Or drop in ParityBanner standalone — it handles its own fetch, no Provider needed
export function StandalonePage() {
  return (
    <div>
      <ParityBanner projectId="prj_live_your_project_id" theme="dark" position="bottom-pill" />
      <h2>Pro Plan — $49</h2>
    </div>
  );
}

import { initParityEdge } from 'parityedge';

// Initialize and automatically mount banner + mutate prices
const client = await initParityEdge({
  projectId: 'prj_live_your_project_id',
  banner: true,
  bannerPosition: 'bottom-pill', // 'bottom-pill' | 'top-bar' | 'modal'
  bannerTheme: 'dark',           // 'dark' | 'light' | 'glassmorphic'
  autoApplyCoupon: true,         // Prefills Stripe & Lemon Squeezy links
  mutatePrices: true,            // Rewrites [data-parity-base] elements
});

const data = client.getData();
if (data?.eligible) {
  console.log(`Applied ${data.discountPercentage}% discount for ${data.countryName}`);
}