Changes proposed in this Pull Request
Currently the “Add payment method” forms at both the account and site-level display text in the sidebar that reads This card will be used for future renewals of existing purchases. and when the form is submitted, it assigns the newly added payment method to all existing subscriptions.
This PR adds a checkbox (defaulting to checked) to the form which allows the user to decide if they want to do that, or if they just want to add a card and assign it later. It moves the sidebar warning inline just underneath the submit button, and changes the warning’s text if the checkbox is not checked.
NOTE Once #49897 is merged, this PR will include the site-level form as well. Since this PR removes the sidebar warning that the card will be used for all subscriptions, we should wait to merge this until that is complete so that we make sure that we replace it with the checkbox on all the active forms at once. (We cannot keep the sidebar warning because it is a React sibling of the PaymentMethodSelector where the checkbox lives and has no way to know the state of the checkbox.) That said, no changes will be needed to this PR to support that form, so this can be reviewed now.
Fixes #50047
Screenshots
Before:
After:
Close-up of checkbox checked (note text after button):
Close-up of checkbox unchecked (note text after button):
Testing instructions
- Use a site that has at least one subscription.
- Visit http://calypso.localhost:3000/me/purchases/add-payment-method and verify that you see the checkbox mentioned.
- Add a new card (if your API is sandboxed you can use a stripe test card with a unique last 4 digits so you can more easily tell the cards apart) using the form and leave the checkbox checked.
- Verify that the form submits correctly, and that your subscription has the new card assigned to it.
- Repeat the above steps with a new card, but uncheck the box.
- Verify that the form submits correctly, and that your subscription does not have the card assigned to it.
- Verify that the new card shows up in the list of payment methods on http://calypso.localhost:3000/me/purchases/payment-methods
Unfortunately, no screenshots were provided by the developer.
