Add Stripe Form Field & Temporary Submission Saving #1798

Soare-Robert-Daniel · 2023-08-02T14:22:05Z

Closes #.

Summary

This combines the PRs #1778 and #1769

Screenshots

Test instructions

⚠️ You will need an Otter Pro Key and a Stripe account (test mode) with some products.

The flow of the Stripe Field

You a Form with some Stripe fields (you can as many as you want)
When you press Submit, you will be redirected to the Stripe Checkout Session page (similar to Stripe Checkout Block)
Before completing the Card form, go to the Otter Submission page in another browser tab. You will see the post Marked as a Draft -- more about this behavior: Add temporary saving for form submissions #1769.
Go back to the Stripe session and complete the payment with some dummy data.
After completing the payment, you will be redirected to the same page, but the URL will have a special param called stripe_checkout. That is the ID of the session, and it will be used to determine if a user has paid or not.
If you see the Success message and go back to Otter Submission, you will see that the submission is no longer a Draft

ℹ️ If you enable webhook and autoresponder, while in the paying stage, those should not trigger. They must trigger ONLY if the payment is paid (you check this in Stripe Dashboard marked as Complete).

⚠️ To confirm the Submission, you must be on the redirect that Stripe will offer to you. If not, the submission will stay as a Draft.

ℹ️ If the payment is marked as done, but you did not visit the special URL. We have a corn job that runs every hour (this value is still in discussion) and checks if there are Submissions in Draft mode but with complete payment. If it detects such cases, it will trigger the confirmation process and the remaining functions (webhooks, autoresponder).

You must test if:

The Stripe Checkout Page has the same products listed in the Form. If not, this is a sync issue, and you will need to provide the test instance.
The Webhook, autoresponder, etc trigger before the payment is finished.

⚠️ Have in mind the other Form issues that have been reported: #1802 #1804, which will be solved in different PR

Checklist before the final review

Included E2E or unit tests for the changes in this PR.
Visual elements are not affected by independent changes.
It is at least compatible with the minimum WordPress version.
It loads additional script in frontend only if it is required.
Does not impact the Core Web Vitals.
In case of deprecation, old blocks are safely migrated.
It is usable in Widgets and FSE.
Copy/Paste is working if the attributes are modified.
PR is following the best practices

Soare-Robert-Daniel · 2023-08-03T13:45:33Z

@Codeinwp/design-team, here is a short preview of the workflow

2023-08-03.16-40-34.mp4

ℹ️ We decided to use the Stripe Checkout session.

When you press submit for the first name, the data from the field are saved into the Submissions table as Draft. After the payment has been made, Stripe will redirect you to the same page and Submission will change its status from 'Draft' to Unread.

mghenciu · 2023-08-04T06:28:18Z

Thank you for the update Robert.

To summarise, the idea behind this feature is to redirect the users to a Stripe Checkout form - but also add a new submission in the Otter Submissions list.

From the previous question:

@design-team, we need your help with how the Stripe field for Form will look.

are you referring to how should this look in the backend or frontend?

Also regarding the error handling and different states that at Stripe Checkout could end with, how are we managing those. For example let's say the user closes the Stripe Checkout tab, basically abandoning the flow. What would happen to the Otter form?

Thank you!

Soare-Robert-Daniel · 2023-08-04T06:42:10Z

are you referring to how should this look in the backend or frontend?

Yes,

Also regarding the error handling and different states that at Stripe Checkout could end with, how are we managing those. For example let's say the user closes the Stripe Checkout tab, basically abandoning the flow. What would happen to the Otter form?

Since we use the Stripe Checkout Session, do not need to handle errors from Stripe. Stripes give us two options: success and cancel. If it is a success, we display the success message of the form. If cancel, we display the error with unpaid purchase.

Now, if you are in the stripe checkout session, close the tab. Nothing will happen to the user regarding the Form -- the same behavior can be seen in Stripe Checkout Block. But since we save the submission, the submission will remain in the database as Draft. As discussed with @HardeepAsrani, if you see multiple submissions in the Draft state, you will have a clue that something is wrong: webhook does not work properly, no autoresponder, or people, can not complete the payment in Stripe.

