qingqu-git
/
de-net


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            html,
            body,
            iframe{
                margin: 0;
                border: 0;
                padding: 0;
                display: block;
                height: 100%;
                width: 100%;
                background: white;
                color: black;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <!-- Include the PayPal JavaScript SDK; replace "test" with your own sandbox Business account app client ID -->
        <!-- Set up a container element for the button -->
        <div id="paypal-button-container"></div>
        <script>
            let isDOMContentLoaded = false;
            let isOnMessage = false;
            document.addEventListener("DOMContentLoaded", function () {
                isDOMContentLoaded = true;
            })
            function loadAsyncScript(src, callback = function () {}) { // 同步加载js
                const head = document.getElementsByTagName('head')[0];
                const script = document.createElement('script');
                script.setAttribute('type', 'text/javascript');
                script.setAttribute('src', src);
                script.setAttribute('async', true);
                script.setAttribute('defer', true);
                head.appendChild(script);
        
                if (script.readyState) { // ie
                    script.onreadystatechange = function () {
                        var state = this.readyState;
                        if (state === 'loaded' || state === 'complete') {
                            callback();
                        }
                    }
                } else {
                    script.onload = function () {
                        callback();
                    }
                }
            }

            function getQueryString(name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                let r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return decodeURIComponent(r[2]);
                };
                return null;
            }
            let paypalClientId = getQueryString('paypalClientId');
            let src = `https://www.paypal.com/sdk/js?client-id=${paypalClientId}&currency=USD`;
            loadAsyncScript(src, () => {
                if(isDOMContentLoaded) {
                    loadPaypal();
                } else {
                    document.addEventListener("DOMContentLoaded", function () {
                        isDOMContentLoaded = true;
                        if(!isOnMessage) {
                            loadPaypal()
                        }
                    })
                    setTimeout(() => {
                        if(!isOnMessage) {
                            loadPaypal()
                        }
                    }, 600)
                }
            })

            function loadPaypal() {
                let amount = getQueryString('amount');
                isOnMessage = true;
                window.parent.postMessage({ actionType: "iframeLoaded" }, "*");
                // window.addEventListener("message", function (event) {
                //     if (event.data && event.data.actionType) {
                //         switch (event.data.actionType) {
                //             case "setAmount":
                //                 amount = event.data.amount;
                                initPaypal(amount);
                //                 break;
                //             }
                //     }
                // });
            }

            function initPaypal(amount) {
                let dom = document.getElementById('paypal-button-container');
                if(dom.children && dom.children.length) {
                    empty(dom)
                }
                paypal
                    .Buttons({
                        style: {
                            layout: 'horizontal',
                            color:  'blue',
                            shape:  'pill',
                            tagline: false,
                            height: 48
                        },
                        // Sets up the transaction when a payment button is clicked
                        createOrder: function (data, actions) {
                            return actions.order.create({
                                purchase_units: [
                                    {
                                        amount: {
                                            value: amount, // Can reference variables or functions. Example: `value: document.getElementById('...').value`
                                        },
                                    },
                                ],
                            });
                        },

                        // Finalize the transaction after payer approval
                        onApprove: function (data, actions) {
                            return actions.order
                                .capture()
                                .then(function (orderData) {
                                    // Successful capture! For dev/demo purposes:
                                    console.log(
                                        "Capture result",
                                        orderData,
                                        JSON.stringify(orderData, null, 2)
                                    );
                                    var transaction =
                                        orderData.purchase_units[0].payments
                                            .captures[0];
                                    window.parent.postMessage(
                                        {
                                            actionType: "payCallBack",
                                            orderData: orderData,
                                            transaction: transaction,
                                        },
                                        "*"
                                    );
                                    // When ready to go live, remove the alert and show a success message within this page. For example:
                                    // var element = document.getElementById('paypal-button-container');
                                    // element.innerHTML = '';
                                    // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                                    // Or go to another URL:  actions.redirect('thank_you.html');
                                });
                        },
                    })
                    .render("#paypal-button-container");
            }
            function empty (e) {
                while (e.firstChild) {
                    e.removeChild (e.firstChild);
                }
            }
        </script>
    </body>
</html>