As you can see on my website here, I have a working paypal button that accepts payments when I buy on sandbox (You can test it yourself with the email: hyunsupply@armyspy.com and password: Hyuntest), but what I want to also send a email to myself (or the owner of the website) of the size and color so I can know what to manufacture or send. How can I use javascript to check what's the color (radio button) and size of the windbreaker (list with css and javascript that makes it look like a dropdown) and send a email with that info and preferably the order id or address (or some way I can know which order is which). I tried to use if along with answers I found online but the alert doesn't show up to test that the if works. I have worked with php before and I know how to make php send a email with variables and stuff but I don't know how I would approach this with javascript or if theres a way to do this paypal stuff in 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>
Why don't you append the color and the size of the item in the body in this call?
return fetch('/paypal-transaction-complete', {
method: 'post',
body: JSON.stringify({
orderID: data.orderID
})
});
You onApprove function changes to:
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
})
});
});
}