search

impress-org / givewp

GiveWP - The #1 Donation Plugin for WordPress. Easily accept donations and fundraise using your WordPress website.
https://givewp.com/
GNU General Public License v3.0
344 stars 191 forks source link

epic: Improve Stripe Settings and Add Support for Stripe Checkout 2.0 #4123

Closed mehul0810 closed 5 years ago

mehul0810 commented 5 years ago

@mehul0810 commented on Tue Feb 05 2019

Feature Request

User Story

As a user, I want to accept donations using the new workflow of Stripe Checkout so that it will a streamlined experience and follow EU regulations.

Related

Acceptance Criteria

@mehul0810 commented on Thu Apr 18 2019

@DevinWalker I've updated the issue description of this issue as the new Stripe Checkout is stable and ready for implementation on production sites. I think we can schedule this issue after Give 2.5.0 as a part of the Stripe free version as it will support Apple Pay and other payment methods in the future.

@mehul0810 commented on Wed May 08 2019

Update for new Stripe Checkout

While exploring the Stripe Checkout documentation, I've noticed the warning as per the screenshot for the legacy Checkout (popup mode) which we are using with Stripe.

image

New Stripe Checkout Doc: https://stripe.com/docs/payments/checkout

Benefits

Future supported payment methods

Check the roadmap for more details: https://stripe.com/docs/payments/checkout#checkout-roadmap

mehul0810 commented 5 years ago

Slack Call Summary

Participants: @mehul0810 @ravinderk Topic: Discussion about the new workflow of Stripe Checkout Result: I have researched about Stripe Checkout new API implementation which is different from Stripe CC (on page). So, as per our current implementation of Stripe Checkout and Stripe CC both uses same payment method and users can use one at a time. But, as Stripe Checkout new API has different workflow, I've suggested to have a separate payment method for Stripe Checkout which will be a better UX for users, developers and support point of view. I and Ravinder both agreed that we should create Stripe Checkout as a separate payment method.

@DevinWalker Need your thoughts on the call summary.

mehul0810 commented 5 years ago

@DevinWalker @mathetos I've created demo video to show how the new Stripe checkout workflow will proceed with Give. This new Stripe Checkout will support Apple Pay and 3D secure cards by default. Also, it will redirect donor to a page instead of modal popup.

Video Link: https://www.loom.com/share/b43691a5b64047d4bb4ba176427ae9e6

Let me know your thoughts.

mehul0810 commented 5 years ago

@DevinWalker @mikejhale Here are the 3 different variations of the Stripe settings where all the payment methods of Stripe belongs to one single section/tab.

Note: I've added 3 page of Stripe settings which includes General, Credit Card, and Checkout as rest of the payment methods will have similar settings from the current version.

Variation 1

  1. General Stripe Settings - General

  2. Credit Card Stripe Settings - Checkout

  3. Checkout Stripe Settings - Checkout

Variation 2

  1. General Stripe Settings - General (ver 2)

  2. Credit Card Stripe Settings - Credit Card (ver 2)

  3. Checkout Stripe Settings - Checkout (ver 2)

Variation 3

  1. General Stripe Settings - General (ver 3)

  2. Credit Card Stripe Settings - Credit Card (ver 3)

  3. Checkout Stripe Settings - Checkout (ver 3)

Let me know your thoughts.

mathetos commented 5 years ago

I really like Variation 2, vertical tabs, staying in the Payment Gateway area. This would require an update to our Settings API which I could imagine could be useful for other plugins as well (Maybe fix our Currency Switcher settings problem with the sources being out of the configuration workflow).

I think it's important from a UX perspective that the payment gateway info stays within the payment gateway area, where users expect it, so taking the extra effort to maintain that user expectation I think is worth it.

mikejhale commented 5 years ago

@mehul0810 I'm getting an exception when trying to make a donation under the following scenario:

New Donation Form with default settings. Give Stripe add-on is not installed. Settings > Payment Gateways > Stripe > Checkout Checkout Type: = Redirect


