Skip to main content

UI Embedding

Instead of redirecting a customer to our hosted checkout page, you can embed our UI directly through an iframe that auto-resizes.

With a Payment Intent​

Use case: you've created a payment intent in your back-end, specifically for each gateway. This is typically the case when you want to process

checkout.html
<html>
    <head>
        <script src="https://api-staging.orchestrapay.com/js" 
            type="text/javascript"></script>
    </head>
    <body>
        <div>
            <h1>Pay Now</h1>
            <p>With a Credit Card:</p>
             <iframe class="orchestrapay-wrapper"
                    data-payment-intent="{PAYMENT_INTENT_PAYSTACK}">
                    </iframe>
             <p>With Souhoola:</p>
             <iframe class="orchestrapay-wrapper" 
                    data-payment-intent="{PAYMENT_INTENT_SOUHOOLA}">
                    </iframe>
        </div>
    </body>
</html>

With a Checkout Intent​

Use case: you have only a single checkout intent and don't want to create a gateway-specific payment intent for each gateway.

checkout.html
<html>
    <head>
        <script src="https://api-staging.orchestrapay.com/js" 
            type="text/javascript"></script>
    </head>
    <body>
        <div>
            <h1>Pay Now</h1>
            <p>With a Credit Card:</p>
             <iframe class="orchestrapay-wrapper"
                data-gateway="paystack@cards" 
                data-checkout-intent="{YOUR_CHECKOUT_ID}"></iframe>
             <p>With Souhoola:</p>
             <iframe class="orchestrapay-wrapper" 
                data-gateway="souhoola" 
                data-checkout-intent="{YOUR_CHECKOUT_ID}"></iframe>
        </div>
    </body>
</html>