feat: add prebuilt PrimerCardForm and payment outcome flow (ACC-6495) by OnurVar · Pull Request #349 · primer-io/primer-sdk-react-native

OnurVar · 2026-04-20T00:55:13Z

Summary

Add <PrimerCardForm /> — drop-in card form composing useCardForm() + the four card inputs with an internal focus chain (card → expiry → CVV → name → submit) and submit button. Exposes onSubmitStart, autoFocus, style, testID.
Route paymentOutcome through <CheckoutFlow />: success auto-dismisses the sheet after 5s, error lands on the retry screen. Honors isSuccessScreenEnabled / isErrorScreenEnabled to skip screens when disabled.
Make the provider's raw-data manager session-scoped, keyed by activeMethod (set by the method-selection screen rather than the view lifecycle). The manager survives the card-form view mount/unmount so retry and post-submit screens keep the same native manager alive.
Implement retry on PrimerCheckoutProvider: reconfigure → re-set raw data → submit. The reconfigure is a workaround for ACC-6920 (iOS RawDataManager.swift:237 nullifies its delegate on successful tokenization) — a TODO(iOS native fix) marks it.
Replace the sheet's single-value setHeight / resetHeight with a token-based height-request stack. Each request returns a per-token release so a late cleanup from a prior screen can't clobber a newer screen's active request.
Make NavigationContainer always render the current screen inside a stable Animated.View wrapper; the outgoing screen is a sibling during transitions. Component instances survive transition start/end — no remount churn, no duplicate useEffect fires.
Add CardFormScreen (header + scroll + KeyboardAvoidingView) as the drop-in wrapper; standalone merchants render <PrimerCardForm /> directly.
Make RawDataManager.configureListeners() idempotent so reconfigure-on-retry doesn't stack duplicate subscriptions or trigger "no listeners registered" warnings.
Add src/Components/internal/debug.ts with a single-line fmt() for console logs.

Out of scope (intentional)

Apple Pay / Google Pay / PayPal / Klarna / APM tiles — deferred to M10 / M14.
Merchant-customizable success/error screens — current screens are the default; full customization arrives with the layer-1/layer-3 customization work.
iOS native RawDataManager delegate fix — tracked separately; retry workaround stays until the native change lands.

Jira

ACC-6495

Test plan

yarn typecheck — clean
yarn lint — clean
yarn test — 91/91 passing
Manual: tap card tile → form opens with card number focused after the slide lands
Manual: valid card (4242 4242 4242 4242) → Pay → processing → success → auto-dismiss after 5s
Manual: failing card (4000 0000 0000 0002) → Pay → processing → error → Retry re-submits
Manual: error screen → "Choose other" → back to method selection
Manual: swipe-down / backdrop press dismisses the sheet cleanly

Stacked on

Depends on #347 (ACC-6494 input-chain additions). Merge #347 first, then rebase this onto main.

github-actions · 2026-04-20T00:56:47Z

	Warnings
⚠️	This PR doesn't seem to contain any updated Unit Test for Swift 🤔. Please consider double checking it 🙏

	Messages
📖	✅ No SwiftLint violations found.

Generated by 🚫 Danger Swift against fe457d7

unblocked

3 issues found.

About Unblocked

Unblocked has been set up to automatically review your team's pull requests to identify genuine bugs and issues.

📖 Documentation — Learn more in our docs.

💬 Ask questions — Mention @unblocked to request a review or summary, or ask follow-up questions about your code.

👍 Give feedback — React to comments with 👍 or 👎 to help us improve.

⚙️ Customize — Adjust settings in your preferences.

unblocked · 2026-04-20T00:56:59Z

+    } else if (id.includes('cardholder') || id.includes('name')) {
+      fieldErrors.cardholderName = description;


The check id.includes('name') will match any error whose errorId contains the substring "name" — e.g. "payment_method_name_invalid", "username_required", etc. — and assign it to the cardholderName field, even if it's unrelated.

Consider tightening to match specifically on cardholder-related IDs:

} else if (id.includes('cardholder') || id.includes('card_holder') || id.includes('cardholder_name')) { fieldErrors.cardholderName = description; }

unblocked · 2026-04-20T00:56:59Z

