Paypal Button Not Working
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I had created a smart button via Paypal's Smart Payment Buttons. It generated the following code:
<div id="smart-button-container">
<div style="text-align: center;">
<div style="margin-bottom: 1.25rem;">
<p>Yearbook Advertising Size</p>
<select id="item-options"><option value="Card Ad " price="120.00">Card Ad - 120.00 CAD</option><option value="1/4 Page Ad" price="230">1/4 Page Ad - 230 CAD</option><option value="1/2 Page Ad" price="430">1/2 Page Ad - 430 CAD</option><option value="Full Page Ad" price="750">Full Page Ad - 750 CAD</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=CAD" 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 = 'Yearbook Advertising Size';
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) ? 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: 'CAD',
value: priceTotal,
breakdown: {
item_total: {
currency_code: 'CAD',
value: itemTotalValue,
},
shipping: {
currency_code: 'CAD',
value: shipping,
},
tax_total: {
currency_code: 'CAD',
value: tax,
}
}
},
items: [{
name: selectedItemDescription,
unit_amount: {
currency_code: 'CAD',
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>
My customers can see the button and enter their information but everytime they click Pay Now it cycles them back to the original page and does not process their information.
Please help!

Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
- "System error. Please try again later" when connecting to paypal sandbox account with my android app in Sandbox Environment
- Things don’t appear to be working at the moment in PayPal Payments Standard
- Something went wrong. Contact the merchant for help. in PayPal Payments Standard
- p is not a function error using the example downloaded from Paypal in SDKs
- How to prompt a "thank you" after using donate button on a website in PayPal Payments Standard