React SDK demo

Plug in your sandbox API keys and run a full payment flow against @quickpay/react. This page creates a checkout session for you and hands the client_secret to the React components.

Sandbox only

Only paste test keys (pk_test_... and sk_test_...). Your secret key is forwarded through a Next.js route straight to the YardPay API and is never logged, persisted, or reused. The demo refuses sk_live_ keys.

1. Configure

Renders the payment form on this page with @quickpay/react.

Starts with pk_test_. Used by the browser SDK.

Starts with sk_test_. Forwarded once to create the session — not persisted.

Decimal major units.

ISO 4217.

Optional.

Optional. Rendered as the invoice header on the receipt.

Optional. Each row becomes an InvoiceItem on the receipt. Leave empty to send the session amount as a single line.

Advanced: custom API base

Defaults to https://dev-payment-gateway.mplex.net. Override for self-hosted sandboxes.