Stripe Connect in Europe: Using Payment Intents to Charge Customers (React and Node js)

Question

I am setting up a standard stripe connect account with direct charges.

This was working perfectly for me using the charges api with tokens but won't work for me using the payments intent api as required in EU.

The below code is working in terms of getting the client secret.

axios.post(`${process.env.REACT_APP_API}/paymentIntent`, stripeData).then(res => {console.log('paymentIntent res', res.data)
    let clientSecret = res.data.clientSecret
    this.props.stripe.createToken({}).then(res => {
        console.log('stripe token', res)
        if (!res.token) {
            this.setState({
                message:
                    "Invalid Credit Card. Your tickets have not been booked. You have not been charged"
            })
        }
        else{
            this.props.stripe.confirmCardPayment(
                clientSecret,
                {
                    payment_method: {
                        card: {
                            token: res.token.id
                        }
                    }
                }
            ).then( res => {console.log(res)})
        }
    })

      }

But I am getting the following errors in the console:

Failed to load resource: the server responded with a status of 404 ()

error:
code: "resource_missing"
doc_url: "https://stripe.com/docs/error-codes/resource-missing"
message: "No such payment_intent: pi_1FnrwXLkWxxxxxxxxxxxxxxx"
param: "intent"
type: "invalid_request_error"

There's a few things confusing me.

1. My clientSecret code is in the format:

pi_1FnrwXLkWxxxxxxxxxxxxxxx_secret_pGBi46eAzWxxxxxxxxxxxxxxx

From the error message, it appears only part of it is being sent to the stripe api. Is this what is causing the error?

2. Two stripe answers are suggesting using the following code on the frontend.

   var stripe = Stripe(STRIPE_PUBLIC_KEY, { stripeAccount: "{{ connected_account }}" })

If this is correct how do I adapt this code for react and where do i put it in the component? It is throwing me an error as it currently is.

Ref1: Code=50 “No such payment_intent” when confirm payment intent for stripe

Ref2: Stripe Connect PaymentIntent error: No such payment_intent

3. Elsewhere in the Stripe docs it says to use the Payment Methods API instead of tokens with the Payment Intents API. Should I abandon using tokens altogether?

Answer 1

I've figured the answers to these questions (with some help from stripe)

Q1. This isn't an issue

Q3. Don't use tokens with Payment Intents API.

Q2. Don't use that code from the docs. Use

<StripeProvider
    apiKey={process.env.REACT_APP_API_STRIPE_PUBLISH}
    stripeAccount="{{ connected_account }}">

This worked for me when I hardcoded the account but wouldn't work when I was getting the connected account id from the backend and saving in State. I got it working by conditionally rending the component. I initialised the connected account in state to '' and used this code:

{this.state.userEvent.organiser.stripeAccountID !== '' && 
    <StripeProvider
        apiKey={process.env.REACT_APP_API_STRIPE_PUBLISH}
        stripeAccount={this.state.userEvent.organiser.stripeAccountID}>
            <Elements>
                <CheckoutForm
                    total={this.displayTotal()}
                    applicationFee={this.displayAdminFee()}
                    currency={this.state.userEvent.currency}
                    eventTitle={this.state.userEvent.title}
                    purchaser={this.state.purchaser}
                    userEvent={this.state.userEvent}
                    numTicketsSought={this.state.userEvent.numTicketsSought}    
                />
            </Elements>
     </StripeProvider>
    }