Embed using an iframe

Using an iframe for embedding poses security risks and is vulnerable to spoofing attacks, which could result in buyers losing both their payment and goods. This approach is not recommended.

In addition to security concerns, iframes also have functional limitations. For example, navigation is confined within the iframe, and post-payment redirects also occur inside the iframe.

Step:

<iframe 
    id="pay-frame-container"
    src="https://pay.tradpay.io/embed/preload"
    title="TradPay"                      
    sandbox="allow-scripts allow-forms"
    frameborder="0"
    allowfullscreen>
</iframe>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const iframe = document.getElementById("pay-frame-container");
        iframe.onload = function() {
            iframe.contentWindow.postMessage({ 
                    type: 'TX_VERIFICATION',
                    origin: window.location.origin ?? window.location.href,
                    code: 'SXnGtf5QFloymCKVpwUcYcF5' // Your checkout code
                },
                'https://pay.tradpay.io'
            );
        };

        // Listener
        window.addEventListener("message", function(event) {
            if (event.origin === "https://pay.tradpay.io" && event.data.type === 'RESET_IFRAME') {
                iframe.src = event.data.url;
            }
        });

    });
</script>

If you choose to use the iframe, you must provide your current domain name; otherwise, the payment page will be inaccessible.