Checkout: Fetch PayPal configuration directly in calypso

[sirbrillig]

Proposed Changes

When the @automattic/calypso-paypal package was made, I decided to use the wpcom-proxy-request package directly to call the /me/paypal-configuration endpoint. This seemed to be a simpler way to make a network call without needing to inject the fetching function from the call-site. However, it's possible that there are some cases where it fails. We've seen some intermittent fatals in the paypal-js submit button that appear to originate at this API call.

In this PR, I return to the way of making an API call inside an external package that I'm used to: injecting the call as an argument, or in this case a prop, to PayPalProvider. The call can then be made with wp.req.get() directly inside the calypso app.

This PR also modifies the provider so that if there is an error calling the endpoint, it will call a custom error handler function which is also injected, rather than throwing at runtime. This should allow us to log such failures without causing fatal errors.

Testing Instructions

To verify that the happy path still works: add a product to your cart and visit checkout. Then verify that PayPal is an option in the list of payment methods and that there are no errors related to the payment method in the console.

To test the failure state, you'll need to modify something. Either you need to modify the paypal configuration endpoint to fail, or modify the new injected function (fetchPayPalConfiguration) to throw. Verify that when you load checkout you see an error logged in the console but that checkout itself should be unaffected. The only difference is that PayPal should not show up as a payment method option.

Here's an example of how to break the configuration:

diff --git a/client/my-sites/checkout/src/payment-methods/paypal-js.tsx b/client/my-sites/checkout/src/payment-methods/paypal-js.tsx
index 7ec6f51077f..8330b0c595f 100644
--- a/client/my-sites/checkout/src/payment-methods/paypal-js.tsx
+++ b/client/my-sites/checkout/src/payment-methods/paypal-js.tsx
@@ -22,6 +22,7 @@ import { convertErrorToString, logStashEvent } from '../lib/analytics';
 const debug = debugFactory( 'calypso:paypal-js' );

 async function fetchPayPalConfiguration(): Promise< PayPalConfigurationApiResponse > {
+       throw new Error( 'testing failure' );
        return await wp.req.get( {
                path: `/me/paypal-configuration`,
                method: 'GET',

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/fetch-paypal-config-in-calypso on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~334 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
site-purchases       +527 B  (+0.0%)     +169 B  (+0.0%)
purchases            +527 B  (+0.0%)     +169 B  (+0.0%)
checkout             +527 B  (+0.0%)     +165 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~165 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal            +527 B  (+0.0%)     +165 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal       +527 B  (+0.0%)     +165 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-26019a5dbae3655775d1ddc8a3377516bca0f696

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-26019a5dbae3655775d1ddc8a3377516bca0f696&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-26019a5dbae3655775d1ddc8a3377516bca0f696&env=a8c-for-agencies