将自定义字段（如电话号码）添加到 react-stripe-elements答案

【问题标题】：Add custom fields (like phone number) to react-stripe-elements将自定义字段（如电话号码）添加到 react-stripe-elements
【发布时间】：2018-05-23 15:16:21
【问题描述】：

我对如何使用 react-stripe-elements 创建自定义字段（如电话号码）的文档感到非常困惑。我有一个使用<CardElement> 组件收集卡片信息的快速示例，但我看不到如何将电话号码的另一个输入添加到将被标记化的数据中。

我知道我可以从内置字段中接收带有卡信息的令牌，然后将该令牌加上未令牌化的电话号码传递给我的服务器，但我希望将所有数据条带化如果可能的话。

This examples page 显示了许多收集电话号码的表单，但源代码似乎主要显示了它们是如何设置样式的，并且无论哪种方式，它都没有使用 react-stripe-elements 所以这个例子没有反映就像我想要的那样。

编辑：我在他们的页面上找到了this github issue，其中提到实现您自己的组件以提供其他受支持的参数，例如name、adress_line1 等。查看返回的令牌，看来phone 根本不是受支持的字段，因此我只需将该信息以未标记的格式发送到服务器。如果这只是它需要完成的方式，我完全可以接受。只是想确保我采用正确的方法。

【问题讨论】：

根据您的编辑，您在正确的轨道上并回复：phone 之类的字段，是的，正是这样：“我只需要以未标记的格式将该信息发送到服务器"
我意识到“来源”和“客户”之间的区别。如果您创建客户对象，您可以保存电话号码并将来源与他们的帐户相关联。

标签： javascript reactjs stripe-payments

【解决方案1】：

您也可以使用自己的输入。然后，在请求令牌之前，添加您的附加数据。例如，在我的表单中，我有一个单独的输入卡上的客户姓名。

onSubmit = (e) => {

 e.preventDefault()
  const form = e.target
  const data = // your method for getting data from the form

  stripe.createToken({ name: data.card_name })
    .then(({ token }) => {
      // do things with token
    })
  } 
}

您可以在此处的 API 参考中找到有关可以将哪些数据传递给令牌的更多信息：https://stripe.com/docs/stripe-js/reference#stripe-create-token

要添加其他非标准字段，同样可以同样方式创建Source：https://stripe.com/docs/stripe-js/reference#stripe-create-source

stripe.createSource(element, sourceData)

【讨论】：

【解决方案2】：

假设您要添加一个名称字段并将其标记化，同时您要传递持卡人的姓名和其他信息，以及 react-stripe-elements 的 CardElement ，您需要使用其他一些输入创建一个包装 CardElement 的表单。

onSubmit 事件，您需要提取表单数据并使用来自 react-stripe-elements 的 createToken 函数对其进行标记，如下所示：

import React, { Component } from 'react';
import { CardElement, injectStripe } from 'react-stripe-elements';
class CheckoutForm extends Component {

    submit = async (ev) => {
        ev.preventDefault();
        const { currentTarget } = ev;
        const fD = new FormData(currentTarget);
        const cardInfo = {
          name: fD.get('name'),
        };
        let { token } = await this.props.stripe.createToken(
          { name: cardInfo.name, }
        );
        console.log(token)
        let response = await fetch(`YOUR_API_URL/charge`, {
          method: "POST",
          headers: { "Content-Type": "text/plain" },
          body: token.id
        });

        if (response.ok) console.log("Purchase Complete!")
      }
      
        render() {
        return (
          <div className="checkout">
            <p>Credit Card / Debit Card</p>

            <form onSubmit={this.submit}>
              <input type='text' name='name' placeholder="Card Holder's Name" />

              <CardElement />
              <button type='submit'>Pay</button>
            </form>

          </div>
        );
      }

export default injectStripe(CheckoutForm);

【讨论】：

【解决方案3】：

在深入了解documentation 之后，您似乎可以将电话号码归因于source 的owner 属性，customer 的@987654325 @ 属性，以及 order 的 shipping 属性

【讨论】：

【解决方案4】：

stripe.createToken(element, tokenData) 使用 stripe.createToken() 将 Elements 收集的信息转换为一次性令牌，您可以将其安全地传递给服务器以在 API 调用中使用。 1 个元素：您希望从中标记数据的元素。如果适用，该元素会从您在同一元素实例上创建的其他元素中提取数据以进行标记化。 2 tokenData：一个包含您可能已经收集到的额外支付信息的对象。对于卡片，它可以包含以下任何参数：

stripe.createToken(element, tokenData).then(function(result) {
  // Handle result.error or result.token
});

【讨论】：