3
Displaying the Checkout

After creating a checkout session, you can present the payment page to your customer in two ways:

Redirect Flow

Redirect users to SaligPay hosted checkout for the fastest and safest path.

JavaScript
function openCheckout(checkoutUrl) {
  window.location.assign(checkoutUrl);
}

Embedded iFrame

Embed checkout inside your app when you need users to stay on your domain.

React
<iframe
  src={checkoutUrl}
  title="SaligPay Checkout"
  className="w-full h-[680px] border rounded"
  sandbox="allow-scripts allow-forms allow-same-origin allow-popups"
/>

Recommended: Use redirect checkout first; it has fewer browser compatibility issues.

Browser policy: Some mobile browsers can block third-party cookies inside iframes.

Toggle Between Redirect and iFrame

You can also provide users with a choice between redirect and iFrame:

Toggle Implementation
import { useState } from "react";

function CheckoutComponent({ checkoutUrl }) {
  const [useIframe, setUseIframe] = useState(false);
  
  return (
    <div>
      <div className="toggle-container mb-4">
        <label htmlFor="iframe-toggle" className="mr-2">
          Display in page
        </label>
        <input
          type="checkbox"
          id="iframe-toggle"
          checked={useIframe}
          onChange={() => setUseIframe(!useIframe)}
        />
      </div>
      
      {useIframe ? (
        <div className="h-96 w-full border rounded overflow-hidden">
          <iframe
            src={checkoutUrl}
            className="w-full h-full"
            title="SaligPay Checkout"
            sandbox="allow-scripts allow-forms allow-same-origin allow-popups"
          ></iframe>
        </div>
      ) : (
        <a
          href={checkoutUrl}
          className="button"
          target="_blank"
          rel="noopener noreferrer"
        >
          Proceed to Checkout
        </a>
      )}
    </div>
  );
}

Important: Always test both approaches across different browsers and devices to ensure compatibility. Mobile browsers especially may handle iFrames differently than desktop browsers.