Question

我正在关注文档 here ，将其带入付款的关联帐户。

以下代码（来自文档）不能在React中使用，因为它在React中没有任何意义并会导致错误。

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

我尝试使用this.props.stripe而不是stripe，但是我仍然遇到相同的错误。

应如何对其进行修改以在React中工作以及应将其放置在何处？

我的前端代码在这里：

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

它在文档的一行处引发错误：

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

错误是

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

我不知道应如何修改此行代码以使其在React中工作以及应将其放置在何处

Answer 1

我知道了。

请勿使用文档中的代码。对于React，这是代码：

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

当我对帐户进行硬编码时，这对我有用，但是当我从后端获取关联的帐户ID并保存在State中时，此方法不起作用。我通过有条件地租借该组件来使其工作。我将连接状态初始化为''，并使用了以下代码：

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

条纹-在React中直接在连接的帐户上创建PaymentMethods时出现问题。需要更改文档中的代码以做出反应吗？

1 个答案: