Add Stripe Form Field & Temporary Submission Saving

[Soare-Robert-Daniel]

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

1. You a Form with some Stripe fields (you can as many as you want)
2. When you press Submit, you will be redirected to the Stripe Checkout Session page (similar to Stripe Checkout Block)
3. 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.
4. Go back to the Stripe session and complete the payment with some dummy data.
5. 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.
6. 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]

@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]

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]

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]

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]

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]

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"

[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]

@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]

@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]

@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]

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]

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

[Soare-Robert-Daniel]

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

[irinelenache]

@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]

Can we remove this?

[HardeepAsrani]

@Soare-Robert-Daniel

[Soare-Robert-Daniel]

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

[HardeepAsrani]

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

[pirate-bot]

🎉 This PR is included in version 2.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