@v7-pay/react

React checkout components for V7 Pay. Uses @v7-pay/sdk for card tokenization (PCI-safe).

Installation

npm install @v7-pay/react @v7-pay/sdk

Requires React 18+, Tailwind CSS (for styling), and Sonner (for toasts).

Usage

Checkout (full checkout UI)

import { Checkout } from "@v7-pay/react";

// Pass config from your server (e.g. getCheckoutConfig)
<Checkout
  sessionId={config.sessionId}
  sellerId={config.sellerId}
  amount={config.amount}
  currency={config.currency}
  description={config.description}
  minInstallments={config.minInstallments}
  maxInstallments={config.maxInstallments}
  planInterval={config.planInterval}
  seller={config.seller}
  settings={config.settings}
  baseUrl="" // optional, defaults to same-origin
  turnstileSiteKey={process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY ?? ""}
/>

CheckoutForm (form only)

import { CheckoutForm } from "@v7-pay/react";

<CheckoutForm
  sessionId="..."
  sellerId="..."
  amount={9990}
  currency="BRL"
  onSuccess={() => {}}
  baseUrl="" // optional
  turnstileSiteKey="..."
/>

Props

| Prop | Type | Description | |------|------|-------------| | baseUrl | string | API base URL. Default "" for same-origin. Use full URL when embedding in another domain. | | turnstileSiteKey | string | Cloudflare Turnstile site key (optional). When provided, Turnstile is shown on contact step. | | preview | boolean | Preview mode (no API calls, fake data). | | logoUrl | string | Logo URL for the form header. |

Host app setup

1. Add Sonner's <Toaster /> to your layout (for error/success toasts).
2. Ensure Tailwind CSS scans the package: add packages/v7-pay-react to your Tailwind content (or the package is bundled with class names).
3. For Next.js: the package exports client components; use in Server Components by importing — Next.js will treat the import as a client boundary.