Skip to content

Make payment method forms dynamic based on #type and #preference_source - #6706

Open
benjaminwil wants to merge 6 commits into
solidusio:mainfrom
benjaminwil:payment-method-dynamic-forms
Open

benjaminwil wants to merge 6 commits into
solidusio:mainfrom
benjaminwil:payment-method-dynamic-forms

Conversation

@benjaminwil

@benjaminwil benjaminwil commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Summary

This pull request makes the payment method configuration forms in solidus_admin more dynamic. Each type of Spree::PaymentMethod contains its own list of settings (Spree::Preferences). In order to make the forms dynamic, I needed to build out a component for each preference field that Solidus supports.

This mirrors the legacy solidus_backend functionality quite closely. However, this dynamic form functionality works for both new records and persisted records. In solidus_backend, dynamic forms were only enabled for already-persisted payment method records.

Demos

Dynamic form replacement on #preference_source change

Here's a video of the payment method Preference Source being toggled between no preference source and a static preference source. See how the fields are auto-filled and marked as disabled.

This functionality works on forms for new records as well as records being edited.

Screencast.From.2026-10-21.15-28-11.webm

Dynamic form replacement on #type change

Here's a video of the payment method Type being changed. See how the fields are replaced with the correct preference fields for each payment type.

This functionality works on forms for new records as well as records being edited.

Screencast.From.2026-10-21.15-22-04.webm

All supported preference fields

Here's a screenshot of all of the preference fields being rendered as part of the form for a Bogus Credit Card type payment method.

The 'Deployment' panel of the Bogus Credit Card payment method type

Checklist

Check out our PR guidelines for more details.

The following are mandatory for all PRs:

The following are not always needed:

  • 📖 I have updated the README to account for my changes.
  • 📑 I have documented new code with YARD.
  • 🛣️ I have opened a PR to update the guides.
  • ✅ I have added automated tests to cover my changes.
  • 📸 I have attached screenshots to demo visual changes.

@github-actions github-actions Bot added changelog:solidus_core Changes to the solidus_core gem changelog:solidus_admin labels Oct 21, 2026
@benjaminwil benjaminwil changed the title Payment method dynamic forms Make payment method forms dynamic based on #type and #preference_source Oct 21, 2026
@benjaminwil
benjaminwil force-pushed the payment-method-dynamic-forms branch 3 times, most recently from 6219bb0 to 4c532a4 Compare October 21, 2026 22:13
@github-actions github-actions Bot added the changelog:solidus_backend Changes to the solidus_backend gem label Oct 21, 2026
@benjaminwil
benjaminwil force-pushed the payment-method-dynamic-forms branch from 4c532a4 to f21a2ea Compare October 21, 2026 22:14
@github-actions github-actions Bot removed the changelog:solidus_backend Changes to the solidus_backend gem label Oct 21, 2026
@benjaminwil
benjaminwil force-pushed the payment-method-dynamic-forms branch 3 times, most recently from 273af57 to fd10e25 Compare October 21, 2026 22:40
@codecov

codecov Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 99.04762% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 92.50%. Comparing base (6f5b2b9) to head (55e9c17).
⚠️ Report is 4 commits behind head on main.

Files with missing lines Patch % Lines
...lidus_admin/ui/preference_fields/base/component.rb 96.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6706      +/-   ##
==========================================
+ Coverage   92.47%   92.50%   +0.02%     
==========================================
  Files        1065     1074       +9     
  Lines       21541    21637      +96     
==========================================
+ Hits        19921    20016      +95     
- Misses       1620     1621       +1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@benjaminwil
benjaminwil marked this pull request as ready for review October 21, 2026 23:15
@benjaminwil
benjaminwil requested a review from a team as a code owner October 21, 2026 23:15

@jarednorman jarednorman left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something looks off to me here, and I'm not 100% what's going on.

@benjaminwil
benjaminwil force-pushed the payment-method-dynamic-forms branch 3 times, most recently from 101d538 to fac6b42 Compare October 23, 2026 17:47

@jarednorman jarednorman left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The create feature tests doesn't actually assert the values of Server and Test Mode, and if they did, they would fail.

@benjaminwil
benjaminwil force-pushed the payment-method-dynamic-forms branch from fac6b42 to 68be504 Compare October 28, 2026 18:20
@benjaminwil

Copy link
Copy Markdown
Contributor Author

I have resolved the outstanding issues and rebased against main.

@benjaminwil
benjaminwil force-pushed the payment-method-dynamic-forms branch from 68be504 to 9ab3944 Compare October 29, 2026 18:29
@benjaminwil

benjaminwil commented Oct 29, 2026 •

Copy link
Copy Markdown
Contributor Author

I updated the commit that adds preference fields after receiving feedback on it on #6713.

(If more discussion is required on this pull request, I'm hoping we can at least merge that separately and make this diff smaller.)

@benjaminwil
benjaminwil force-pushed the payment-method-dynamic-forms branch from 9ab3944 to 7923d4a Compare October 29, 2026 18:49
Preference-enabled models (like `Spree::PaymentMethod` subclasses and
`Spree::Calculator` subclasses) allow admin users to configure
preferences on records from the admin interface. To support this in the
new admin, we can add preference field components for each form-enabled
preference type that has been historically supported in `solidus_core`
and `solidus_backend`.

The component previews are rendering in tests and via Lookbook right
now. In a subsequent commit I will wire up these components to work
dynamically with payment method admin forms.
In a subsequent commit, I want to test a form field with hints:

    fill_in "Field Label", with: "new value"

Before this commit, Capybara would be unable to find the field because
the hint text was inside the label.

Some Tailwind utilties need to be removed because of this new DOM tree.
However, I don't think they were super valuable to begin with: we only
render that part of the DOM if the tip or error variables are truthy.
Some form fields and their values must be dynamically changed during
editing for a better user experience:

- Preference Source: If the preference source becomes set, then all of
  the preferences should become disabled. The admin can no longer change
  the preference field values; they have chosen to use static
  preferences that are declared in the code. If they change their minds,
  then the preference field values should become editable again.

- Type: Each payment method type has different preferences. So we must
  render the relevant preferences depending on the selected payment method
  type.

Using Stimulus we can replace the "Deployment" panel whenever the user
makes a change to either of these settings.

Like `solidus_backend`, we must choose the correct preference field
component to render for each kind of form-enabled preference that is
supported in `solidus_core`.

To better show off and test this integration, I have made sure that the
Bogus Credit Card payment method has translated preference names and
preference hints. This acts as documentation for extension developers
who may also want to provide nice labels and hints for their preference
fields. Also note that the "Test Mode" preference translations are added
for all payment methods.
If the payment method being configured uses a preference source, the
preference fields should still be visible but they should be disabled.

Because I brought in `Spree::TestingSupport::Preferences`, some
unrelated tests that stubbed `Spree::Config` started failing. To
resolve, I have refactored them to also use the preference stubbing
method.
@benjaminwil
benjaminwil force-pushed the payment-method-dynamic-forms branch from 7923d4a to 55e9c17 Compare October 29, 2026 21:46

@jarednorman jarednorman left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the encrypted string component spit the encrypted values straight into the view?

@benjaminwil

Copy link
Copy Markdown
Contributor Author

Can that be captured as a separate issue? The way it is now is parity with solidus_backend.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

2 participants