I’ve been working on a paypal checkout and am having difficulties, my company is offering services that can be purchased one time, or on a recurring basis, and I have the checkout page designed and using dropdowns they can choose the level of service and the frequency, well I now noticed while implementing paypal, I have to use “intent=subscription” to do subscription’s, but if I have that then a normal order can’t be placed, and if I have both scripts included then i get a 500 error during checkout. Is there anyway i can unload/reload the scripts that i need when the buttons change, this is what i have to change the buttons
$(".product-info :input").change(function () { if($( ".productselect" ).val() == "basic"){ $( "#basic" ).show(); $( "#plus" ).hide(); $( "#premier" ).hide(); }else if ($( ".productselect" ).val() == "plus"){ $( "#basic" ).hide(); $( "#plus" ).show(); $( "#premier" ).hide(); }else if ($( ".productselect" ).val() == "premier"){ $( "#basic" ).hide(); $( "#plus" ).hide(); $( "#premier" ).show(); } if($( ".timingselect" ).val() == "Single"){ paypalsingle(); $(".totamount").html("$" + $(".productselect").find(':selected').data('cost')); }else if ($( ".timingselect" ).val() == "Bi"){ paypalmulti($(".productselect").find(':selected').data('ppbi')); $(".totamount").html("$" + $(".productselect").find(':selected').data('costbi')); }else if ($( ".timingselect" ).val() == "Week"){ paypalmulti($(".productselect").find(':selected').data('ppweek')); $(".totamount").html("$" + $(".productselect").find(':selected').data('costweek')); } }); function paypalsingle(){ document.getElementById('paypal-button-container').innerHTML = null; document.getElementById('paypal-payment-button').innerHTML = null; paypal.Buttons({ style:{ color:'blue', shape:'pill' }, createOrder: function (data, actions) { var cost = parseFloat(document.getElementsByClassName('totamount')[0].innerText.replace('$','')); var address = document.getElementsByClassName('basictitle')[0].innerText; return actions.order.create({ purchase_units : [{ amount: { name: '######### Services', description: "Lawn mowing at: " + address, value: cost } }] }); }, onApprove: function (data, actions) { return actions.order.capture().then(function (details) { console.log(details); var prod, timing; if($( ".productselect" ).val() == "basic"){ prod ="basic"; }else if ($( ".productselect" ).val() == "plus"){ prod ="plus"; }else if ($( ".productselect" ).val() == "premier"){ prod ="premier"; } if($( ".timingselect" ).val() == "Single"){ timing ="single"; }else if ($( ".timingselect" ).val() == "Bi"){ timing ="bi"; }else if ($( ".timingselect" ).val() == "Week"){ timing ="weekly"; } window.location = "paymentmade.php?UserID=<?php echo $userid ?>&orderID="+data.orderID+"&multi=true&timing="+timing+"&prod="+prod; }) }, onCancel: function (data) { window.location.replace("quote.php?fname=<?php echo $fname ?> &lname=<?php echo $lname ?>&email=<?php echo $email ?>&tel=<?php echo $tel ?>&lot=<?php echo $lot ?>&building=<?php echo $building ?>&lotID=<?php echo $lotid ?>") } }).render('#paypal-payment-button'); } function paypalmulti(ppid){ document.getElementById('paypal-button-container').innerHTML = null; document.getElementById('paypal-payment-button').innerHTML = null; paypal.Buttons({ style: { shape: 'pill', color:'blue', layout: 'vertical', label: 'paypal' }, createSubscription: function(data, actions) { return actions.subscription.create({ /* Creates the subscription */ plan_id: ppid }); }, onApprove: function (data, actions) { return actions.order.capture().then(function (details) { console.log(details); var prod, timing; if($( ".productselect" ).val() == "basic"){ prod ="basic"; }else if ($( ".productselect" ).val() == "plus"){ prod ="plus"; }else if ($( ".productselect" ).val() == "premier"){ prod ="premier"; } if($( ".timingselect" ).val() == "Single"){ timing ="single"; }else if ($( ".timingselect" ).val() == "Bi"){ timing ="bi"; }else if ($( ".timingselect" ).val() == "Week"){ timing ="weekly"; } window.location = "paymentmade.php?UserID=<?php echo $userid ?>&orderID="+data.orderID+"&multi=true&timing="+timing+"&prod="+prod; }) }, onCancel: function (data) { window.location.replace("quote.php?fname=<?php echo $fname ?> &lname=<?php echo $lname ?>&email=<?php echo $email ?>&tel=<?php echo $tel ?>&lot=<?php echo $lot ?>&building=<?php echo $building ?>&lotID=<?php echo $lotid ?>") } }).render('#paypal-button-container'); // Renders the PayPal button }
Advertisement
Answer
You can use a helper function such as the following to load/reload the SDK dynamically:
function loadAsync(url, callback) { var s = document.createElement('script'); s.setAttribute('src', url); s.onload = callback; document.head.insertBefore(s, document.head.firstElementChild); } // Usage Example: loadAsync('https://www.paypal.com/sdk/js?client-id=test¤cy=USD', function() { paypal.Buttons({ // Set up the transaction createOrder: function(data, actions) { return actions.order.create({ purchase_units: [{ amount: { value: '0.01' } }] }); }, // Finalize the transaction onApprove: function(data, actions) { return actions.order.capture().then(function(details) { // Show a success message to the buyer alert('Transaction completed by ' + details.payer.name.given_name); }); } }).render('body'); // Replace with selector of desired container to render in });
(Your callback can of course be a named function such as your paypalsingle
rather than an anonymous one as in the above usage example)