CODEWITHSUNDEEP
reactjsstripe-payments
Colfah
Colfah

Reputation: 358

Stripe - Problem Creating PaymentMethods directly on the connected account in React. Code in docs needs to be changed for react?

I am following the docs here to onboard the connected account with the payment.

The following code (from the docs) can't be used in React because it doesn't really make any sense in React and causes an error.

var stripe = Stripe('pk_test_YIQAQ7ERzdexV6HUXw4xOSQk', {
  stripeAccount: "{{CONNECTED_STRIPE_ACCOUNT_ID}}"
})

I've tried to use this.props.stripe instead of stripe but I keep getting the same error.

How should this be amended to work in React and where should it be placed?

My front end code is here:

import React, { Component } from "react";
import { Stripe, CardElement, injectStripe } from "react-stripe-elements";
import axios from "axios";


let stripeData = {
    amount: this.props.total,
    currency: this.props.currency,
    seller: this.props.userEvent.organiser._id,
    description: this.props.eventTitle,
    applicationFee: this.props.applicationFee
}

axios.post(`${process.env.REACT_APP_API}/paymentIntent`, stripeData).then(res => {
   var stripe = Stripe(process.env.REACT_APP_API_STRIPE_PUBLISH, { 
   stripeAccount: res.data.sellerStripeAccountID})

   this.props.stripe.handleCardPayment(res.data.clientSecret, {}).then( 
       paymentRes => {
          if(paymentRes.error){
          this.setState({
          message: paymentRes.error.message
        })
    }
else if(paymentRes.paymentIntent.status === 'succeeded'){...}
rest of code isn't relevant..

It throws an error at the line from the docs:

var stripe = Stripe(process.env.REACT_APP_API_STRIPE_PUBLISH, { stripeAccount: res.data.sellerStripeAccountID})

The error is 

TypeError: Object(...) is not a function

I don't know how this line of code should be amended to make it work in React and where it should be placed

Upvotes: 1

Views: 147

Answers (1)

Colfah
Colfah

Reputation: 358

I figured this out.

Don't use that code from the docs. For React, this is the code:

<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>
    }

Upvotes: 1

Related Questions