feat: add useScriptPaypal

[OrbisK]

Note

This PR is still WIP, opening for (hopefully) early feedback

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR is to add a new script for paypal.

I have tried my hand at writing a script for paypal. There are a few points where I am still unsure. On the one hand with my current implementation of useScriptPaypal(), on the other hand with the possible splitting into different componetns. E.g. <ScriptPaypalButtons>. I have roughly listed a few things below that I would appreciate feedback on.

1. is it better to load the paypal script from the npm registry or via the url? (versioning?)
2. useScriptPayPal or useScriptPaypal
3. query serialization (keys with kebab-case, arrays)
4. maybe it makes sense to split the single paypal component into different possible components like <ScriptPaypalButtons /> and/or . To get the source code for buttons, the query components=buttonsis passed, for messagescomponents=messages. However, it would probably make more sense to pass components=buttons,messages` and only make the request once. How could this look structurally?

I would then add documentation as progress continues

Note

src/runtime/components/ScriptPayPal.vue is currently just for testing paypal buttons.

[vercel]

@OrbisK is attempting to deploy a commit to the Nuxt Team on Vercel.

A member of the Team first needs to authorize it.

[harlan-zw]

Hi, thank you for your hard work on this and sorry for the delay. Overall is looking great.

1. is it better to load the paypal script from the npm registry or via the url? (versioning?)

We want to try and avoid adding node_modules for end users for scripts they don't need as the module size will grow rapidly, so we prefer loading via URL. This gets a bit tricky for the types though.

useScriptPayPal or useScriptPaypal

useScriptPayPal

3. query serialization (keys with kebab-case, arrays)

Hmm there may be ways to clean this up but if this is working then I'm fine with what you have.

4. maybe it makes sense to split the single paypal component into different possible component

If we have or may have multiple components for one provider I think better to name them clearer. I'm not exactly sure if I follow what your saying otherwise as I haven't implemented the PayPal button myself, happy to defer to your judgement there.

[OrbisK]

If we have or may have multiple components for one provider I think better to name them clearer. I'm not exactly sure if I follow what your saying otherwise as I haven't implemented the PayPal button myself, happy to defer to your judgement there.

Unfortunately I have to ask you more specifically, not about the paypal script, but about the way paypal implements it.

The same script may have several functionalities, depending on which one is requested. But this also means that if I want to use different paypal components in two places, then I would request 90% of the code twice. However, it would also be possible to simply pass both components directly to the request.

Another possibility would be to always request all “components” from paypal, but then you would have loaded 20% more script than necessary from paypal if you only use one.

It would be best if you had a way of knowing which components there should be before the specific request and thus customize the query parameters granularly.

Hope that makes sense so far.

[OrbisK]

When I thought more about it, I decided to simply request all components first. Maybe you could think about opting out via config

[OrbisK]

Hi, thank you for your hard work on this and sorry for the delay. Overall is looking great.

1. is it better to load the paypal script from the npm registry or via the url? (versioning?)

We want to try and avoid adding node_modules for end users for scripts they don't need as the module size will grow rapidly, so we prefer loading via URL. This gets a bit tricky for the types though.

useScriptPayPal or useScriptPaypal

useScriptPayPal

3. query serialization (keys with kebab-case, arrays)

Hmm there may be ways to clean this up but if this is working then I'm fine with what you have.

4. maybe it makes sense to split the single paypal component into different possible component

If we have or may have multiple components for one provider I think better to name them clearer. I'm not exactly sure if I follow what your saying otherwise as I haven't implemented the PayPal button myself, happy to defer to your judgement there.

okay, the paypal sdk is completely cursed. but i think i have a theoretical progress that shows in which direction it goes. I had not yet done the renaming to usePayPal. I would tackle that and the docs soon.

Unfortunately I don't have a concrete project at the moment where I can test live. The paypal docs are also very wild 😃 some of the types don't match the docs either.

I have worked around the problem with the components as described above.

if you say that everything still fits so far, I would then catch up on the refactoring and docs and try to use everything live in a project 😄

EDIT:
i have also started to add the card fields. but they are a bit more complex and even less well documented than the rest. I would put them at the back of the list for now.

What about tests here? I haven't seen anything about the components yet. I would then add them too

[vincentdorian]

Is this still being worked on?

[OrbisK]

Is this still being worked on?

I think this can be finished (I was waiting for some kind of overall approval before investing much time in docs/tests). I do not have a project to live test it. I cannot say if it is stable. Maybe I should release it as a standalone and we will merge it as soon as we think it is stable.

Do you have projects to test it on?

[Deeyuude]

Good work :) Any news ?

[OrbisK]

Good work :) Any news ?

I think I can try publishing this separately next week. If it turns out to be stable, we can consider migrating it to Nuxt scripts.

[harlan-zw]

I can help out with this but it was so long ago I forgot what we were blocked on.

If you're happy with the state of it @OrbisK I'm happy to merge

[OrbisK]

I can help out with this but it was so long ago I forgot what we were blocked on.

If this looks good overall, I can do some polishing, documentation and testing. It is still missing the card components, but I think we can do this as followup?

If you're happy with the state of it @OrbisK I'm happy to merge

It's pretty hard to test because I don't have a real-world app to test it on. Do you think it would be possible to add pkg.pr.new to Nuxt scripts? This way, I would feel much more comfortable having @Deeyuude and @vincentdorian as early testers.

[harlan-zw]

• Very happy to ship incrementally
• Nightly is setup

npm i https://pkg.pr.new/nuxt/scripts/@nuxt/scripts@e49434e

• I've given you write access @OrbisK if it helps speed anything along (i can work on this branch if you rebase it to this repo)

[OrbisK]

• Very happy to ship incrementally
• Nightly is setup

npm i https://pkg.pr.new/nuxt/scripts/@nuxt/scripts@e49434e

• I've given you write access @OrbisK if it helps speed anything along (i can work on this branch if you rebase it to this repo)

I have pushed it here: https://github.com/nuxt/scripts/tree/feature/paypal

I have merged latest main into feature/paypal.

[harlan-zw]

cool let's close this one for now then

[OrbisK]

@vincentdorian @Deeyuude If you want you can test this with: #487 > https://pkg.pr.new/nuxt/scripts/@nuxt/scripts@487

[Deeyuude]

Thank you