Как вы можете видеть на моем сайте здесь , у меня есть работающая кнопка PayPal, которая принимает платежи, когда я покупаю в песочнице (Вы можете проверить это самостоятельно по электронной почте: hyunsupply@armyspy.com и пароль: Hyuntest ), но я также хочу отправить мне (или владельцу веб-сайта) электронное письмо с указанием размера и цвета, чтобы я мог знать, что изготовить или отправить. Как я могу использовать javascript, чтобы проверить цвет (переключатель) и размер ветровки (список с css и javascript, который делает его похожим на выпадающий список) и отправить электронное письмо с этой информацией и, желательно, идентификатором заказа или адресом (или некоторыми как я могу узнать, какой порядок какой). Я пытался использовать if вместе с ответами, которые нашел в Интернете, но предупреждение не показывалось, чтобы проверить, работает ли if. Я работал с php раньше и знаю, как заставить php отправлять электронное письмо с переменными и прочим, но я не знаю, как бы я подошел к этому с помощью javascript или есть ли способ сделать это с PayPal в php.
<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>