Update payment methods list and edit page to show all stored instruments

[leeBigCommerce]

What?

The current payment_methods object within my account is only built to support stored credit cards. Now that we have the option to store PayPal accounts (and likely more in the future)

Tickets / Documentation

• https://jira.bigcommerce.com/browse/PAYMENTS-4498

Screenshots (if appropriate)

[bigbot]

Autotagging @bigcommerce/storefront-team @davidchin

[leeBigCommerce]

N.B. this should not be merged in until the backend work to fulfil the new object payload has been completed.

[Tharaae]

I think we need to increase the space between payment method sections (ex. between Credit Card section and Paypal section). I suggest changing margin-top to 2rem instead of 0 in .paymentMethodName class in _paymentMethods.scss

[Tharaae]

@leeBigCommerce
Thanks for applying the comments. Few more changes are requested above, in addition to the suggestion of increasing the space between payment method types sections (ex: between stored credit cards and stored paypal accounts) to clarify that they are different types of stored instruments. Importance of this space will be obvious in case of many stored interments per section. I suggest changing margin-top to 2rem instead of 0 in .paymentMethodName class in _paymentMethods.scss. We can also get further feedback from the design team.

[bc-marquis-ong]

Looking good @leeBigCommerce. Got minor some minor questions below.

[Tharaae]

Thanks @leeBigCommerce. All LGTM now 👍
Will approve once the current last testing is completed.

[Tharaae]

@leeBigCommerce
One more change please. The grey area in the PayPal account card need to be reduced to match the design on Figma: https://www.figma.com/file/axmkHAat2Y8kzt9JzAI0i2he/PayPal-Vaulting?node-id=9%3A14

[Tharaae]

@leeBigCommerce
In the new release, we need to create another copy of american_express.svg named amex.svg to handle this issue:
https://jira.bigcommerce.com/browse/STRF-7869

[leeBigCommerce]

https://jira.bigcommerce.com/browse/STRF-7869 will be dealt with in a seperate ticket and PR

[Tharaae]

LGTM 👍

[Tharaae]

@leeBigCommerce I approved it but it requires approval of someone with write access.

[mindfriction]

While this is likely not the appropriate place for this comment, but are you aware of the massive amount of credit card verification attacks that are occurring on this Payment methods page in BigCommerce?

With the ability to simply add Payment methods like this to your Vault (PayPal/Braintree), hackers use this functionality and script out the action of adding payment methods with their lists of stolen credit cards, and use it to verify things like zip code, cvv, etc.

The card won't be stored to the vault and added to Payment methods list, unless it is verified by the payment processor first. So they use their scripts to just keep trying add cards using different CVVs, zip codes, etc. until it is verified and added. This way, they can verify large lists of stolen credit cards, and use it to figure out the CVV or zip code if they don't have it.

A group of hackers were trying to verify over 30,000+ credit cards a day on my Bigcommerce store using this functionality and BigCommerce has no way to protect against this. I was forced to disable the form submit button to prevent this from occurring.

Can you consider implementing a recaptcha to protect against this? The native Bigcommerce recaptchas don't protect this area of the store, only things like contact forms, review forms, login, and checkout.