feat: improve UX for stripe core and premium

[DevinWalker]

Feature Request

As a Give user I want to be sure that the addition of Stripe features in Give Core 2.5.0 are beneficial to me if I'm an existing free user, a current or unlicensed premium Stripe user, or an entirely new user so that I'm not confused on the various offerings and can configure the plugin clearly.

User Stories

The following user stories need to be reviewed, revised, developed, and tested before the integration is complete.

New Plugin Users

This is a new site that has not had Give installed on it before and has just installed the plugin for the first time. They are a brand new user that does not have the Stripe Add-on installed.

1. Installs Give
2. User is redirected to the "Welcome Screen > Getting Started" tab.

Acceptance Criteria

• [x] Stripe is an enabled payment gateway by default but not connected
• [x] The Welcome Screen displays the "Getting Started" tab by default and there is a new section explaining payment gateways and user can connect directly here.
• [x] An updated "Stripe Connect" notice displays on Give related screens.
• [x] The user can dismiss the banner if the gateway is enabled and they are not connected. The banner will reappear in 24 hours if the gateway is still enabled and the API keys are not in use.
• [x] If the free Stripe payment gateway is connected the additional fees are added to one-time payments

Note: If the site does not have an SSL Certificate and the user visits a donation form on the frontend then Stripe will display a prompt explaining an SSL is necessary. Stripe Elements will not display on non-SSL sites.

---

Existing Plugin Users

This is a site that has already had Give installed from a previous version. They are not running the Stripe Add-on but may have other premium add-ons active.

1. Upgrades Give to 2.5.0
2. Stripe is not an active gateway but displays in the list of available payment gateways.

Acceptance Criteria

• [x] Apple Pay and Google Pay is enabled by default when the existing users have related Stripe settings enabled when add-on is active.
• [x] Give Stripe Core displays
• [x] Stripe can be configured as an additional gateway if the user enables it as a payment gateway
• [x] If the free Stripe payment gateway is enabled and connected the additional fees are added to one-time payments

---

Existing Plugin Users with the Stripe 2.2.0 Add-on

This is a site that has already had Give installed from a previous version and they are running the Stripe 2.2.0 add-on and likely other premium add-ons. They most likely updated Stripe at the same time they are activating Give Core. This user is already connected to Stripe.

1. Upgrades Give Core to 2.5.0 and Give Stripe to 2.2.0 at the same time
2. The user is redirected to the "What's New" tab of the Welcome screen.

Acceptance Criteria

• [x] Stripe is not deactivated as a payment gateway
• [x] No fees are added to one-time or recurring donations
• [x] The Stripe connection is not interrupted at all
• [x] The user is not prompted to connected or promoted the free Stripe in anyway

---

Existing Plugin Users with an Outdated Stripe Paid Add-on

In this scenario, this user is already connected to Stripe and upgrades to Give Core 2.5.0 but does not update the Stripe Add-on. This is a site that has already had Give installed from a previous version and they are running an outdated Stripe <2.2.0 add-on and likely other premium add-ons (like Recurring Donations especially!!). The user most likely forgot to activate their license or have not renewed hence they don't receive updates but they are updating Give Core.

Acceptance Criteria

• [x] Stripe is not deactivated as a payment gateway
• [x] Payments continue to process on the older version of the Stripe add-on
• [x] No fees are added to one-time and recurring donations
• [x] The Stripe connection is not interrupted at all
• [x] The user is not prompted to connected or promoted the

Visuals

The following wireframes will help shape the actual user experience.

No SSL cert or not connected

This notice displays when Stripe is either not connected or are not running on HTTPs and the admin or donor views the donation form Credit Card gateway.

• [x] Notice properly displays when not connected, no API keys, or not running HTTPs
• [x] Notice is removed when criteria is met
• [x] Notice text is: > Notice: Credit card fields are disabled because Stripe is either not connected or your site is not running securely over HTTPs.

New Install "Getting Started" tab

The following is a new tab presented to entirely new users. The new "Configure Payment Methods" step will explain the free Stripe version, the added fee, and present the option to view additional gateways.

• [x] Designs are created for the
• [x] Content is drafted, reviewed, and finalized for the additional sections
• [x] New section is developed

New Install - Payment Gateways Screen Notice

In this screen Stripe a new install user has navigated to Settings > Gateways and does not have Stripe Connected yet. This notice will display when no other premium gateways are enabled (like it does now) and if Stripe has not yet been connected.

• [x] Refactor is based off the existing notice that displays code
• [x] Notice displays when the free Stripe is not connected
• [x] Notice is hidden if any other premium gateway is enabled
• [x] Notice is hidden if free Stripe is connected
• [x] Notice contains a working Stripe Connect button

