[Feature] Add option to control when the JS SDK script loads about react-paypal-js HOT 5 CLOSED

@gregjopa thank you for all the pointers- awesome that you're thinking about user empathy and providing the best UX for buyers.

My team and I have been learning best SDK practices from react-paypal-js and it's been very informative. For example, there isn't documentation on Buttons().close() and we learned about it from the work that was done here. Also, personally I haven't made use of the reducer hooks API, and this project has been 💡💡💡 for me. Learned lots!

from react-paypal-js.

Hi @gregjopa! Thanks for creating this issue -it's very well thought out 🚀 I'm onboard with adding a prop to PayPalScriptProvider. It can be optional.

Semantically, shouldLoadScript doesn't tell me a lot in the context of PayPalScriptProvider. I like your idea of calling the it lazyLoadScript, skipLoadScript, or even deferLoading (defaults to false).

Re: kicking off the loading, are you thinking of supporting both of these? Either should work for us. (2) is nice since it abstracts away the logic from the client ✨

1. Update the value passed into the shouldLoadScript prop and set it equal to true.
2. Wait for the the component (ex: <PayPalButtons />) to get rendered which would dispatch an action to kick off the script loading by changing the state to pending.

from react-paypal-js.

Here are some other naming ideas for this new prop for <PayPalScriptProvider> :

• lazyLoadScript - defaults to false.
• skipLoadScript - defaults to false.
• eagerlyLoadScript - defaults to true.

from react-paypal-js.

I'm onboard with adding a prop to PayPalScriptProvider. It can be optional.

Thanks @avocadomayo! That's great to hear 🥳

Semantically, shouldLoadScript doesn't tell me a lot in the context of PayPalScriptProvider. I like your idea of calling the it lazyLoadScript, skipLoadScript, or even deferLoading (defaults to false).

Agreed. deferLoading is a great suggestion! Let's go with that.

Re: kicking off the loading, are you thinking of supporting both of these? Either should work for us. (2) is nice since it abstracts away the logic from the client ✨

Yes I think we should support both.

Usage of deferLoading={false}

Another thing to mention is we recommend loading the JS SDK earlier in the user flow on a page preceding the checkout page in order to render the Buttons as fast as possible. So waiting to load the script until the button is shown to the buyer is not ideal. We should still support it but wanted to mention the performance concern. Here's a note from the paypal dev docs about it:

for a bonus performance boost, load the JavaScript SDK asynchronously on a page that precedes the checkout page. This approach pre-caches the script, making future loads and renders instantaneous

The good news is react-paypal-js already supports dispatching an action to load the script. So when using deferLoading=true, we can put a note in the readme to encourage devs to dispatch an action to load the script later on in the user flow but before getting to the checkout page. Ex:

const [{ isNotStarted, options }, dispatch] = usePayPalScriptReducer();

// dispatch an action to start loading the script from a preceding page
if (isNotStarted) {
    dispatch({
        type: "setLoadingStatus",
        value: SCRIPT_LOADING_STATE.PENDING,
    });
}

I think the isNotStarted derived prop is the only new thing needed to support the above snippet. Beside that, it should just work. It's cool that we can leverage this new deferLoading prop along with the dispatcher to control script loading 🎉

from react-paypal-js.

@avocadomayo thanks for helping design this feature! It's included in the 5.2.0 release and it's documented here: https://github.com/paypal/react-paypal-js#deferloading.

Also, thanks for your kind words about this project 😄 💯

from react-paypal-js.