Initialize a payment SDK once
Initialize one SDK instance per publishable key, share its readiness with the rendered child, and ignore obsolete asynchronous resolutions.Description
Requirements
Export PaymentSdkBoundary from src/App.tsx.
Call createSdk only once while the same publishable key remains mounted.
Create a fresh SDK instance when the publishable key changes.
Render pending content until the active SDK resolves, then pass that exact instance to renderReady.
Never render an SDK result that resolves after its key was replaced or the component unmounted.
Expose visible status and interactive controls with native semantics, accessible names, and keyboard operation appropriate to the workflow.
Do not mutate props, nested caller-owned values, or arrays supplied to the component.
Stable key
Render twice with pk_test
createSdk runs once and both renders share the resolved SDK
Call createSdk only once while the same publishable key remains mounted.
Rotated key
Change pk_test to pk_live before the first promise settles
Only the pk_live SDK is rendered
Create a fresh SDK instance when the publishable key changes.
Constraints
Use React state and effects only where the observable component contract requires themUse injected adapters instead of accessing network, storage, timers, or browser globals directlyKeep one authoritative state transition for each user or adapter event
Hints
Hint 1
Start with the single-initialization behavior and make its observable result deterministic.
Hint 2
Model key-change-reinitializes independently before combining it with the remaining states.
Hint 3
Verify the boundary described by stale-resolution-ignored without changing caller-owned input.