PayPal Checkout buttons not displaying
Involute
Contributor
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Posted on
Mar-05-2021
04:50 PM
I've created the standard buttons using the Smart Button creator app and pasted the code into my site. Unfortunately, only the button description and dropdown display, none of the actual buttons (I've confirmed this in Chrome and Edge, both on Win 10 x64). How do I get them to show up? Here's a screenshot of what I'm supposed to get and what I'm getting (see the last couple of lines), followed by PayPal's code. Thanks for any tips.
<div id="smart-button-container">
<div style="text-align: center;">
<div style="margin-bottom: 1.25rem;">
<p>One MiniGo ATEM Mini Case, including:
One 10' AC power cord, one shoulder strap, one User Manual pdf, 30 day warranty.
</p>
<select id="item-options"><option value="US (via UPS Ground)" price="1036">US (via UPS Ground) - 1036 USD</option><option value="International (via USPS Priority Mail Intl.)" price="1129">International (via USPS Priority Mail Intl.) - 1129 USD</option></select>
<select style="visibility: hidden" id="quantitySelect"></select>
</div>
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=USD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
var shipping = 0;
var itemOptions = document.querySelector("#smart-button-container #item-options");
var quantity = parseInt();
var quantitySelect = document.querySelector("#smart-button-container #quantitySelect");
if (!isNaN(quantity)) {
quantitySelect.style.visibility = "visible";
}
var orderDescription = 'One MiniGo ATEM Mini Case, including:
One 10' AC power cord, one shoulder strap, one User Manual pdf, 30 day warranty.
';
if(orderDescription === '') {
orderDescription = 'Item';
}
paypal.Buttons({
style: {
shape: 'rect',
color: 'blue',
layout: 'vertical',
label: 'pay',
},
createOrder: function(data, actions) {
var selectedItemDescription = itemOptions.options[itemOptions.selectedIndex].value;
var selectedItemPrice = parseFloat(itemOptions.options[itemOptions.selectedIndex].getAttribute("price"));
var tax = (0 === 0) ? 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: 'USD',
value: priceTotal,
breakdown: {
item_total: {
currency_code: 'USD',
value: itemTotalValue,
},
shipping: {
currency_code: 'USD',
value: shipping,
},
tax_total: {
currency_code: 'USD',
value: tax,
}
}
},
items: [{
name: selectedItemDescription,
unit_amount: {
currency_code: 'USD',
value: selectedItemPrice,
},
quantity: quantity
}]
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
},
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
Labels:
- Labels:
-
PayPal Smart Connect
-
Technical Issues
0 REPLIES 0
Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
Related Content
- How Can I Make Multiple Payment Buttons (Subscription and Checkout) Work on One Page, Please? in Payments Archives
- Paypal Smart Payment checkout button not showing correctly in Payments Archives
- PAYMENT THROUGH PAYPAL ON SOUTH MISSION ONLINE in Payments Archives
- Checkout stopped working (inline checkout not loading) in Payments Archives