Purchases: Fill credit card form with card holder name upon loading Edit Card Details page

[stephanethomas]

This pull request fixes #193 partially by updating the Edit Card Details page to display the name attached to the stored credit card associated to the current purchase when it loads:

It makes use of the Stored Cards store that relies on the /me/stored-cards API endpoint. We only fill in the form with the card holder name for the time being but we should probably display the country and the postal code as well - these are probably the only fields that won't be updated by users in 95% of the cases. It doesn't make sense to display the last four digits as well as the expiration date for the opposite reason.

This pull request doesn't address disabling of input fields - this is handled as a separate issue in #260.

Testing instructions

1. Get a new test account and blog
2. Enable the store sandbox
3. Select a plan by clicking the Upgrade Now button on the Plans page
4. Submit the form on the Secure Payment page with fake credit card information
5. Check that the purchase was successful
6. Head to the Purchases page
7. Click the new plan to display the corresponding Manage Purchase page
8. Check that the Payment Method section shows the right credit card logo and last digits
9. Click the Edit Payment Method navigation link to display the Edit Card Details page
10. Check that card holder name entered during checkout appears in the form
11. Enter new credit card information and click the Update Card button
12. Check that the update was successful
13. Check that the Manage Purchase page reflects these changes
14. Check that the new stored credit card appears at the bottom of the Billing History page

Notes

I think we should remove the country and postal code returned with the payment data in the /me/purchases endpoint and update the /me/stored-cards endpoint to return it. That way everything is located in the Stored Cards store. What do you think?

[scruffian]

One bug; when I edit my card, the local copy of the data doesn't update, so when I navigate back to edit the card, the old details are displayed until they reload. It probably makes sense to fix this in a different PR.

[scruffian]

That way everything is located in the Stored Cards store.

I like this idea, but we will need to store some data in the purchases endpoint for Paypal. Either way this is probably a v2 change :)

[scruffian]

Check that the new stored credit card appears at the bottom of the Billing History page

It actually appears at the top :)

[stephanethomas]

One bug; when I edit my card, the local copy of the data doesn't update, so when I navigate back to edit the card, the old details are displayed until they reload. It probably makes sense to fix this in a different PR.

Could you be more specific? If I update a card on the Edit Card Details page succesfully, I am then redirected to the Manage Purchase page with the correct payment information. If I navigate to the Edit Card Details page afterwards I see the new data in the Name on Card field.

[gziolo]

I think we should remove the country and postal code returned with the payment data in the /me/purchases endpoint and update the /me/stored-cards endpoint to return it. That way everything is located in the Stored Cards store. What do you think?

I agree, you can create follow up task.

Code looks good 👍

[gziolo]

It doesn't work when I try to update. I see the following errors on the console:

Looks like merge issue.

[gziolo]

I hope we can get rid of this condition once we introduce loading placeholder :)

[gziolo]

BTW, there is some delay with filling up form field with card holder name, but this should also be deprecated with loader implementation.

[stephanethomas]

👍

[stephanethomas]

It doesn't work when I try to update. I see the following errors on the console:

This specific Javascript error has been fixed separately in #621.

[scruffian]

Here's another issue caused by the lack of a placeholder loading state:

[scruffian]

Ok I think this is good to merge, as long as we work on the placeholder state soon :)

[gziolo]

@scruffian: Sounds good. I can start implementing loading placeholders with this page tomorrow (see #275) :)

[aduth]

Was this intended to be fields = {} to provide the default argument? This line broke after dropping Flow plugin in the Babel 6 upgrade (#1515) and is assumed to be corrected in 4b06d6e.

[gziolo]

Yes, it looks like a default param. A few lines above it's called without 2nd param, so that makes perfect sense.