Skip to main content

UI Embedding

Instead of redirecting a customer to our hosted checkout page, you can embed our UI directly in your app. A single payment intent covers every gateway you connected, so you only ever pass one pi_... value.

For React apps, use @orchestrapay/react. It renders the form, handles resizing, and exposes success and failure callbacks:

import { PaymentForm } from "@orchestrapay/react";

<PaymentForm
  publicKey="orch_pk_live_eu1_..."
  paymentIntent="pi_eu1_..."
  onPaymentSuccess={() => {}}
  onPaymentFailure={(err) => {}}
/>;

See UI Styling to match it to your brand.

Vanilla JS​

If you are not on React, drop in the script and an auto-resizing iframe. Pass the payment intent you created on your server:

checkout.html
<html>
  <head>
    <script src="https://pay.orchestrapay.com/orchestrapay.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>Pay Now</h1>
    <iframe class="orchestrapay-wrapper" data-payment-intent="pi_eu1_..."></iframe>
  </body>
</html>