qingqu-git
/
de-net


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
							<!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,
            h2 {
                margin: 0;
                border: 0;
                padding: 0;
                display: block;
                height: 100%;
                width: 100%;
                background: white;
                color: black;
            }

            h2 {
                height: 50px;
                font-size: 20px;
            }
        </style>
    </head>

    <body>
        <!-- Include the PayPal JavaScript SDK; replace "test" with your own sandbox Business account app client ID -->
        <script src="https://www.paypal.com/sdk/js?client-id=ASn7k0zqyS5AWYikVSfmamR-RFpjyU_QFJWSxOHHoWE04-RgHNO6nahn0GyHUaUAEBxj-aKgtSrq4O4G&currency=USD"></script>
        <!-- Set up a container element for the button -->
        <div id="paypal-button-container"></div>
        <script>
            // let amount = window.location.search.split('=')[1];
            let amount = 0;
            document.addEventListener("DOMContentLoaded", function () {
                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];
                                    alert(
                                        "Transaction " +
                                            transaction.status +
                                            ": " +
                                            transaction.id +
                                            "\n\nSee console for all available details"
                                    );
                                    amount = 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>