How can I show a PayPal Smart Subscription Button and a PayPal Smart Capture Button on the same page?

Question

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}}&currency=USD"></script>
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}&currency=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>

Morehead

Please provide enough code so others can better understand or reproduce the problem. – Colorimeter

Answer 1

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.

1 - Importing the library twice

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}}&currency=USD" data-namespace="paypal_one_time"></script>
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}&currency=USD&intent=subscription&vault=true" data-namespace="paypal_subscriptions"></script>

2 - Displaying the two buttons (or more)

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');

3 - Broken Subscriptions after One-Time payment flow

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');
}

Morehead

Thank you! It took me just 6 hours to find your answer! But now it works... – Holstein

Thank you, Alejandro! This works and helped me a lot. I hate Paypal paymants with a passion. Whoever designed this load of manure should be ashamed of themselves. – Hahnert