@orchestrapay/react

The <PaymentForm /> component embeds the checkout in a React app. These are the properties you pass to it. For the vanilla JS embed, pass the same options as kebab-cased data- attributes on the .orchestrapay-wrapper iframe (for example paymentIntent becomes data-payment-intent).

publicKeystring

Your public key (orch_pk_live_... or orch_pk_test_...). Safe to expose in the browser.

paymentIntentstring

The payment intent you created on your server (pi_...).

paymentFormoptional, string | array

A payment form id (pf_...) created in your dashboard, or an inline array of payment form groups to set the payment methods programmatically.

apiVersionoptional, string

API version the embedded form should target.

saveCardsOnFileoptional, 'never' | 'ask' | 'always'

Card storage behaviour: never store, ask the customer with a checkbox, or always store cards for future use.

styleoptional, object

Style overrides applied on top of your dashboard styling. See UI Styling for the accepted values.

onReadyoptional, function

React only. Called once the iframe has loaded, before its network calls. Receives the load time in ms.

onLoadedoptional, function

React only. Called once the form is fully loaded and ready to show. Receives the load time in ms.

onPaymentSuccessoptional, function

React only. Called when the payment succeeds. Receives { transactionId, amount, currency, ... }.

onPaymentFailureoptional, function

React only. Called when the payment fails. Receives { reason, message, ... }.

classNameoptional, string

React only. CSS class for the container element.

containerStyleoptional, object

React only. Inline styles for the container element.

scriptUrloptional, string

React only. Override the loader script URL (defaults to the production CDN).

Localize the card form

Pass locale to render the hosted card form in English, French, Arabic, Italian, or Spanish. Arabic renders right-to-left automatically. If omitted, the form follows the payment's locale (falling back to English).

<PaymentForm publicKey="pk_test_..." paymentIntent="pi_..." locale="fr" />

Trigger Pay from your own button

Sometimes you want your own "Buy now" button outside the form. Grab a ref and call submit() — it runs the exact same action as the built-in Pay button (validation, 3DS, everything).

import { useRef } from "react";
import { PaymentForm, type PaymentFormHandle } from "@orchestrapay/react";

function Checkout() {
  const formRef = useRef<PaymentFormHandle>(null);
  return (
    <>
      <PaymentForm ref={formRef} publicKey="pk_test_..." paymentIntent="pi_..." />
      <button onClick={() => formRef.current?.submit()}>Buy now</button>
    </>
  );
}

Show a single gateway for an intent

To render just one payment method for a payment intent (for example, a PayPal button on a separate page), pass an inline single-gateway paymentForm. The same payment intent can be paid through different UIs on different pages.

<PaymentForm
  publicKey="pk_test_..."
  paymentIntent="pi_..."
  paymentForm={[{ gateways: [{ gatewayName: "paypal" }] }]}
/>

You can also pin the gateway server-side when you create the intent (payment_form / orchestrator / connector on the create call), so the hosted /pay page and every embed for that intent render only the pinned gateway.