Prava SDK Playground

A minimal Next.js app demonstrating the Prava SDK integration — session creation, PCI-compliant card collection via iframe, and polling for tokenized payment credentials.

Quick Start

# 1. Install dependencies
npm install

# 2. Configure environment
cp .env.example .env.local
# Then edit .env.local with your credentials

# 3. Run
npm run dev

Open http://localhost:3000.

Environment Variables

Create .env.local with:

MERCHANT_SECRET_KEY=sk_test_your_key_here
NEXT_PUBLIC_PUBLISHABLE_KEY=pk_test_your_key_here
NEXT_PUBLIC_BACKEND_URL=https://sandbox.api.prava.space

Contact support@prava.space for sandbox credentials and test card details.

Architecture

This template has 3 key files — that's the entire integration:

src/
├── app/
│   ├── actions.ts          # Server actions: create session, poll result
│   └── page.tsx            # Main page: config, checkout flow, result display
└── components/
    └── PravaCardForm.tsx   # SDK wrapper: mounts PCI iframe

How the flow works

1. actions.ts — Server-side only. Creates sessions via POST /v1/sessions using your secret key. Polls GET /v1/sessions/{id}/payment-result for completion.

2. page.tsx — Client-side orchestrator. Calls the server action to create a session, passes it to the card form, and polls for the result.

3. PravaCardForm.tsx — Thin wrapper around @prava-sdk/core. Takes a pre-created session, initializes PravaSDK, and calls sdk.collectPAN() to mount the secure iframe.

Key integration pattern

// Server: Create session (actions.ts)
const session = await createPravaSession({ userId, userEmail, amount });

// Client: Mount iframe (PravaCardForm.tsx)
const sdk = new PravaSDK({ publishableKey: PUBLISHABLE_KEY });
await sdk.collectPAN({
  sessionToken: session.session_token,
  iframeUrl: session.iframe_url,
  container: document.getElementById('card-form'),
  onReady: () => { /* iframe loaded */ },
  onSuccess: () => { /* card enrolled */ },
  onError: (err) => { /* handle error */ },
});

// Server: Poll for result (actions.ts)
const result = await pollPaymentResult(session.session_id);
// result.transactions[0].token → network token
// result.transactions[0].dynamic_cvv → one-time CVV

Two Checkout Modes

• Embed in Page — iframe mounts directly in the page
• New Tab — opens the Prava-hosted checkout in a new browser tab

Both modes poll for the payment result on the server side.

Tech Stack

• Next.js 16 (App Router + Server Actions)
• @prava-sdk/core
• Tailwind CSS 4