如何使用javascript检查风衣的颜色和大小,并在paypal批准付款时发送电子邮件

问题描述 投票:0回答:1

正如你在我的网站here上看到的,我有一个工作的paypal按钮,当我在沙盒上购买时接受付款(你可以用电子邮件自己测试:[email protected]和密码:Hyuntest),但我想要的也是发送电子邮件给我自己(或网站的所有者)的大小和颜色,以便我知道制造或发送什么。如何使用javascript检查风衣的颜色(单选按钮)和大小(css和javascript列表使其看起来像下拉列表)并发送包含该信息的电子邮件,最好是订单ID或地址(或者一些我可以知道哪个顺序是哪个)。我尝试使用如果我在网上找到的答案,但警报并没有出现,以测试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>
javascript php html paypal paypal-sandbox
1个回答
0
投票

为什么不在此通话中追加物品的颜色和尺寸?

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
      })
    });
  });
}
© www.soinside.com 2019 - 2024. All rights reserved.