3
Displaying the Checkout

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

Option 1: Redirect to Checkout URL

Redirect the customer to the SaligPay checkout page. This is the simplest approach:

Redirect Approach
// In your React component
return (
  <a 
    href={checkoutResponse.checkoutUrl}
    className="button"
    target="_blank"
    rel="noopener noreferrer"
  >
    Proceed to Checkout
  </a>
);

Option 2: Embed Checkout in an iFrame

Embed the SaligPay checkout directly in your application using an iframe:

iFrame Approach
// In your React component
return (
  <div className="iframe-container" style={{ height: "600px", width: "100%" }}>
    <iframe
      src={checkoutResponse.checkoutUrl}
      title="SaligPay Checkout"
      className="w-full h-full"
      sandbox="allow-scripts allow-forms allow-same-origin allow-popups"
    ></iframe>
  </div>
);

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>
  );
}

Note: When using iFrames, ensure proper sandbox attributes are set for security. The embedded checkout must be served over HTTPS and may require additional configuration for certain payment methods.

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

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.