I am currently implementing a paypal checkout with the REST API for two products. One is a hardcover book which requires a shipping cost enabled at the checkout, the other is an e-book which means no shipping costs needed. The code currently reflects the shipping costs being applied to both products...
<div id="smart-button-container-1">
<div class="paypal-dropdown">
<select id="item-options-1">
<option value="Book" price="10">
Book - £10
</option>
<option value="eBook" price="6">
eBook - £6
</option>
</select>
<select style="visibility: hidden" id="quantitySelect1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
<div class="paypal-checkout" id="paypal-button-container-1"></div>
</div>
<script>
function initPayPalButton1() {
var shipping = 8;
var itemOptions = document.querySelector(
"#smart-button-container-1 #item-options-1"
);
var quantity = parseInt(20);
var quantitySelect = document.querySelector(
"#smart-button-container-1 #quantitySelect1"
);
if (!isNaN(quantity)) {
quantitySelect.style.visibility = "visible";
}
var orderDescription = "Acheter un livre ";
if (orderDescription === "") {
orderDescription = "Item";
}
paypal
.Buttons({
style: {
shape: "pill",
color: "blue",
layout: "vertical",
label: "paypal",
},
createOrder: function (data, actions) {
var selectedItemDescription =
itemOptions.options[itemOptions.selectedIndex].value;
var selectedItemPrice = parseFloat(
itemOptions.options[itemOptions.selectedIndex].getAttribute("price")
);
var tax =
0 === 0 || false ? 0 : selectedItemPrice * (parseFloat(0) / 100);
if (quantitySelect.options.length > 0) {
quantity = parseInt(
quantitySelect.options[quantitySelect.selectedIndex].value
);
} else {
quantity = 1;
}
tax *= quantity;
tax = Math.round(tax * 100) / 100;
var priceTotal =
quantity * selectedItemPrice + parseFloat(shipping) + tax;
priceTotal = Math.round(priceTotal * 100) / 100;
var itemTotalValue =
Math.round(selectedItemPrice * quantity * 100) / 100;
return actions.order.create({
purchase_units: [
{
description: orderDescription,
amount: {
currency_code: "GBP",
value: priceTotal,
breakdown: {
item_total: {
currency_code: "GBP",
value: itemTotalValue,
},
shipping: {
currency_code: "GBP",
value: shipping,
},
tax_total: {
currency_code: "GBP",
value: tax,
},
},
},
items: [
{
name: selectedItemDescription,
unit_amount: {
currency_code: "GBP",
value: selectedItemPrice,
},
quantity: quantity,
},
],
},
],
});
},
onApprove: function (data, actions) {
return actions.order.capture().then(function (orderData) {
// Full available details
console.log(
"Capture result",
orderData,
JSON.stringify(orderData, null, 2)
);
actions.redirect("thank_you_en.html");
});
},
onError: function (err) {
console.log(err);
},
})
.render("#paypal-button-container-1");
}
initPayPalButton1();
paypal
.Buttons({
onCancel: function (data) {
actions.redirect("resources_en.html");
},
})
</script>
Could anyone help with this request? Many Thanks!
