feat(pay-card): show the card details image in the devtool - #21468
feat(pay-card): show the card details image in the devtool#21468philipptpunkt wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
🟢 Approval recommended
The implementation is narrowly scoped to devtools UI wiring, includes a changeset, and adds targeted tests for the new security-sensitive behavior (no URL text rendering and URL clearing on exit).
Pull request overview
This PR extends the Pay Card devtool “Card interaction” screen to let developers request and display the provider-rendered secure card details image (PAN/CVV/expiry) via a single-use URL, and clears that URL when leaving the screen to ensure a fresh token is minted on return.
Changes:
- Add a
detailssub-prop to the devtool interaction props to represent the secure details image state and actions (request/clear). - Wire
useCreateCardDetailsTokenMutationinto the devtools bindings and exposeimageUrl, loading, error, request, and clear handlers to the UI. - Render a placeholder that triggers the request, then swap to the returned
<Image>; add tests asserting the URL is never rendered as text and is cleared on back navigation.
File summaries
| File | Description |
|---|---|
| devtools/pay-card/src/usePayCardViewModel.test.ts | Updates test props builder to include interaction.details defaults. |
| devtools/pay-card/src/usePayCardViewModel.native.test.ts | Updates native test props builder to include interaction.details defaults. |
| devtools/pay-card/src/types.ts | Introduces PayCardDetailsImageProps and adds details to PayCardInteractionProps. |
| devtools/pay-card/src/pay-card/PayCard.web.test.tsx | Updates web test props to satisfy new interaction.details requirement. |
| devtools/pay-card/src/pay-card/PayCard.native.test.tsx | Adds coverage for requesting details, rendering the image without exposing the URL as text, and clearing on back. |
| devtools/pay-card/src/components/Interaction/Interaction.native.tsx | Implements the placeholder + image rendering and clears minted URL on back navigation. |
| devtools/bindings/src/usePayCardToolProps.ts | Wires the RTK mutation into the devtool props and exposes details state/actions. |
| .changeset/pay-card-devtools-card-details.md | Adds a changeset documenting the new devtool behavior for the relevant packages. |
Review details
- Files reviewed: 8/8 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Web Tools Build Status
|
Mobile Bundle Checks
Desktop Bundle Checks✅ Previous issues have all been fixed. |
d86d3d6 to
2770242
Compare
There was a problem hiding this comment.
🟡 Changes recommended
The new details.request callback in usePayCardToolProps is typed in a way that can be incompatible with the devtool’s readonly css props under strictFunctionTypes, risking a type error in the bindings.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
- Files reviewed: 8/8 changed files
- Comments generated: 1
- Review effort level: Lite
| error: cardDetails.error === undefined ? undefined : describeError(cardDetails.error), | ||
| request: (customCss?: PayCardDetailsCss) => { | ||
| requestCardDetails(customCss); | ||
| }, | ||
| clear: resetCardDetails, |
Nothing renders the secure details yet, so the endpoint's answer could not be seen. The Card interaction screen now stands a placeholder where the card goes and swaps in the provider's image once a developer asks for it. - The image loads from the returned URL with no headers: the token in the query string is the whole credential, which is what makes an <Image> enough. - Going back clears the minted URL. The provider spends it the first time the image is read, so a retained one renders nothing on the way back in. - The URL is never rendered as text, and a test asserts it.
2770242 to
faf991d
Compare
There was a problem hiding this comment.
🟢 Approval recommended
The changes are scoped, consistent with the PR description, and include targeted native tests covering the new secure-image placeholder/clear behavior and the “never render URL as text” requirement.
Review details
- Files reviewed: 8/8 changed files
- Comments generated: 0 new
- Review effort level: Lite
|
Stack (managed by stac-man)
Nothing renders the secure details yet, so the endpoint's answer could not be
seen. The Card interaction screen now stands a placeholder where the card goes
and swaps in the provider's image once a developer asks for it.
string is the whole credential, which is what makes an
image is read, so a retained one renders nothing on the way back in.