ReactJS 中的条带结帐答案

【问题标题】：Stripe Checkout in ReactJSReactJS 中的条带结帐
【发布时间】：2018-11-24 17:07:59
【问题描述】：

我在我的 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>
    )
  }
}

【问题讨论】：

描述在哪里定义？我在任何地方都没有看到它，并且它没有传递到 onToken 方法中。

标签： javascript reactjs stripe.js

【解决方案1】：

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

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

【讨论】：

感谢您的帮助。但是，我什至在获得令牌之前就收到了描述错误。当我提交 Stripe Checkout 时，我遇到了错误。加载资源失败：服务器响应状态为 400 () checkout.stripe.com/api/… *removed private information and Uncaught ReferenceError: description is not defined at TokenCallback.r.onToken [as fn] (Contribute.3fc54992.js:13) at TokenCallback.trigger (checkout.js:3)

【解决方案2】：

据我所知，在您的 onToken 方法中，唯一可用的变量是 token。但是您还引用了描述和数量，据我所知，这两者在范围内的任何地方都不可用。

【讨论】：

【解决方案3】：

您需要将描述和金额传递给您的 onToken 常量。您可以在本文中看到一个示例以及如何将运输信息传递到 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。

【讨论】：

嗨！虽然答案可能在您提供的链接中，但查看如何解决问题的实际示例很有用。