Add Stripe Field

[Soare-Robert-Daniel]

Closes #.

Summary

• Add frontend display for Stripe field.

Screenshots

---

Test instructions

---

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, we need your help with how the Stripe field for Form will look.

For the current implementation, we have this design (also for Inspector on the right):

A side-by-side comparison with the current Stripe Checkout Block

[mghenciu]

More details would help about this feature, @Soare-Robert-Daniel .
If I am understanding this correctly, it's basically a trigger from a form - that will go to a Stripe Checkout page.

[Soare-Robert-Daniel]

@mghenciu, you got it right. In the form, we just display the product. The payment page will be handled by Stripe.

[Soare-Robert-Daniel]

@Codeinwp/design-team, one thing to be aware. The plan to use Stripe's checkout session might not be feasible since Stripe recommends another type of workflow: https://stripe.com/docs/payments/finalize-payments-on-the-server

The Form will look something like this:

[Soare-Robert-Daniel]

@HardeepAsrani Regarding the usage of Stripe Checkout Session like in Stripe Checkout Block. Here is the workflow that I am thinking about (assuming that the admin will take care of failed workflows):

flowchart LR
    A(Form) --> B{User Click Submit}
    B -->|No Stripe Field| C[Full Form Workflow]
    B -->|Stripe Field Detected| DataCheck[Check the data]
    subgraph save [Temp Save Workflow]
    DataCheck --> FileSave[Save the input data & files as Submission]
    end
    FileSave --> Products
    subgraph stripe [Create Stripe Session]
    Products[Get the products on the form using WP Options] --> Session[Create a checkout session using Checkout API]
    end
    Session --> D[Redirect the user to Checkout Sessiont]
    D --> E{User in Checkout Session}
    E -->|Attempt Payment| F{Payment Successful}
    F --> Redirect[Redirect with Submission ID]
    E -->|Payment Attempt Failed| H[End with Error]
    H --> Redirect
    F -->|Payment Failed| H
    Redirect --> RemainingAction[Run remaining actions. E.g: autoresponder, webhooks]
    RemainingAction --> Result{Form final result}
    Result --> |Is Error| FormError[Show an error and tell the client that the payment was done and admin will revise the issue]
    Result --> |Ok| FormOK[Show Success Message]

Loading

[HardeepAsrani]

@Soare-Robert-Daniel That looks good. We can stick to the Stripe Checkout Block style implementation and tackle any concerns you have about the workflow during the L10 today.

[mghenciu]

After a discussion with Robert on Slack, and some design exploration - we got to this version >> Figma.

---

[JohnPixle]

Looking good gentlemen, thanks!