Build an embedded checkout
Mount the Payment Component and connect its token callback to your order backend.
Before you start
Install @nmipayments/nmi-pay-react. Have a sandbox public tokenization key, an authenticated order route, and a server-owned order amount. online
Mount the component
Pass submitPayment as your application helper. It must call your backend and return success only after the backend confirms approval. import { NmiPayments } from '@nmipayments/nmi-pay-react'; export function Checkout({ publicKey, orderId, submitPayment }) { return <NmiPayments paymentMethods={['card']} tokenizationKey={publicKey} onPay={async ({ token }) => { try { const result = await submitPayment({ orderId, paymentToken: token }); return result.success === true ? true : 'Payment was not confirmed. Check the order status.'; } catch { return 'We could not confirm the payment. Check the order before retrying.'; } }} />; }
Complete the server boundary
Keep the private key on the server. Look up the order and merchant from trusted application context; do not accept a browser-supplied amount. Receive the fresh token with the order identifier. Submit the server-calculated sale. Persist the gateway ID before displaying the confirmed result.
Check the result
Test an approval, a rejected input, and an interrupted response. Token creation alone must never mark the order paid. Follow the backend implementation