tillschumann

Site URL: https://www.suedpfalzdocs.de/veranstaltungen/herzinsuffizienz I would like to offer Paypal Plus features for our customers (eg. SEPA-Lastschrift, which is very popular in Germany). Since the standard shop integration cannot cope with Paypal Plus, I've tried adding a custom code block next to the event, so that customers can still take advantage of the Paypal plus features. You can see my integration at the bottom of the URL I've supplied above. The code I am using is from the official paypal website, so it should be flawless. I've added it below. The HTML part of the code is being generated, the javascript part (and therefore all the buttons) does not work. Any ideas why? Am I doing something wrong here? Warm regards, Till <div id="smart-button-container"> <div style="text-align: center;"> <div style="margin-bottom: 1.25rem;"> <p></p> <select id="item-options"><option value="Mitglied" price="10">Mitglied - 10 EUR</option><option value="Kein Mitglied" price="50">Kein Mitglied - 50 EUR</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&enable-funding=venmo&currency=EUR" 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 = ''; if(orderDescription === '') { orderDescription = 'Item'; } paypal.Buttons({ style: { shape: 'rect', color: 'white', 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 || false) ? 0 : (selectedItemPrice * (parseFloat()/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: 'EUR', value: priceTotal, breakdown: { item_total: { currency_code: 'EUR', value: itemTotalValue, }, shipping: { currency_code: 'EUR', value: shipping, }, tax_total: { currency_code: 'EUR', value: tax, } } }, items: [{ name: selectedItemDescription, unit_amount: { currency_code: 'EUR', 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)); // Show a success message within this page, e.g. const element = document.getElementById('paypal-button-container'); element.innerHTML = ''; element.innerHTML = '<h3>Thank you for your payment!</h3>'; // Or go to another URL: actions.redirect('thank_you.html'); }); }, onError: function(err) { console.log(err); }, }).render('#paypal-button-container'); } initPayPalButton(); </script>