New "What's New" Tab

This tab displays the change log for users who have already been running Give. They have completed the upgrade.

Important: After reviewing how the upgrade process works now, existing users may never see this screen when updating. This is a point for discussion.

• [x] The changelog readme is parsed into a scrollable container

Free Stripe Payment Gateway Settings

This image shows where the free Stripe additional fee description displays.

• [x] Important: This description is removed when the paid version is installed.

Stripe Connect Banner

Currently when someone installs the paid Stripe add-on a connect banner displays that is dismissible for 24 hours. Once someone connects they are brought back to the Stripe settings page where they can see they are connected and also view the fee description.

• [x] This banner will displays in the free version of the plugin
• [x] This banner displays properly in the pro version
• [x] The banner does not display on the Settings > Payment Gateways page or the Stripe Settings pages. (This is because there are already connect buttons on those pages.)
• [x] The banner does not display on any of the welcome screens.
• [x] The banner does not display once connected or when using API keys.

[mehul0810]

Update on SSL & No API Key error

1. When donation forms are accessed with HTTPS and No API Keys

2. When donation forms are accessed without HTTPS and No API Keys

3. When donation forms are accessed with HTTPS and Stripe connected (Connect button or manual API keys)

4. When donation forms are accessed without HTTPS and Stripe connected (Connect button or manual API keys)

[mehul0810]

Free Stripe Payment Gateway Settings

1. When Stripe Premium add-on is active

2. When Stripe Premium add-on is NOT active.

@DevinWalker Let me know what page to link on the Learn More link in the field description?

Stripe Connect Banner

1. When Connect button is displayed but Stripe account is not connected.

2. When manual API keys option selected

@DevinWalker I need more clarity on what welcome screens we don't want the connect button banner to be displayed?

Also, let me know if there is a change in the UI.

[mehul0810]

New Install - Payment Gateway Screen Notice

@DevinWalker The screenshot of the notice will display as per the acceptance criteria mentioned above. Also, let me know which URL I need to link to for the help (question mark) tooltip in the notice.

[DevinWalker]

Responses

1. Link the "Learn more" here: http://docs.givewp.com/addon-stripe

2. When manual keys are enabled don't display the banner at all. Remove it completely since they likely don't want to connect.

3. Don't display on the following welcome screens: http://give.test/wp-admin/index.php?page=give-about or any of the subtabs

4. The tooltip looks unstyled, please fix in the "New Install - Payment Gateway Screen Notice"

5. The tooltip will not have a link anywhere, only the text I've provided.

[mehul0810]

@DevinWalker Please find the update.

Link the "Learn more" here: http://docs.givewp.com/addon-stripe

• Added link to Learn more.

When manual keys are enabled don't display the banner at all. Remove it completely since they likely don't want to connect.

• Removed the notice when manual API keys are enabled from admin settings.

Don't display on the following welcome screens: http://give.test/wp-admin/index.php?page=give-about or any of the subtabs

• Removed connect banner from about page and all of its sub-tabs.

The tooltip looks unstyled, please fix in the "New Install - Payment Gateway Screen Notice" The tooltip will not have a link anywhere, only the text I've provided.

• I've now removed that tooltip and replaced it with the default class of tooltip which renders hint.css. Please see screenshot below:

[mehul0810]

Slack Call Summary

Participants: @ravinderk @mehul0810 Topic: Discussion on the workability of enabled payment gateways to make specific gateway active based on settings. Result: Ravinder explained to me how the enabled payment gateway list works based on which I'll enable Stripe as active gateway for fresh installs and also enable Google/Apple Pay gateway if the existing user has settings enabled for the same.

[mehul0810]

Slack Call Summary

Participants: @mehul0810 @ravinderk Topic: Discussion on not getting the proper output from DB using fn give_get_option Results: I had a call with Ravinder twice and then doing an in-depth debugging. I've noticed that the implementation of Stripe add-on is causing the issue. Hence, I've changed the Automatic Upgrade routine implementation in Stripe add-on as per the Give core.

@ravinderk Can you please review the commit and verify that everything looks good? https://github.com/impress-org/give-stripe/commit/b5f48c5af2a6f50a811c11752f8379a77a47c1bd

[ravinderk]

@mehul0810 Above commit looks good to me

[mehul0810]

Adding this comment to keep track on the style issue on the Give settings page due to the admin notices.

[ravinderk]

Closing this issue and merging issue/4076 to issue/4010 as per discussion https://givewp.slack.com/archives/C0FAGC83C/p1558327867004100