Repository navigation
feat(react-ui)!: remove built-in submit button from payment-method-management - #2236
Conversation
|
I'll fix CI failures and address comments from users with write access that start with 'Devin'.
Original prompt from Manuel
|
🦋 Changeset detectedLatest commit: 11ab4c6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 17 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
 [Medium impact] The change affects hosts and workflows that use payment-method management. Update Reviews (1) · Last reviewed commit: "feat(react-ui)!: remove built-in submit ..." · Reviewed by Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…nagement The component always hides the iframe submit button; hosts submit via ref.submit() from their own button. hideSubmitButton prop removed.
4f20f63 to
bcdb88b
Compare
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
CrossmintAgentCardAuthorization renders its own button instead of relying on the iframe's built-in one, so the payment-method iframe never needs a submit affordance for SDK majors >= 5.
E2E verified: real component mount saves a card through
|
…submit errors The SDK now sends hostShowsSubmitErrors=true with hideSubmitButton=true. The host gets the message of an invalid or failed submit from ref.submit() and shows it, so the iframe draws only field errors and does not show the message twice (Paella-Labs/crossbit-main#33628). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…remove-submit-button # Conflicts: # apps/payments/nextjs/app/payment-method-management/page.tsx # packages/client/base/src/types/payment-method-management/CrossmintPaymentMethodManagementProps.ts
…ample The component renders no submit button, so the example wires its own button to ref.current.submit() and shows the message of a failed submit. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ult codes
A host with its own submit button needs what Stripe's Payment Element gives
it: onReady when a submit can first succeed, onChange({ mode, empty,
complete }) to enable the button, and a code on invalid, failed and
unavailable results. A code the component does not know becomes "unknown".
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ange reloads the form A change of jwt or form configuration reloads the iframe. A host that enabled its button on complete kept it enabled until the new form reported. The example also clears the error when the buyer edits again. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
The code types and the result validation both come from one exported const list per status, so a new code cannot reach one and miss the other. The change event schema is checked against its type. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…e reloads in place A navigation inside the iframe keeps the URL but starts the form over. The reset that a URL change sends now runs for that reload too. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
antonio-xm
left a comment
antonio-xm
left a comment
There was a problem hiding this comment.
I think it would be good to add a test for the agent-card submit button con Continue, but this is good to go
Description
BREAKING —
CrossmintPaymentMethodManagementno longer renders a built-in submit button.hideSubmitButtonprop is removed. The iframe URL always carrieshideSubmitButton=true, so the iframe's button never renders for this SDK major.hostShowsSubmitErrors=true. The host shows themessageof aninvalidorfailedresult fromref.submit(), so the iframe draws only field errors and does not show the message twice (Paella-Labs/crossbit-main#33628).ref.submit()→payment-method:submit→PaymentMethodSubmitResult) is now the only submit API. It is unchanged and already public.sdkMetadata(already sent in the URL) and never renders the button for@crossmint/client-sdk-react-uimajors >= 5, independent of the URL param (Paella-Labs/crossbit-main#33136). Old SDKs (<= 4.x) keep the current behavior.CrossmintAgentCardAuthorizationrenders its own submit button and callsref.submit(), since the iframe never shows one under the new major. The button inheritsappearance.paymentMethodManagement.rules.PrimaryButtonstyling where provided, matching the iframe's old defaults otherwise.onReadyandonChange({ mode, empty, complete })props, like Stripe'sreadyandchangeevents, so the host's button can stay disabled until a submit can succeed. They fire only for the live iframe, and again after it reloads.invalid,failedandunavailableresults carry acode:incomplete_card,invalid_billing_address,incomplete_bank_account,save_failed,select_failed,not_ready, andtimeout(SDK side). A missing or unknown code from the iframe becomesunknown, so the result still resolves. Each status has one exportedas constcode list (PAYMENT_METHOD_SUBMIT_INVALID_CODES,..._FAILED_CODES,..._UNAVAILABLE_CODES); the code types and the zod validation both come from it. The lists, the code types andPaymentMethodManagementChangeEventare exported from react-ui.onChangenever fires, and a button disabled oncompletestays disabled.CrossmintPaymentMethodManagementexample inexamples.json(SDK reference docs) wires its own button toref.current.submit(), enables it ononReadyandonChange, and shows the resultmessage. The payments demo page does the same and prints the form state.Test plan
paymentMethodManagementService.test.tsassertshideSubmitButtonandhostShowsSubmitErrorsare always sent;crossmint-agent-card-authorization.test.tsxcovers the new host-button submit path.pnpm --filter @crossmint/client-sdk-react-ui... buildpasses.pnpm turbo test:vitest typecheck --filter @crossmint/client-sdk-react-ui --filter @crossmint/client-sdk-basepasses, 151 + 119 tests.pnpm lintpasses.incoming.test.ts: each result code is kept; a missing or unknown code becomesunknown;payment-method:readyandpayment-method:changeparse, and a change without its state is rejected.crossmint-payment-method-management.test.tsx:onReadyandonChangeget the iframe's events, and a retired iframe's events are ignored; a failed handshake answersnot_readyand a timeouttimeout.payment-method-managementpage renders its own button (pre-existing pattern).Package updates
Changeset
olive-buttons-hidemarks@crossmint/client-sdk-baseand@crossmint/client-sdk-react-uias major — ships with the next major release.