1

I use CardElement from @stripe/react-stripe-js for stripe in one view and I use confirmCardPayment in another view

const card = useSelector(state => state.someObject.cardElement)
const result = await stripe.confirmCardPayment(secret.data, {
      payment_method: {
        card: card,
        billing_details: {
          name: 'Some name',
        },
      }
    });

How I can pass card element from different views? I've tried to put card to store and get it from here, but nothing works and I get next error

IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.

I know what that's error mean, but I need to pass card info through the different views.

Stasoz
  • 59
  • 2
  • 7
  • Could you share the full code of how the two views are set up? But you can't call `confirmCardPayment` on Elements that are only defined in a different component, they all have to be in the same component. – karllekko Apr 12 '21 at 10:22

1 Answers1

1

Had the exact same issue, nothing seemed to work as a "proper" solution, so then went with setTimeout implementation.
So I created a parent component where stripe instance is retrieved
const stripe = useStripe();
and whenever render of different view/component that is using CardElement changes, I used some delay (600ms).

let currentComponentToRender;
const [currentComponentToRender, setCurrentComponentToRender] = useState<JSX.Element>(<ComponentA />);

setTimeout(() => {
  switch (planOption) {
    case PaymentPlan.FREE:
      setCurrentComponentToRender(<ComponentA />);
      break;

    case PaymentPlan.PROFESSIONAL:
      setCurrentComponentToRender(<ComponentB />);
      break;
  }
}, 600);

Hope soon this solution wont be needed anymore and Stripe sort this thing out.

marko424
  • 3,839
  • 5
  • 17
  • 27