The Form will react only when it is open in a URL that has the param stripe_checkout attached to it -- same behavior as in
Stripe Checkout Block. And this URL is generated by Stripe at the end of the checkout session on their page (you can see the redirect in the video).

pirate-bot · 2023-08-04T13:29:03Z

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	272.72 KB	274.67 KB	1.95 KB (0.71%)
Blocks	1.45 MB	1.45 MB	8.24 KB (0.56%)
CSS	87.22 KB	89.17 KB	1.95 KB (2.23%)
Dashboard	124.43 KB	126.38 KB	1.95 KB (1.57%)
Export Import	85.11 KB	87.06 KB	1.95 KB (2.29%)
Pro	328.78 KB	345.2 KB	16.42 KB (4.99%)

pirate-bot · 2023-08-04T13:30:08Z

Plugin build for 22edc4f is ready 🛎️!

Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
Download Otter Pro - Production ~ Development
Download Blocks Animation - Production ~ Development
Download Blocks CSS - Production ~ Development
Download Blocks Export Import - Production ~ Development

pirate-bot · 2023-08-07T11:22:41Z

E2E Summary

Typing

Test	Average Time (ms)	Standard Deviation (ms)	Median Time (ms)	Quantile for soft limit (%)	Quantile for hard limit (%)
Typing	55.6	3.74	55.12	78.95 (60ms)	100 (80ms)

Values above 60ms

"3 - 61.06, 10 - 62.35, 12 - 62.89, 15 - 60.84"

src/dashboard/components/pages/Integrations.js

inc/server/class-form-server.php

plugins/otter-pro/inc/plugins/class-form-emails-storing.php

HardeepAsrani

I've left few nits here and there but overall looks good. We need to do a through QA here to confirm the new and the existing features work as before with and without the Pro being installed.

irinelenache · 2023-08-23T10:45:38Z

@Soare-Robert-Daniel After adding 2 Stripe fields on an existing form (from Web agency starter site), i got a fatal error when i opened the page in frontend

Warning:  require(/s3-mole-fixes/wordpress/wp-content/plugins/otter-pro/inc/css/blocks/class-form-stripe-field-css.php): failed to open stream: No such file or directory in /s3-mole-fixes/wordpress/wp-content/plugins/otter-pro/autoloader.php on line 148
Fatal error:  require(): Failed opening required '/s3-mole-fixes/wordpress/wp-content/plugins/otter-pro/inc/css/blocks/class-form-stripe-field-css.php' (include_path='.:/usr/share/php') in /s3-mole-fixes/wordpress/wp-content/plugins/otter-pro/autoloader.php on line 148

Soare-Robert-Daniel · 2023-08-23T11:43:06Z

@irinelenache, I updated your instance.

⚠️ It seams that your stripe account does not allow the creation of checkout session. I replaced it with mine.

irinelenache · 2023-08-24T07:40:38Z

@Soare-Robert-Daniel

The redirect on submit feature doesn't work after finishing the Stripe payment https://vertis.d.pr/v/dGPZiL
Is it expected to have this many cron events tied to the form? https://vertis.d.pr/v/SW66ov I tried to delete them all and got about 6 new ones in 2 minutes
I tried to manually run all cron events related to the form and the submission was still in draft, also the post submission events didn't happen

You can check here:

 Admin area URL: https://mole-fixes.s3-tastewp.com/wp-admin 
 Username: irinel 
 Password: jButlSpxvLQ

Soare-Robert-Daniel · 2023-08-24T09:31:02Z

The problem regarding the cron should be solved now 🔧 -- the name of the event was not the same as the one of the hook, thus the multiple spawn.

Regarding the redirect option for the Form, it doesn't work automatically in the confirmation process. The redirect does not happen if the event is not user-related ( It does not press any button).

