#14735215 A4A > Referrals: Implement Client Checkout

Closes Automattic/jetpack-genesis#372

Proposed Changes

This PR implements client checkout

NOTE:

• Design
• IMPORTANT: Please don’t forget to do regression testing by logging into the checkout and payment methods page as an agency.

Testing Instructions

1. Checkout to the branch locally and start the server.
2. Create a new WPCOM account, but don’t sign up for A4A if you have not tested any PR related to the client before.
3. Get the ID(WPCOM ID) from this API that gets called when you log in:
   https://public-api.wordpress.com/rest/v1.1/me and note it down.
4. Login to your agency account > Go to Marketplace > Toggle Refer products > Select product > Go to Checkout > Enter the email ID of the newly created account > Open the network tab > Click the Request payment from client button > Get the ID (REFERRAL_ID) from the API response that gets called when the button is clicked.
5. Logout and log in to your client account
6. Go to /client/payment-methods and delete all the payment methods.
7. Follow the instructions here to get the secret: 34c3e-pb
8. Go to /client/checkout?agency_id={id}&referral_id={id}&secret={secret}
9. Verify that you see the Checkout UI as shown below & verify that the products listed are correct.

11. Click the Add my payment method button > Verify that you are directed to the add payment page as shown below:

12. Add a new card & verify that you are redirected to the checkout and it looks like below:

13. Click the Submit my payment information and verify that you get a success message and you are redirected to /client/subscriptions.
14. Go to /client/checkout?agency_id={id}&referral_id={id}&secret={secret} again and try submitting it again for the same referral and verify you get the appropriate error message and you are redirected to the subscriptions page.

Other Error/success notices.

15. Please remember to perform regression testing by logging in as an agency on the checkout and payment methods page.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?