refactor: remove "Personal Info" fieldset from the ajax reloading credit card area

[DevinWalker]

Issue Overview

Currently the fieldset reloads unnecessarily when switching payment gateways. This causes donors to have to update fields unnecessarily which can lower conversion rates.

Considerations

• How does this effect the donor flow? Does it improve it?
• How does it compare to our competitors. Do many ask for Donation Amount -> Payment Option -> Name fieldset?
• Form Field Manager - if people places fields above or below the fieldset their location will be changed
• RazorPay adds a phone number field to the Personal Info fieldset
• "Test Mode" only has the personal info fields in place so then we should add a notice or something there so it doesn't

[ravinderk]

@DevinWalker I reviewed Donorbox, Woocommerce, Shopify, and Stripe hosted checkout page.
I found that all have a few things in common:
1. billing address and personal information sections static that means they do not change with payment options.
2. payment options are in the last section.

Links:
https://stripe.com/docs/payments/checkout
https://donorbox.org/nonprofit-blog/popup-donation/
https://better-shopify-checkout.myshopify.com/
https://givewp.slack.com/archives/C0FAGC83C/p1577251513105300

Suggestion:
I am thinking to remove the need for dynamic loading form fields. In Woocommerce, they do not load form fields dynamically on the checkout page. if we decide to make billing address section static then we can disable the billing address field anytime if we know that enable gateways do not need it. In Woocommerce each payment-related form field hidden by default and they appear only if the customer chooses a payment option. We can follow a similar user flow.

In addition,
In donation processing, it is a gateway responsibility to create a donation payment that means we are not that much aware of what information is saving as donation payment meta instead of the required information. It also sometimes difficult for a new developer to create a new payment gateway for core because of confusion of handling payment creation #4236.
I think it is a core responsibility to handle payment creation. if we follow that then payment add-on's only responsible for payment process and redirect.

We do not need to change the placement of the sections, they can be as is but just have to improve logic.

@DevinWalker Let me know if you want me to continue in this direction.

[ravinderk]

@DevinWalker Addition to the above comment. Payment processing in Give core is hardly couple with donation form which makes it difficult to integrate with other forms. I think we have rearchitected payment processing to make it flexible to integrate with any form.
I found that woocommerce has a robust API to process an order (except payment processing).

ref: https://woocommerce.github.io/woocommerce-rest-api-docs

[DevinWalker]

@ravinderk these are all good suggestions and we should proceed with this route, but in the future. Currently the main goal is get the "Personal Info" fieldset outside of the ajax loading per gateway because these fields are always present regardless of the gateway. The goal here is to set us up for making pretty forms like our concept in figma as SOON as possible.

[ravinderk]

@DevinWalker After rethinking on this, I found that it does not make sense to change the Personal Information fieldset position in the donation form. As we already know re-placement of this section can produce inappropriate behavior. It does not give any benefits like performance and others.
We did not hear any complaint about this instead of that this gives the developer flexibility to add form field dynamically based on the donor's selected payment gateway.

In my opinion, we can close this issue and move focus to pretty forms (as you said in the last comment).

[ravinderk]

This is has been fixed with epic issue.
Latest changes gif
branch: https://github.com/impress-org/givewp/tree/feature/form-style

[ravinderk]

A major part of this issue completed. Small issues related to donor flow will be taken care of in the new issues.

[joebillings]

Sorry, I know this is closed but in the new multistep form (I haven't tried legacy) these fields are being replaced without the user seeing and it makes it a very janky experience. Literally fill the fields, select a payment type, click donate - get an error "you gotta fill the fields!".

I'm going to cache the values with JS and repopulate when they reappear but at the very least you could put the payment selection before the personal info to prevent this from happening 100% of the time someone changes their payment type...