~~To make it work, the user has to press on something. So, I added the confirmation link near the Submit Button.~~

irinelenache · 2023-08-24T10:54:17Z

@Soare-Robert-Daniel Tested the latest changes and everything is fine now 👍

Soare-Robert-Daniel · 2023-08-24T11:01:46Z

ℹ️ Now, redirect behavior will be switching the link in the same tab rather than opening a new one.

irinelenache · 2023-08-24T13:44:42Z

@Soare-Robert-Daniel Had another look regarding the issue discussed on Slack and it's fixed now, i'll move this to Ready to merge ✅

HardeepAsrani · 2023-08-25T04:23:32Z

.fleet/settings.json

@@ -0,0 +1,3 @@
+{
+    "toolchains": []


Can we remove this?

@Soare-Robert-Daniel

Yes. And better put it to .gitignore since it is IDE-related.

Can you make the changes? Delete it and put it in gitignore?

pirate-bot · 2023-09-21T11:23:02Z

🎉 This PR is included in version 2.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Soare-Robert-Daniel added 13 commits July 14, 2023 17:48

feat: add temporary saving for form submissions

ab61085

feat: form submission confirmation workflow

8764575

chore: confirmation workflow in frontend

3ef2c59

Merge branch 'next' into feat/temp-form-save

0d0e374

chore: add temp save under debug flag

c6e6d0e

chore: confirm only the draft submissions

64fdbb4

chore: add session id workflow

f1eeac2

feat: stripe field display

6621e48

chore: create the stripe checkout session & tweaks

1ddd12c

Merge branch 'next' into feat/form-stripe-field

93fe7a4

Merge branch 'next' into feat/temp-form-save

4227cac

Merge branch 'feat/form-stripe-field' into feat/form-stripe-complet

01c29b5

chore: combine temp saving with stripe field

65ade9d

Soare-Robert-Daniel self-assigned this Aug 2, 2023

chore: add automatic confirmation cron

b5227a6

Soare-Robert-Daniel added 2 commits August 4, 2023 14:18

chore: unified save request for Form & Form Fields

4643aec

chore: stripe field input width

0b92f43

Soare-Robert-Daniel added the pr-checklist-skip Allow this Pull Request to skip checklist. label Aug 4, 2023

Soare-Robert-Daniel marked this pull request as ready for review August 4, 2023 13:26

chore: clean-up & minor tweaks

566b37e

pirate-bot added the pr-checklist-complete The Pull Request checklist is complete. (automatic label) label Aug 7, 2023

chore: e2e hotfix

88e7cc9

Soare-Robert-Daniel requested a review from HardeepAsrani August 7, 2023 11:14

chore: remove unused code chunks

da0cd6d

HardeepAsrani reviewed Aug 10, 2023

View reviewed changes

src/dashboard/components/pages/Integrations.js Outdated Show resolved Hide resolved

chore: code review

3894254

Soare-Robert-Daniel requested a review from HardeepAsrani August 11, 2023 14:10

HardeepAsrani reviewed Aug 12, 2023

View reviewed changes

inc/server/class-form-server.php Outdated Show resolved Hide resolved

HardeepAsrani reviewed Aug 12, 2023

View reviewed changes

plugins/otter-pro/inc/plugins/class-form-emails-storing.php Outdated Show resolved Hide resolved

HardeepAsrani reviewed Aug 12, 2023

View reviewed changes

plugins/otter-pro/inc/plugins/class-form-emails-storing.php Outdated Show resolved Hide resolved

HardeepAsrani approved these changes Aug 12, 2023

View reviewed changes

Soare-Robert-Daniel added 2 commits August 21, 2023 11:00

chore: code review

2d72965

chore: incorrect order of spinner activation

5d2a477

Soare-Robert-Daniel added 2 commits August 23, 2023 13:59

Merge branch 'next' into feat/form-stripe-complet

dacb523

chore: rename php file

da58c72

chore: add support for subscription payments

08dd607

chore: cron job name & stripe redirect

eec4106

chore: color for form redirect link

0d83257

chore: form redirect behaviour

e2b9c1c

chore: stripe field in common

bc27239

HardeepAsrani reviewed Aug 25, 2023

View reviewed changes

Soare-Robert-Daniel added 2 commits August 25, 2023 09:55

chore: delete IDE Fleet settings

388e3b2

chore: add Fleet in .gitignore

22edc4f

HardeepAsrani merged commit 01a4e17 into next Sep 2, 2023
11 checks passed

HardeepAsrani deleted the feat/form-stripe-complet branch September 2, 2023 10:02

pirate-bot added the released Indicate that an issue has been resolved and released in a particular version of the product. label Sep 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Stripe Form Field & Temporary Submission Saving #1798

Add Stripe Form Field & Temporary Submission Saving #1798

Soare-Robert-Daniel commented Aug 2, 2023 •

edited

Loading

Soare-Robert-Daniel commented Aug 3, 2023

mghenciu commented Aug 4, 2023

Soare-Robert-Daniel commented Aug 4, 2023

pirate-bot commented Aug 4, 2023 •

edited

Loading

pirate-bot commented Aug 4, 2023 •

edited

Loading

pirate-bot commented Aug 7, 2023 •

edited

Loading

HardeepAsrani left a comment

irinelenache commented Aug 23, 2023

Soare-Robert-Daniel commented Aug 23, 2023

irinelenache commented Aug 24, 2023 •

edited by Soare-Robert-Daniel

Loading

Soare-Robert-Daniel commented Aug 24, 2023 •

edited

Loading

irinelenache commented Aug 24, 2023

Soare-Robert-Daniel commented Aug 24, 2023

irinelenache commented Aug 24, 2023

HardeepAsrani Aug 25, 2023

HardeepAsrani Aug 25, 2023

Soare-Robert-Daniel Aug 25, 2023

HardeepAsrani Aug 25, 2023

pirate-bot commented Sep 21, 2023

Add Stripe Form Field & Temporary Submission Saving #1798

Add Stripe Form Field & Temporary Submission Saving #1798

Conversation

Soare-Robert-Daniel commented Aug 2, 2023 • edited Loading

Summary

Screenshots

Test instructions

Checklist before the final review

Soare-Robert-Daniel commented Aug 3, 2023

mghenciu commented Aug 4, 2023

Soare-Robert-Daniel commented Aug 4, 2023

pirate-bot commented Aug 4, 2023 • edited Loading

Bundle Size Diff

pirate-bot commented Aug 4, 2023 • edited Loading

pirate-bot commented Aug 7, 2023 • edited Loading

E2E Summary

Typing

HardeepAsrani left a comment

Choose a reason for hiding this comment

irinelenache commented Aug 23, 2023

Soare-Robert-Daniel commented Aug 23, 2023

irinelenache commented Aug 24, 2023 • edited by Soare-Robert-Daniel Loading

Soare-Robert-Daniel commented Aug 24, 2023 • edited Loading

irinelenache commented Aug 24, 2023

Soare-Robert-Daniel commented Aug 24, 2023

irinelenache commented Aug 24, 2023

HardeepAsrani Aug 25, 2023

Choose a reason for hiding this comment

HardeepAsrani Aug 25, 2023

Choose a reason for hiding this comment

Soare-Robert-Daniel Aug 25, 2023

Choose a reason for hiding this comment

HardeepAsrani Aug 25, 2023

Choose a reason for hiding this comment

pirate-bot commented Sep 21, 2023

Soare-Robert-Daniel commented Aug 2, 2023 •

edited

Loading

pirate-bot commented Aug 4, 2023 •

edited

Loading

pirate-bot commented Aug 4, 2023 •

edited

Loading

pirate-bot commented Aug 7, 2023 •

edited

Loading

irinelenache commented Aug 24, 2023 •

edited by Soare-Robert-Daniel

Loading

Soare-Robert-Daniel commented Aug 24, 2023 •

edited

Loading