When trying to add a PayPal subscription button and a capture/order button for one-time payments to the same page, you need to import PayPal's Javascript file twice with different parameters (intent=subscription&vault=true versus just intent=capture)
If you try to import both the buttons will not render.
How can you show both a PayPal subscription and a PayPal one-time payment smart button on the same page?
Sample code to reproduce the problem:
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}¤cy=USD"></script>
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}¤cy=USD&intent=subscription&vault=true"></script>
<div id="some-container"></div>
<div id="some-subscription-container"></div>
<script>
paypal.Buttons().render('#some-container');
paypal.Buttons().render('#some-subscription-container');
</script>
After fighting with this for hours I found a solution that works great to show both buttons on the same page (or even many of each) and want to share it so I can save others the pain.
The first problem is how to import both PayPal Javascript files at the same time with different parameters. The solution is using data-namespace on the script tags like this:
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}¤cy=USD" data-namespace="paypal_one_time"></script>
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}¤cy=USD&intent=subscription&vault=true" data-namespace="paypal_subscriptions"></script>
Now to render the buttons you need to use those namespaces instead of the paypal variable. For example:
paypal_one_time.Buttons().render('#some-container');
paypal_subscriptions.Buttons().render('#some-subscription-container');
The last problem you will find is that clicking on the one_time payment buttons breaks the subscription buttons. If you try to click the subscription one after the one-time button, it won't work (saying that you don't have enough authorization and closing the popup window).
To fix this, the easiest way is to re-render the subscription buttons on your page every time a one-time payment flow finishes (in the onApproved/onCancelled/onError methods inside the Buttons() options for your one-time payment buttons).
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// process your one time payment
// re-render subscription buttons because now they are broken!
reRenderSubscriptionButtons();
});
},
onCancel: function(data) {
reRenderSubscriptionButtons();
},
On those events in the one_time_button, just call a function that does something like:
function reRenderSubscriptionButtons() {
// remove everything from the container
document.getElementById("some-subscription-container").innerHTML='';
// render the subscription buttons again (you can call the same function you use to render it the first time too)
paypal_subscriptions.Buttons().render('#some-subscription-container');
}