@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).