Paypal-checkout-components: Toggle between Orders and Subscriptions

[mcfiredrill]

Hi,

I'd like to be able to create a subscription and a regular order in the same checkout process.
I've noticed I'm not allowed to pass both createSubscription and createOrder at the same time.

I thought perhaps I'd be able to use just one of the callbacks, but the subscription object is not available in the actions in the createOrder callback, and vice-versa order is not available in createSubscription.

Is the only solution to render the buttons twice somehow, and force the user to approve the subscription and the order separately?

[issue-label-bot[bot]]

Issue Label Bot is not confident enough to auto-label this issue. See dashboard for more details.

[lkatkus]

How are you handling sdk imports? I am having a sort of similar issue. I want to have to separate buttons on the same page - one to handle createOrder and another createSubscription.

As I understand, to have createSubscription you have to pass intent=subscription, but if have it with intent=subscription, then createOrder will not work... Importing sdk second time with intent=subscription and data-namespace is not working, as I'm getting Request listener already exists for zoid_allow_delegate_paypal_buttons...

The annoying thing is that createSubscription actually works without intent=subscription, but I get a warning, that it's required.

[gregjopa]

Hi @mcfiredrill and @lkatkus, you will need to re-load the JS SDK <script> to toggle between Orders and Subscriptions. Here's an example codepen: https://codepen.io/gregjopa/pen/RwagNWR?editors=1010.

We recommend using the paypal-js client-side loader to make it easy to load and re-load the JS SDK.

Hope this helps. Let me know if you have any additional questions.

[lkatkus]

Thanks @gregjopa ! Just what I needed.

The only remaining thing is, if I try to switch between states " too fast", I get and error Uncaught Error: zoid destroyed all components. This can also be reproduced in your codepen. Can this be ignored? Or I should disable the state switching if the script is loading?

[gregjopa]

The only remaining thing is, if I try to switch between states " too fast", I get and error Uncaught Error: zoid destroyed all components. This can also be reproduced in your codepen. Can this be ignored? Or I should disable the state switching if the script is loading?

Good question @leotm. For this re-load use case, these errors are expected and I think it's safe to consider them informational rather than errors. You can solve this by:

1. Catching render() errors - the render function actually returns a Promise so you can catch these errors and determine how you'd like to best log them. Here's an example that uses console.warn for them:

buttons = paypal.Buttons(options);
  buttons
    .render("#paypal-button-container")
    .catch((err) => {
      console.warn(
        "Warning - Caught an error when attempting to render component", err
      );
    });

1. Debounce the radio button onClickHandler - in web development it's common to debounce functions to prevent expensive functions from running too many times based on the user's interaction with the UI. Clicking too fast between the form options is something that can and should be debounced.

I updated the codepen to include debouncing and catching these errors: https://codepen.io/gregjopa/pen/RwagNWR?editors=0010.

[jbowes2]

Something about this shoud be added to the documentation. It took me awile to find this.

[anish2690]

Not working if we initiate Orders and the user cancel that to choose for Subscriptions option.