如何使用javascript查看风衣的颜色和尺寸，并在paypal批准付款后发送邮件

Question

正如您在我的网站 here 上看到的那样，当我在沙盒上购买时，我有一个可以接受付款的有效 paypal 按钮（您可以通过电子邮件自行测试：hyunsupply@armyspy.com and password: Hyuntest), 不过我要的是尺寸和颜色也发邮件给自己（或者网站主）所以我可以知道制造或发送什么。我如何使用 javascript 检查风衣的颜色（单选按钮）和尺寸（使用 css 和 javascript 列出，使其看起来像一个下拉列表）并发送电子邮件该信息，最好是订单 ID 或地址（或者我可以通过某种方式知道哪个订单是哪个）。我尝试将 if 与我在网上找到的答案一起使用，但未显示警报以测试 if 是否有效。我之前曾与 php 合作过，我知道如何让 php 发送一封包含变量和内容的电子邮件，但我不知道如何使用 javascript 来处理这个问题，或者是否有办法在 php.

中执行此 paypal 操作

<main>
    <table>
        <tr>
            <th style="width: 60%;">
                <div class="product-photo">
                    <img class="small" style="z-index: 1;" src="images/Windbreaker_white (Back).png">
                    <img class="big" style="z-index: 2;" src="images/Windbreaker_white (Front).png">
                </div>
            </th>
            <th style="padding: 0px 100px 0px 0px;">
                <div style="right: 10%;">
                    <img class="Script_text" src="images/Script_text.png" style="margin: 0px 0px 30px 0px;">
                    <div class="wrap-drop" id="noble-gases" align="left" style="z-index: 101; border-radius: 5px;">
                        <span class="size">Select your size</span>
                        <ul class="drop">
                            <li>X-Small</li>
                            <li>Small</li>
                            <li>Medium</li>
                            <li>Large</li>
                            <li>X-Large</li>
                            <li>XX-Large</li>
                        </ul>
                    </div>
                    <div align="right">
                        <ul class="product-color" style="z-index: 100;">
                            <li>
                                <input type="radio" name="color" id="black" style="z-index: 100;" />
                                <label for="black" style="background-color:rgb(22, 22, 22); z-index: 100;"></label>
                            </li>
                            <li>
                                <input type="radio" name="color" id="white" style="z-index: 100;" checked="checked" />
                                <label for="white" style="background-color:rgb(196, 196, 196); z-index: 100;"></label>
                            </li>
                        </ul>
                    </div>
                    <div id="paypal-button-container" style="padding: 20px 0px 0px 0px"></div>

                    <script>
                        paypal.Buttons({
                            createOrder: function (data, actions) {
                                return actions.order.create({
                                    purchase_units: [{
                                        amount: {
                                            value: '70.00'
                                        }
                                    }]
                                });
                            },

                            onApprove: function (data, actions) {
                                return actions.order.capture().then(function (details) {
                                    var BlackCheckbox = document.getElementById("black");

                                    if (BlackCheckbox.checked == true) {
                                        if ($('.size').find('span:contains("X-Small")').length !=
                                            0) {
                                            alert('Its the extra small black windbreaker');
                                        } else if ($('.size').find('span:contains("Small")').length !=
                                            0) {
                                            alert('Its the small black windbreaker');
                                        } else if ($('.size').find('span:contains("Medium")').length !=
                                            0) {
                                            alert('Its the medium black windbreaker');
                                        } else if ($('.size').find('span:contains("Large")').length !=
                                            0) {
                                            alert('Its the large black windbreaker');
                                        } else if ($('.size').find('span:contains("X-Large")').length !=
                                            0) {
                                            alert('Its the extra large black windbreaker');
                                        } else if ($('.size').find('span:contains("XX-Large")')
                                            .length != 0) {
                                            alert(
                                                'Its the double extra large black windbreaker'
                                            );
                                        }
                                    } else {
                                        if ($('.size').find('span:contains("X-Small")').length !=
                                            0) {
                                            alert('Its the extra small white windbreaker');
                                        } else if ($('.size').find('span:contains("Small")').length !=
                                            0) {
                                            alert('Its the small white windbreaker');
                                        } else if ($('.size').find('span:contains("Medium")').length !=
                                            0) {
                                            alert('Its the medium white windbreaker');
                                        } else if ($('.size').find('span:contains("Large")').length !=
                                            0) {
                                            alert('Its the large white windbreaker');
                                        } else if ($('.size').find('span:contains("X-Large")').length !=
                                            0) {
                                            alert('Its the extra large white windbreaker');
                                        } else if ($('.size').find('span:contains("XX-Large")')
                                            .length != 0) {
                                            alert(
                                                'Its the double extra large white windbreaker'
                                            );
                                        }
                                    }

                                    //alert('Transaction completed by ' + details.payer.name.given_name);
                                    return fetch('/paypal-transaction-complete', {
                                        method: 'post',
                                        body: JSON.stringify({
                                            orderID: data.orderID
                                        })
                                    });
                                });
                            },
                            style: {
                                color: 'white',
                                layout: 'horizontal',
                                shape: 'rect',
                                label: 'pay',
                                height: 55
                            },

                        }).render('#paypal-button-container');
                    </script>

                    <script type="text/javascript">
                        PAYPAL_CLIENT = 'PAYPAL_SANDBOX_CLIENT';
                        PAYPAL_SECRET = 'PAYPAL_SANDBOX_SECRET';

                        PAYPAL_OAUTH_API = 'https://api.sandbox.paypal.com/v1/oauth2/token/';
                        PAYPAL_ORDER_API = 'https://api.sandbox.paypal.com/v2/checkout/orders/';

                        basicAuth = base64encode(`${ PAYPAL_CLIENT }:${ PAYPAL_SECRET }`);
                        auth = http.post(PAYPAL_OAUTH_API, {
                            headers: {
                                Accept: `application/json`,
                                Authorization: `Basic ${ basicAuth }`
                            },
                            data: `grant_type=client_credentials`
                        });

                        function handleRequest(request, response) {

                            orderID = request.body.orderID;

                            details = http.get(PAYPAL_ORDER_API + orderID, {
                                headers: {
                                    Accept: `application/json`,
                                    Authorization: `Bearer ${ auth.access_token }`
                                }
                            });

                            if (details.error) {
                                return response.send(500);
                            }

                            if (details.purchase_units[0].amount.value !== '5.77') {
                                return response.send(400);
                            }

                            database.saveTransaction(orderID);

                            return response.send(200);
                        }
                    </script>
                </div>
            </th>
        </tr>
    </table>

Answer 1

你为什么不在这个调用中附加正文中项目的颜色和大小？

return fetch('/paypal-transaction-complete', {
  method: 'post',
  body: JSON.stringify({
    orderID: data.orderID
  })
});

您 onApprove 函数更改为：

onApprove: function(data, actions) {
  return actions.order.capture().then(function(details) {
    var BlackCheckbox = document.getElementById("black");
    // Getting the color by checking if the checkbox `black` is checked or not
    var color = (BlackCheckbox.checked === true) ? 'black' : 'white';
    // Finding the size by seeing which size the user has selected from the dropdown.
    var size = $('span.size').text();

    //alert('Transaction completed by ' + details.payer.name.given_name);
    return fetch('/paypal-transaction-complete', {
      method: 'post',
      body: JSON.stringify({
        orderID: data.orderID,
        color: color,
        size: size
      })
    });
  });
}

如何使用javascript查看风衣的颜色和尺寸，并在paypal批准付款后发送邮件

How can I use javascript to check what's the color and size of the windbreaker and send a email when paypal approves the payment

html

javascript

php

paypal

paypal-sandbox