When a customers end-user attempts to update their CC details for a Braintree integration and there is an error (eg: invalid CVV) the form silently fails with the fault only available in the developer console as a fault object.
https://3scale-developer-portal.example.com/admin/account/braintree_blue/edit

1) the form has extremely confusing "placeholder" values. It shows 4111 1111 1111 1111, a CVV of 123 and Expiry MM/YY.

2) The form lets you submit without having entered Credit Card details - see example

3) Errors from BrainTree aren't being displayed; they are just dumped with console.error() For example, enter a wrong credit card number (8484 8484 8484 8484) - the form doesn't properly submit and no error is shown to the customer - A generic "card details could not be saved" banner appears at the top of the page but is easy to miss.

4) If you enter a wrong credit card number (8484 8484 8484 8484) (as in point #3) and submit it, validation fails BUT even if you change the number, the form won't submit again - the Save Details button is greyed out and pressing ENTER does nothing. If you enter the wrong details you have to reload the whole page.

5) Even though the credit card details can't be saved because they're not valid, the rest of the details: first name, last name, company, address etc should still all be saved. Having to reenter these details is a very poor user experience for customers.

Example faults:

{
  "name": "BraintreeError",
  "code": "HOSTED_FIELDS_FIELDS_INVALID",
  "message": "Some payment input fields are invalid. Cannot tokenize invalid card fields.",
  "type": "CUSTOMER",
  "details": {
    "invalidFieldKeys": [
      "number",
      "cvv"
    ],
    "invalidFields": {
      "number": {},
      "cvv": {}
    }
  }
}