CC info disappears on single-page checkout

[razoyo-tommy]

Hi,

Currently on OroCommerce version 4.1.12.

When using this BrainTree bundle with single-page checkout, there is an issue with CC info being lost when a customer decides to update billing address or selecting a different shipping method. The payment method area refreshes and the BrainTree payment method menu collapses. The credit card info previously entered is lost when you click to expand to use the credit card menu again.

Please see short video attached below using mock CC info.
https://user-images.githubusercontent.com/83657823/128545240-dc7cf74d-e7c4-4c58-b6e7-7000e1ff14cc.mp4

I thought it might be related to the teardown() method call so I commented out the this.instance.teardown() call in the braintree-method-component.js and rebuilt Oro assets but the data is still lost.

I tested with Oro's core CC payment method and that seems to be fine with the refresh, CC data is retained whenever changes are made to billing or shipping methods. (see short video attached below).
https://user-images.githubusercontent.com/83657823/128545757-10b30b0e-4ed7-4652-bb92-78828f01cb24.mp4

[AdamJHall]

Hi,

Thanks for reporting, we'll take a look at this issue shortly and get back to you!

[razoyo-tommy]

Hi Adam,

Any new updates on this issue?

[AdamJHall]

Hi @razoyo-tommy,

Apologies for the delay, I've had a look and it seems to be caused by Oro when they do a layout refresh of that block when the addresses/shipping cost/etc are changed. In their PayPal bundle it looks like they store the credit card data off in separate form form so that doesn't affect them.

Because we use the dropin UI here it may be a bit trickier, but what we can try to do is create a new Form type for the braintree drop in UI and move everything over to the form widget.

I'll start putting together a fix shortly.

[AdamJHall]

I've created a quick POC with a form type etc, however it still clears the form as the js component is completely removed on the layout subtree update. Still trying to find a way to keep the component around so it is not re-initialised.

[AdamJHall]

Hi @razoyo-tommy,

I've reached out to Oro to see if they can assist here and will reach out to PayPal/Braintree shortly as well.

As it stands the issue is this:
When you make a change to anything that could affect the payment method (Billing or Shipping Address for example), Oro performs a save state api call and then a layout subtree update. This refreshes the braintree js component entirely with a new set of configuration, html etc.

Oro will save and restore the state of any forms within that block however braintree's drop-in ui and hosted fields components aren't actually normal forms on the page. They are iframes through to braintree so the payment data never touches your site, so Oro can't access and restore these.

Currently the Braintree component does not support restoring from an existing token as far as I can tell, so I will need to reach out to them and see if that is something they could potentially add in. Then we should be able to restore the state of the component based on that.

I'll get back to you as soon as I have heard from Braintree and Oro.

[razoyo-tommy]

Thanks for the updates! That makes a lot of sense why the customer's data inputted into the Braintree form disappears when Oro refreshes the forms on the one-page checkout.