+  useEffect(() => {
+    if (!state.isReady || !state.activeMethod) {
+      return;
+    }
+
+    const method = state.activeMethod;
+    let cancelled = false;
+    const m = new PrimerHeadlessUniversalCheckoutRawDataManager();
+    managerRef.current = m;
+
+    const callbacks = {
+      onValidation: (isValid: boolean, errors: PrimerError[] | undefined) => {
+        const parsed = parseValidationErrors(errors);
+        setState((prev) => ({
+          ...prev,
+          cardFormState: { ...prev.cardFormState, isValid, errors: parsed },
+        }));
+      },
+      onBinDataChange: (binData: PrimerBinData) => {
+        setState((prev) => ({
+          ...prev,
+          cardFormState: { ...prev.cardFormState, binData },
+        }));
+      },
+      onMetadataChange: (metadata: unknown) => {
+        setState((prev) => ({
+          ...prev,
+          cardFormState: { ...prev.cardFormState, metadata },
+        }));
+      },
+    };
+    lastManagerCallbacksRef.current = callbacks;
+
+    (async () => {
+      try {
+        await m.configure({ paymentMethodType: method, ...callbacks });
+        if (cancelled) return;
+        const requiredFields = await m.getRequiredInputElementTypes();
+        if (cancelled) return;
+        setState((prev) => ({
+          ...prev,
+          cardFormState: { ...prev.cardFormState, requiredFields },
+        }));
+      } catch (err) {
+        console.error(`${LOG} manager configure failed ${fmt(err)}`);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      m.cleanUp().catch((err) => console.warn(`${LOG} manager cleanUp failed ${fmt(err)}`));
+      m.removeAllListeners();
+      if (managerRef.current === m) {
+        managerRef.current = null;
+      }
+      lastManagerCallbacksRef.current = null;
+      setState((prev) => ({ ...prev, cardFormState: initialCardFormState }));
+    };
+  }, [state.activeMethod, state.isReady]);


The raw-data manager lifecycle effect lists [state.activeMethod, state.isReady] as dependencies. Any setState call that touches other InternalState fields (e.g. paymentOutcome, cardFormState) won't change these booleans/strings, so this is safe in most paths.

However, the retry() callback at R392 calls setState((prev) => ({ ...prev, paymentOutcome: null })). If this setState were ever batched with a state update that also flips isReady or activeMethod (e.g. on session expiry during a retry), the effect cleanup would destroy the manager (m.cleanUp()) while retry() is mid-flight — m.submit() at R393 would then operate on a cleaned-up manager.

This is unlikely in normal flows but could produce a hard-to-diagnose crash on session timeout during retry. Consider adding a guard in the cleanup that skips cleanUp() while a retry is in progress (e.g. via an isRetryingRef).

unblocked · 2026-04-20T00:56:59Z

+  const onRetry = () => {
+    // Navigate to processing first so the user sees an immediate spinner;
+    // the outcome transitioner replaces with success/error when retry resolves.
+    replace(CheckoutRoute.processing);
+    retry().catch((err) => console.warn(`${LOG} retry error ${fmt(err)}`));


retry() can throw on the m.configure() or m.setRawData() steps (R394-R396 in the provider). Those failures are JS-side errors that never reach the native onError callback, so paymentOutcome is never set to error and the user is stuck on the processing spinner indefinitely.

The .catch() here only logs a warning. Consider navigating back to the error screen (or re-setting paymentOutcome) in the catch handler:

retry().catch((err) => { console.warn(`${LOG} retry error ${fmt(err)}`); replace(CheckoutRoute.error, { error: err }); });

github-actions · 2026-04-20T00:57:01Z

	Warnings
⚠️	This PR doesn't seem to contain any updated Unit Test for Kotlin 🤔. Please consider double checking it 🙏

	Messages
📖	✅ No detekt violations found.

Generated by 🚫 Danger Kotlin against fe457d7

github-actions · 2026-04-20T01:04:40Z

Appetize Android link: https://appetize.io/app/oq65lou2vntonwbnx4mmk6mjeq

github-actions · 2026-04-20T01:05:30Z

Appetize iOS link: https://appetize.io/app/pas7jbw3n54kuft6a4hzzk43b4

nquinn-primer · 2026-04-20T10:41:26Z

+const SUCCESS_AUTO_DISMISS_MS = 5000;
+
 function CheckoutLoadingScreen() {
-  return <LoadingScreen title="Loading your secure checkout" subtitle="This won't take long" />;


I commented on this is earlier, if this is fresher then my other comment can be ignored

github-actions · 2026-04-20T10:48:26Z

	Warnings
⚠️	Pull Request size seems relatively large. If this Pull Request contains multiple changes, please split each into separate PRs for a faster, easier review.
⚠️	PR is classed as Work in Progress

	Messages
📖	✅ No ESLint violations found.

Generated by 🚫 dangerJS against fe457d7

OnurVar requested a review from a team as a code owner April 20, 2026 00:55

OnurVar self-assigned this Apr 20, 2026

OnurVar marked this pull request as draft April 20, 2026 00:56

unblocked Bot reviewed Apr 20, 2026

View reviewed changes

OnurVar force-pushed the ov/feat/ACC-6494 branch from 3ab7101 to f199509 Compare April 20, 2026 01:09

OnurVar force-pushed the ov/feat/ACC-6495 branch from ebb678c to 1864c32 Compare April 20, 2026 01:11

OnurVar force-pushed the ov/feat/ACC-6494 branch from f199509 to adff445 Compare April 20, 2026 09:57

OnurVar force-pushed the ov/feat/ACC-6495 branch from 1864c32 to 27ab968 Compare April 20, 2026 09:58

nquinn-primer reviewed Apr 20, 2026

View reviewed changes

nquinn-primer approved these changes Apr 20, 2026

View reviewed changes

OnurVar force-pushed the ov/feat/ACC-6494 branch from adff445 to 3b27d04 Compare April 20, 2026 10:45

OnurVar force-pushed the ov/feat/ACC-6495 branch from 27ab968 to fe457d7 Compare April 20, 2026 10:45

OnurVar force-pushed the ov/feat/ACC-6494 branch from 3b27d04 to 0793920 Compare April 20, 2026 16:26

OnurVar force-pushed the ov/feat/ACC-6495 branch from fe457d7 to b008d32 Compare April 20, 2026 16:27

OnurVar force-pushed the ov/feat/ACC-6494 branch from 0793920 to cc715c6 Compare April 20, 2026 21:48

OnurVar force-pushed the ov/feat/ACC-6495 branch from b008d32 to 64939c8 Compare April 20, 2026 21:50

OnurVar force-pushed the ov/feat/ACC-6494 branch from cc715c6 to 5d922f9 Compare April 21, 2026 01:18

OnurVar force-pushed the ov/feat/ACC-6495 branch from 64939c8 to 3faa0d0 Compare April 21, 2026 01:18

OnurVar force-pushed the ov/feat/ACC-6494 branch from 5d922f9 to a540c9c Compare April 21, 2026 16:56

OnurVar force-pushed the ov/feat/ACC-6495 branch from 3faa0d0 to d9b5077 Compare April 21, 2026 16:56

OnurVar force-pushed the ov/feat/ACC-6494 branch from a540c9c to b3db7c1 Compare April 21, 2026 17:17

OnurVar force-pushed the ov/feat/ACC-6495 branch from d9b5077 to 76a5d85 Compare April 21, 2026 17:17

OnurVar force-pushed the ov/feat/ACC-6494 branch from b3db7c1 to 0a72258 Compare April 21, 2026 18:01

OnurVar force-pushed the ov/feat/ACC-6495 branch from 76a5d85 to b968673 Compare April 21, 2026 18:01

OnurVar force-pushed the ov/feat/ACC-6494 branch from 0a72258 to 32541fc Compare April 23, 2026 23:39

OnurVar force-pushed the ov/feat/ACC-6495 branch from b968673 to 5aaaff2 Compare April 23, 2026 23:39

OnurVar force-pushed the ov/feat/ACC-6494 branch from 32541fc to 401455f Compare April 24, 2026 01:17

OnurVar force-pushed the ov/feat/ACC-6495 branch 2 times, most recently from 60142f0 to 161509c Compare April 24, 2026 01:40

OnurVar force-pushed the ov/feat/ACC-6494 branch from b161b04 to e6dd532 Compare April 27, 2026 01:21

OnurVar force-pushed the ov/feat/ACC-6495 branch from ab90f37 to 62691a0 Compare April 27, 2026 01:21

feat: add prebuilt PrimerCardForm and payment outcome flow (ACC-6495)

526ecf5

OnurVar force-pushed the ov/feat/ACC-6495 branch from 62691a0 to 526ecf5 Compare April 27, 2026 01:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add prebuilt PrimerCardForm and payment outcome flow (ACC-6495)#349

feat: add prebuilt PrimerCardForm and payment outcome flow (ACC-6495)#349
OnurVar wants to merge 1 commit intoov/feat/ACC-6494from
ov/feat/ACC-6495

OnurVar commented Apr 20, 2026

Uh oh!

github-actions Bot commented Apr 20, 2026 •

edited

Loading

Uh oh!

unblocked Bot left a comment

Uh oh!

unblocked Bot Apr 20, 2026

Uh oh!

unblocked Bot Apr 20, 2026

Uh oh!

unblocked Bot Apr 20, 2026

Uh oh!

github-actions Bot commented Apr 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

github-actions Bot commented Apr 20, 2026 •

edited

Loading

Uh oh!

nquinn-primer Apr 20, 2026

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

		} else if (id.includes('cardholder') \|\| id.includes('name')) {
		fieldErrors.cardholderName = description;

Conversation

OnurVar commented Apr 20, 2026

Summary

Out of scope (intentional)

Jira

Test plan

Stacked on

Uh oh!

github-actions Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

unblocked Bot left a comment

Choose a reason for hiding this comment

About Unblocked

Uh oh!

unblocked Bot Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

unblocked Bot Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

unblocked Bot Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

github-actions Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nquinn-primer Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Apr 20, 2026 •

edited

Loading

github-actions Bot commented Apr 20, 2026 •

edited

Loading

github-actions Bot commented Apr 20, 2026 •

edited

Loading