How can I process payments for two Stripe accounts with one card entry in a React/Node app?

Below is some guidance based on Stripe’s documentation and best practices for handling payment methods across multiple accounts:

---

1. Capturing Card Information Once for Multiple Businesses

• Separate Stripe Accounts Are Isolated:
  Each Stripe account (or connected account in a Connect platform) has its own set of tokens, customers, and payment methods. This means a PaymentMethod object or token created on one account isn’t transferable to another. In your case, the base and addon subscriptions are tied to different Stripe accounts, so you cannot simply reuse one PaymentMethod ID created on one account for the other.

• Using Connect to Centralize Card Collection:
  If you want a user-friendly experience where the customer only enters their payment details once, consider consolidating your workflows by using a Stripe Connect platform. With Connect you can have your platform collect the card details once (or use a SetupIntent) and then programmatically create or share payment method representations on multiple connected accounts. Note that while you may be able to forward essential details, you’ll still need a new token or PaymentMethod object created in each account because of PCI and security reasons.

---

2. Stripe Prop Initialization in ReactJS

• One-Time Initialization:
  The Stripe.js instance (often passed as a prop when initializing Elements in your React app) is designed to be immutable once created. This is because the publishable key and configuration are set on instantiation.

  Workarounds:

  • If you need to interact with multiple Stripe accounts on the client side (for example, using Elements with different publishable keys), you’ll need to architect your UI so that the proper key is initialized for the required flow.
  • Alternatively, separate your UI flows/components so that each has its own initialization context if absolutely needed. However, keep in mind that mixing multiple accounts in one flow is generally not recommended.

---

3. Reusing Payment Method IDs in the Backend

• PaymentMethod Object is Account-Specific:
  Once a PaymentMethod (or token) is created, it is attached to the Stripe account for which it was generated. This means you cannot attach that same PaymentMethod to a Customer or Charge object in a second Stripe account.

  Options to Consider:

  • Duplicate Tokenization: If you need to charge the card on both accounts, you’ll typically have to tokenize the card details again for the second account. This means running a client-side integration with the second account’s publishable key (or securely sending card details to your backend so a new token can be created—with full adherence to PCI rules).
  • Stripe Connect Flow: With Connect, you might collect payment details once and then create separate PaymentMethod or SetupIntent objects on each connected account using a server-to-server flow. This way, each account gets its proper object without asking the user to reenter their card information.

---

Summary

• Single Card Collection: You cannot use one PaymentMethod (or token) generated on one Stripe account for a second account. To streamline the user experience, consider using a Stripe Connect platform or duplicate the tokenization flow in a PCI-compliant manner.
• React Stripe Prop: The Stripe.js instance is immutable once initialized. If you require different configurations, you’ll need to architect separate flows for each Stripe account.
• Backend Limitations: PaymentMethod IDs are account-specific. For your add-on subscription, you must generate a new PaymentMethod object on that account.

If you have follow-up questions on setting up a Connect integration or need more detailed guidance on handling the card data securely across multiple accounts, please refer to our Stripe Connect documentation and Setup Intents guide.