! ) Fatal error: Uncaught Error: Call to undefined function give_stripe_is_preapproved_enabled() in C:\Users\mike\Local Lightning Sites\give-wp\app\public\wp-content\plugins\givewp\includes\gateways\stripe\includes\payment-methods\class-give-stripe-checkout.php on line 280
--

1 | 0.0007 | 403568 | {main}( ) | ...\index.php:0
2 | 0.0013 | 403768 | require( 'C:\Users\mike\Local Lightning Sites\give-wp\app\public\wp-blog-header.php' ) | ...\index.php:17
3 | 0.0013 | 403992 | require_once( 'C:\Users\mike\Local Lightning Sites\give-wp\app\public\wp-load.php' ) | ...\wp-blog-header.php:13
4 | 0.0020 | 404600 | require_once( 'C:\Users\mike\Local Lightning Sites\give-wp\app\public\wp-config.php' ) | ...\wp-load.php:37
5 | 0.0020 | 405440 | require_once( 'C:\Users\mike\Local Lightning Sites\give-wp\app\public\wp-settings.php' ) | ...\wp-config.php:77
6 | 0.0614 | 2887216 | do_action( ) | ...\wp-settings.php:525
7 | 0.0614 | 2887488 | WP_Hook->do_action( ) | ...\plugin.php:465
8 | 0.0614 | 2887488 | WP_Hook->apply_filters( ) | ...\class-wp-hook.php:310
9 | 0.0938 | 3317960 | give_post_actions( ) | ...\class-wp-hook.php:286
10 | 0.0943 | 3319552 | do_action( ) | ...\actions.php:82
11 | 0.0943 | 3320848 | WP_Hook->do_action( ) | ...\plugin.php:465
12 | 0.0943 | 3320848 | WP_Hook->apply_filters( ) | ...\class-wp-hook.php:310
13 | 0.0944 | 3321664 | give_process_donation_form( ) | ...\class-wp-hook.php:286
14 | 0.1587 | 3402032 | give_send_to_gateway( ) | ...\process-donation.php:206
15 | 0.1587 | 3402672 | do_action( ) | ...\functions.php:186
16 | 0.1587 | 3402944 | WP_Hook->do_action( ) | ...\plugin.php:465
17 | 0.1587 | 3402944 | WP_Hook->apply_filters( ) | ...\class-wp-hook.php:310
18 | 0.1587 | 3403760 | Give_Stripe_Checkout->process_payment( ) | ...\class-wp-hook.php:286
19 | 0.9702 | 4035784 | Give_Stripe_Checkout->process_checkout( ) | ...\class-give-stripe-checkout.php:154

When give-stripe is enabled this exception does not occur. It looks like give_stripe_is_preapproved_enabled() is defined only in the give-stripe addon.

mikejhale commented 5 years ago

Also, when Checkout Type is set to "Redirect", the Credit Tab tab is visible, but if you click on it, it is blank. There should be a message stating that those options are not availble when in redirect mode.

blank-cc-tab-when-redirect

mikejhale commented 5 years ago

When Saving Changes on the Checkout or Credit Card tabs , I noticed a quick flash of the General settings tab as it saves.

https://www.loom.com/share/f909892feead47ab8b82248b86cb9fe9

mikejhale commented 5 years ago

At (approx.) 1420px wide, the settings fall below the tabs. This should be more responsive.

give-stripe-settings-responsive

mikejhale commented 5 years ago

The Donation Processing... text needs some sort of background to make it more visible above the donation form.

donation-processing

mikejhale commented 5 years ago

With Google Pay enabled, viewing on my Android phone I don't see any donate button:

Google pay

mehul0810 commented 5 years ago

@mikejhale I've resolved all the points you mentioned here except the Google Pay button not displaying.

Google Pay button is displayed properly on my local as well as LIVE demo site on Pantheon.

Please take the latest pull again and let me know your thoughts.

mikejhale commented 5 years ago

I Re-tested this was unable to find any further issues.

Issues from comments above that have been fixed:

Testing the following gateway scenarios:

Tested and confirmed by @Benunc: