ReactJS中的条带检出

Question

我在我的React App中使用Stripe Checkout。 由于出现不确定的错误，我无法以某种方式正确地将属性传递给onToken函数。

我最终需要发送一堆道具，但现在只是尝试使其正常工作。

import axios from 'axios'
import React from 'react'
import StripeCheckout from 'react-stripe-checkout';

const PAYMENT_SERVER_URL = '3RD_PARTY_SERVER';
const CURRENCY = 'USD';

export default class Stripe25 extends React.Component {

  onToken = (token) => {
    axios.post(PAYMENT_SERVER_URL,
        {
          description,
          source: token.id,
          currency: CURRENCY,
          amount: amount
        })
        .then(successPayment)
        .catch(errorPayment);
  }

  render() {
    return (
      <StripeCheckout
        token={this.onToken}
        stripeKey="STRIPE_PUBLIC_KEY"
        name=""
        description=""
        image=""
        panelLabel="Donate"
        amount={2500} // cents
        currency="USD"
        locale="auto"
        zipCode={false}
        billingAddress={true}
      >
      <button className="btn btn-primary">
        $25
      </button>
    </StripeCheckout>
    )
  }
}

Answer 1

尝试将source: token.id更改为source: token && token.id 。

当您尝试设置ID时，可能尚未定义令牌。 异步环境中的点链通常是一个问题。

Answer 2

据我所知，在您的onToken方法中，唯一可用的变量是令牌。 但是，您还引用了描述和数量，据我所知，在范围内的任何地方都无法使用它们。

Answer 3

您需要将描述和金额传递到onToken常量中。 您可以在本文中看到一个示例以及如何将“运送”信息传递到Stripe中：

使用React-Stripe-Checkout将运送信息发送到Stripe

解决方案将如下所示：

const onToken = (amount, description) => (token, args) =>
  axios.post(PAYMENT_SERVER_URL,
    {
      description,
      source: token.id,
      currency: CURRENCY,
      amount: fromDollarToCent(amount),
      metadata: args
    })
    .then(successPayment)
    .catch(errorPayment);

（令牌， args ）和元数据：args是可选的，以防您要将运输信息传递到Stripe中。