React Components

All components must be rendered inside a GoPayLocalProvider. They automatically read PPP data from context.

PPPBanner

Renders a discount banner with the visitor’s PPP information. Renders nothing if no discount is available.

import { GoPayLocalProvider, PPPBanner } from '@gopaylocal/react';

function App() {
  return (
    <GoPayLocalProvider apiKey="gpl_pk_live_abc123">
      <PPPBanner position="bottom-right" />
      <PricingPage />
    </GoPayLocalProvider>
  );
}

Props

Prop	Type	Default	Description
position	'top' | 'bottom' | 'bottom-left' | 'bottom-right'	API config value or 'bottom-right'	Banner position
backgroundColor	string	API config value	Banner background color
fontColor	string	API config value	Banner text color
borderRadius	string	'8px' for floating	CSS border radius
fontSize	string	'14px'	CSS font size
showCloseIcon	boolean	true	Whether to show the close button
noStyles	boolean	false	Render without default styles (for custom styling)
className	string	—	Additional CSS class name
onClose	() => void	—	Callback when dismissed

Unstyled Mode

Use noStyles to render the banner with data attributes instead of inline styles, so you can style it with your own CSS:

<PPPBanner noStyles className="my-banner" />

The unstyled version renders with these data attributes:

• data-gopaylocal-banner — root element
• data-gopaylocal-flag — flag emoji
• data-gopaylocal-message — message text
• data-gopaylocal-cta — CTA button
• data-gopaylocal-close — close button

---

PPPPrice

The simplest price component. Renders the localized, discounted price as a single formatted string.

import { PPPPrice } from '@gopaylocal/react';

<PPPPrice price={99.99} />
// India: "₹4,999"
// US: "$99.99"
// Germany: "€92.99"

Props

Prop	Type	Default	Description
price	number	(required)	Base price in your default currency
localize	boolean	true	Convert to visitor’s local currency
showDecimal	boolean	—	Whether to show decimal digits
currencyDisplay	'symbol' | 'code' | 'name'	'symbol'	How to display the currency
className	string	—	CSS class name

Currency Display

<PPPPrice price={99.99} currencyDisplay="symbol" />  // "₹4,999"
<PPPPrice price={99.99} currencyDisplay="code" />     // "INR 4,999"
<PPPPrice price={99.99} currencyDisplay="name" />     // "4,999 Indian rupees"

---

PPPPriceFormatted

Like PPPPrice but with advanced formatting options, including the ability to show the original (pre-discount) price for strikethrough displays.

import { PPPPriceFormatted } from '@gopaylocal/react';

<div>
  <s><PPPPriceFormatted price={99.99} isOriginalDisplay /></s>
  {' '}
  <PPPPriceFormatted price={99.99} />
</div>
// Renders: <s>₹7,499</s> ₹4,999

Props

Prop	Type	Default	Description
price	number	(required)	Base price
isOriginalDisplay	boolean	false	Show the original (non-discounted) price
localize	boolean	true	Convert to local currency
showDecimal	boolean	—	Whether to show decimals
minimumDecimalDigits	number	—	Minimum decimal digits
maximumDecimalDigits	number	—	Maximum decimal digits
currencyDisplay	'symbol' | 'code' | 'name'	'symbol'	Currency display mode
className	string	—	CSS class name

---

PPPPriceInteger

Renders only the integer part of the localized price. Use with PPPPriceDecimal and PPPCurrencySymbol for custom price layouts.

import { PPPPriceInteger, PPPPriceDecimal, PPPCurrencySymbol } from '@gopaylocal/react';

<span className="price">
  <PPPCurrencySymbol />
  <PPPPriceInteger price={99.99} />
  <sup>
    .<PPPPriceDecimal price={99.99} />
  </sup>
</span>
// Renders: ₹4,999<sup>.00</sup>

Props

Prop	Type	Default	Description
price	number	(required)	Base price
localize	boolean	true	Convert to local currency
className	string	—	CSS class name

---

PPPPriceDecimal

Renders only the decimal part of the localized price. Returns null if there is no decimal portion.

import { PPPPriceDecimal } from '@gopaylocal/react';

<PPPPriceDecimal price={99.99} />
// Renders: "99" (or null for zero-decimal currencies like JPY)

Props

Prop	Type	Default	Description
price	number	(required)	Base price
localize	boolean	true	Convert to local currency
minimumDecimalDigits	number	—	Minimum decimal digits
maximumDecimalDigits	number	—	Maximum decimal digits
className	string	—	CSS class name

---

PPPCurrencySymbol

Renders the visitor’s local currency symbol.

import { PPPCurrencySymbol } from '@gopaylocal/react';

<PPPCurrencySymbol />
// India: "₹"
// US: "$"
// Japan: "¥"
// EU: "€"

Props

Prop	Type	Default	Description
className	string	—	CSS class name

---

PPPCurrencyCode

Renders the visitor’s local currency code (ISO 4217).

import { PPPCurrencyCode } from '@gopaylocal/react';

<PPPCurrencyCode />
// India: "INR"
// US: "USD"
// Japan: "JPY"

Props

Prop	Type	Default	Description
className	string	—	CSS class name

---

Building a Custom Price Display

Combine the granular components for full control:

import {
  PPPCurrencySymbol,
  PPPPriceInteger,
  PPPPriceDecimal,
  PPPPriceFormatted,
  usePPP,
} from '@gopaylocal/react';

function CustomPrice({ price }: { price: number }) {
  const { hasDiscount } = usePPP();

  return (
    <div className="price-display">
      {hasDiscount && (
        <s className="original-price">
          <PPPPriceFormatted price={price} isOriginalDisplay />
        </s>
      )}
      <span className="current-price">
        <PPPCurrencySymbol />
        <span className="price-integer">
          <PPPPriceInteger price={price} />
        </span>
        <sup className="price-decimal">
          .<PPPPriceDecimal price={price} />
        </sup>
      </span>
    </div>
  );
}

Tip

All components are memoized with React.memo for optimal performance. They only re-render when their props or the PPP context changes.