ReactJS中的Stripe Checkout

Question

我在我的React应用程序中使用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方法中，唯一可用的变量是token。但是你也引用了描述和数量，这些都不在我能说的范围内的任何地方。

Answer 3

您需要将描述和金额传递给onToken常量。您可以在本文中看到此示例以及如何将Shipping信息传递到Stripe：

Send Shipping Info to Stripe with React-Stripe-Checkout

解决方案如下所示：

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);

（token，args）和metadata：args是可选的，因为你想将传送信息传递给Stripe。