#javascript #php #html #paypal #paypal-sandbox
#javascript #php #HTML #paypal #paypal-песочница
Вопрос:
Как вы можете видеть на моем веб-сайте здесь, у меня есть работающая кнопка PayPal, которая принимает платежи при покупке в sandbox (вы можете проверить это самостоятельно с помощью электронного письма: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>
Комментарии:
1. Вы действительно поделились своим настоящим паролем?
2. @RopAliMunshi нет, это только учетная запись в изолированной среде, что означает, что я могу удалить ее в любое время. Кроме того, прямо сейчас веб-сайт работает в изолированной среде, поэтому вы не можете ничего купить / оплатить (это предназначено только для тестирования). У него около 500000 фальшивых долларов, просто чтобы протестировать платежную систему, не волнуйтесь, ха-ха
3. Вы можете с помощью ajax отправить подробную информацию о заказе, такую как (размер, цвет, электронная почта, адрес), а затем
$_POSTвсе данные и обработать их (вставить в вашу базу данных или направить вам электронное письмо). Вы можете отправить электронное письмо с помощью mail из php или с помощью phpmailer.
Ответ №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
})
});
});
}
Комментарии:
1. Извините, я все еще новичок в javascript, и я получил свой код из документов paypal, поэтому я не уверен во всем этом. Первый вопрос заключается в том, что мне указать вместо <ЗНАЧЕНИЕ ЦВЕТА> и <РАЗМЕР>. Я полагаю, что у меня есть переменные, которые меняются в зависимости от того, какой цвет / размер я выбираю. Кроме того, что все это позволяет мне делать? Он автоматически отправляет его в мою панель управления PayPal или что-то в этом роде. Извините, если я новичок и все это звучит очевидно.
2. Вся ваша
onApproveфункция в основном проверяет размер и цвет и оповещает об этом клиента. Я обновлю свой ответ, включив значения для <ЗНАЧЕНИЕ ЦВЕТА> и <РАЗМЕР>3. @TahaInc, я обновил свой ответ, чтобы получить эти значения и отправить его в запросе. Дайте мне знать, если у вас все еще есть какие-либо вопросы.
4. Итак, я попробовал это, и цвет работает нормально, но, к сожалению, размер регистрируется как неопределенный. Я попробовал это оповещение, чтобы увидеть значения переменных:
alert('Its the ' color ' and ' size ' and ' data.orderID ' windbreaker');но размер отображается как неопределенный. Вот [изображение ошибки] ( i.imgur.com/MYmHDRr.png )