paypal-js | Loading wrapper and TypeScript types for the PayPal JS SDK | SDK library

You don't have to design a system in which the PayPal email used to make the payment, and the email of the user used to log into your site, have a 1:1 relationship. Instead you can have the user log and create their account with you first (as they will always need that to manage something subscription-based) and then you will know there is no subscription associated with that user before displaying the PayPal Subscribe button. Then they can pay with any PayPal account (might be the same email, might be different)

As far as I can tell, when the onApprove is called or the webhook is called, the subscription has already been processed and activated.

That is the default behavior, yes. Per the above it shouldn't be ncessary, but you can change the subscription to start in an inactive state, and show a final review step on your site that will activate it via API. This is controlled by setting application_context -> user_action -> CONTINUE (vs default SUBSCRIBE_NOW). See the API reference for subscription create, and you would of course need to use the subscription activate API call as a final step after confirmation.

If you use the PayPal JS SDK to open the checkout, you have to use its button, and the user has to click it themselves. PayPal does this intentionally so that the button shown uses their consistent branding.

If you want an alternative, you can integrate without the JS SDK (REST API only) and have your own button which redirects to the PayPal page for approval, which will then return to your site. This is an old integration pattern, for old websites, and not recommended.

Despite your misgivings and desire not to use it, the JS SDK and its button in a container sized to your requirements is in fact the best available solution.

Based on the UI shown, what you might op to do is hide your "Pay" button and replace it with one that says "Pay With PayPal" when that method is selected, which could look like this (sized to fit your container): Here's sample HTML/JS for that, you can do the same from react-paypal-js :

Within onApprove, the order hasn't been captured when you are printing that data. Capture the order first. When an order is captured, its transaction ID will be in the response's purchase_units[0].payments.captures[0]

If you need to do anything important with that ID, such as store it in a database, used a server-side integration (not actions.order.capture nor actions.order.create, client-side code is not for database operations). See the optional step #5 in the 'Add and modify the code' section of the guide for Integrate Checkout, and be sure to use the client-side error handling code in its linked demo pattern example.

There are some examples in the documentation. For your case:

Suspending a subscription is done with server API calls, so reactjs is not relevant.

See the Subscriptions documentation, which gives an example in curl format

Per the documentation, phone_number must have a national_number key. Do not include a payer_id or invalid tax_info object.

I also tried adding payee: {email_address: userEmail} into purchase_units, but then there was no option to pay with credit card after pressing on the PayPal button. That option got replaced by the option to create a PayPal account.

payee sets which account receives the PayPal payment. The black Debit or Credit Card button will generally be available for guest payments if the recipient PayPal account exists and is confirmed.

How can I pass the two pieces of information so as to get them in webhook_event?

If you absolutely must store two pieces information as part of a custom value (usually only useful for subscriptions, although even for subscriptions there are better solutions that involve using your own database), you could encode a JSON object with json.dumps({'email': somevalue, 'product': somevalue} and store that json string value in custom_id -- then decode it later on receipt with json.loads.

It's unusual to need to do anything like this, however, especially for one-time Order payments. You should implement order creation and capture from your own server routes and store the necessary information on your own database immediately on successful capture, before returning the capture result to the button JavaScript. See the information for a server integration in Set up standard payments.

Webhooks are not necessary at all in such a case, much less retrieving item information from a webhook. You however can and should include item information as part of the PayPal transaction for informational purposes, via an items array. This will also show to the payer in the upper right cart dropdown during checkout, and be visible in the completed paypal.com transaction details.

Integrating from a backend is the most robust solution in general, especially for ecommerce -- but as this is for a simple donation use case I can see how you may wish to avoid that.

There are various possible solutions, including using an additional state framework such as Redux, but it seems what you want to do is manage the state at a parent component level above the buttons, and bind its createOrder ("handleCreatePayPal") methods, etc so that this is in context and they can access its state.

Here is a runnable codesandbox example (based on the documented example that uses a re-render, but none is done here)

After digging through the source code you can supply many options.. I was able to set no shipping address like this: