Customers cannot edit or delete payment methods during checkout

Created on 7 July 2023, over 1 year ago

The problem

Customers that make a mistake entering their credit card details, particularly the billing address, will oftentimes abandon checkout.

Once you go to the review step you cannot edit the payment method that was entered on the information step. If the customer clicks "Edit" on the payment pane in the review step they are taken back to the payment pane on the information step. They look for an edit button and don't find one. Some of them will enter a new payment method but a large number simply close the browser window and never return.

Customers make mistakes. A lot. They provide the wrong billing address, mistype the card number or expiration date and don't notice until their payment is declined.

We need editing and deleting of payment methods during checkout.

Considerations

For a lot of payment gateways once the information form is submitted the payment method is tokenized. That means that the card number cannot be changed anymore. Possibly expiration and or billing address as well.

If these cannot be changed then the edit button needs to actually create a new payment with the billing profile of the "edited" payment method attached.

If editing is too difficult of a problem to solve then bare minimum there needs to be a way to delete payment methods so that a new one can be created.
In our implementation with authorize.net a customer cannot enter the same card number again until the old payment method is deleted because authorize.net considers it a duplicate. This means even if they create a new payment method they cannot add the same card with the correct billing details.

Feature request
Status

Active

Version

2.0

Component

User experience

Created by

🇺🇸United States rhovland Oregon

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @rhovland
  • 🇺🇸United States rhovland Oregon

    Here is my first attempt at addressing this.

    Because the list of available payment methods is a Form API radios element each option only accepts a plain string. Therefore I cannot attach links on the stored payment method entries.

    So instead if a stored payment method is selected and the customer has permission to edit it a button will appear below that says "Edit selected payment method". This will take them to the payment method edit form where they can either make changes or press the delete button to delete it. The checkout step they were on before going to the edit form is set as the return destination and they will be sent back there upon saving or deleting. The customer can then continue through checkout.

  • 🇺🇸United States sleewok

    I installed this patch on my site. I only allow checkout for anonymous users. When the user attempts to edit the payment method they are taken to an access denied page. I have set the permission for allowing anonymous users to manage their own payment methods.

  • 🇺🇸United States rhovland Oregon

    This patch does not touch permissions for editing payment methods. The url is built using the route for the payment entity. The only permission I had to grant to anonymous was "edit own payment methods". The code also checks for this permission before displaying an edit link to the user.

    Is the url being generated in the format of /user/the-user-id-number/payment-methods/payment-method-id-number/edit?

  • 🇦🇹Austria agoradesign

    Same problem as #3 - yes, the url is generated in that form, using commerce_payone

  • 🇮🇱Israel jsacksick

    Not sure it's a good idea to add links in checkout redirecting you away from checkout. Pretty sure that isn't good UX as this could decrease the conversion rate IMO.

    Also, if this ever gets added, this should probably be behind a checkout pane setting that allows toggling this behavior, and it should be FALSE by default.
    Otherwise, the risk is to suddenly see new potentially undesired links in checkout showing up without notice.
    Perhaps opening the links in modals could help (though modals might not be a good idea for mobile).

  • 🇺🇸United States nicxvan

    Not being able to checkout because the billing address is wrong lowers the conversion rate more than someone needing to change the billing address.

    Though allowing the edit directly in checkout is better.

  • 🇺🇸United States rhovland Oregon

    I agree, editing should be directly in checkout. The patch I made is a stop-gap fix which seems to have broken so I will likely be trying to do something more appropriate as a rewrite.

  • 🇮🇹Italy trickfun

    I agree. Editing should be directly in checkout because a large number simply close the browser window and never return if there isn't an edit button.
    Patch doesn't work on checkout.

Production build 0.71.5 2024