Question

我在关于如何使用react-stripe-elements创建自定义字段（如电话号码）的文档中迷失了方向。我已经得到了一个使用<CardElement>组件收集卡信息的快速示例，但我无法在任何地方看到如何将电话号码的另一个输入添加到将被标记化的数据中。

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

This examples page显示了一些收集电话号码的表单，但源代码似乎主要显示了他们如何设置样式，并且无论哪种方式都没有使用react-stripe-elements，所以示例并没有像我想的那样镜像。

修改：我在其网页上找到this github issue，其中提到实施您自己的组件，以提供其他受支持的参数，例如name，adress_line1等。返回的令牌，phone似乎不是受支持的字段，因此我只需要以非标记格式将该信息发送到服务器。如果这就是它需要完成的方式，那我就完全没问题了。只是想确保我用正确的方法来实现它。

Answer 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

要添加其他非标准字段，您可以使用相同的方式创建来源：https://stripe.com/docs/stripe-js/reference#stripe-create-source

stripe.createSource(element, sourceData)

Answer 2

让我们假设您想添加一个名称字段并对其进行标记，同时您想要传递持卡人的姓名和其他信息以及 react-stripe-elements 中的CardElement em>，您需要创建一个将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);

Answer 3

在深入了解documentation之后，您似乎可以将电话号码归属于source的{{1}}媒体资源，owner customer属性和shipping order属性

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

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

4 个答案: