reactjs - 使用 react-stripe-elements 将额外的值传递给条带 - 不起作用

Question

负责前端开发和条带集成的开发人员已经放弃了该项目，因此我正在尽我所能了解反应如何工作并修复条带的支付意图创建，以便我们可以为客户启动该项目。

请注意，在此事件之前，我没有使用 React 的经验，并且只有 JavaScript 的基本知识。

问题：支付意图不包括来自元数据或所有者字典的额外数据。您可以在下面找到我在授权并创建测试付款时收到的回复：

[30/Dec/2019 09:14:38] "POST /payment-stripe/ HTTP/1.1" 200 0
{'Content-Length': '1849', 'Content-Type': 'application/json; charset=utf-8', 'Host': '529c6eef.ngrok.io', 'User-Agent': 'Stripe/1.0 (+https://stripe.com/docs/webhooks)', 'Connection': 'close', 'Accept': '*/*; q=0.5, application/xml', 'Cache-Control': 'no-cache', 'Stripe-Signature': 't=1577693707,v1=f43e4c1ecf91a8b513gseg453gsetrgg578d9df8d9c5aa6f9720edb9d973eef5,v0=ad2feb2527afde9521816f7bebsstbsteb3233743df0555720c6d971f6d5a7', 'X-Forwarded-For': '54.187.174.169'}
{
  "amount": 1300,
  "amount_capturable": 0,
  "amount_received": 0,
  "application": null,
  "application_fee_amount": null,
  "canceled_at": null,
  "cancellation_reason": null,
  "capture_method": "automatic",
  "charges": {
    "data": [],
    "has_more": false,
    "object": "list",
    "total_count": 0,
    "url": "/v1/charges?payment_intent=pi_1FvJP4E8otG6IyHyLyzB5Xyh"
  },
  "client_secret": "pi_MY_CLIENT_SECRET",
  "confirmation_method": "automatic",
  "created": 1577693706,
  "currency": "eur",
  "customer": null,
  "description": null,
  "id": "pi_1FvJP4E8otG6IyHyLyzB5Xyh",
  "invoice": null,
  "last_payment_error": null,
  "livemode": false,
  "metadata": {},
  "next_action": null,
  "object": "payment_intent",
  "on_behalf_of": null,
  "payment_method": null,
  "payment_method_options": {
    "card": {
      "installments": null,
      "request_three_d_secure": "automatic"
    }
  },
  "payment_method_types": [
    "ideal"
  ],
  "receipt_email": null,
  "review": null,
  "setup_future_usage": null,
  "shipping": null,
  "source": null,
  "statement_descriptor": null,
  "statement_descriptor_suffix": null,
  "status": "requires_payment_method",
  "transfer_data": null,
  "transfer_group": null
}

在响应中，您可以看到我声明的额外所有者数据或元数据（如下所示）没有传递给 webhook。这是结帐的代码：

    if (this.state.paymentType === 'ideal') {
      const idealBank = this.props.elements.getElement('idealBank');
      const content = await response.json();
      if (this.props.stripe) {
        this.props.stripe
          .createSource({
            type: 'ideal',
            amount: this.props.event.stock[0].price * 100,
            currency: 'eur',
            // quantity: this.props.amount,
            service_fee: this.props.event.stock[0].price,
            stock_type: this.props.event.stock[0].id,
            // stock_type: this.props.event.stock[this.state.parkIndex].id,

            event: this.props.event.id,
            owner: {
              // name: 'test'
              first_name: this.first_name.value,
              last_name: this.last_name.value,
              phonenumber: this.phonenumber.value,
              email: this.email.value
            },
            redirect: {
              return_url: 'http://127.0.0.1:3000/payment-succeeded/'
            },
            metadata: {
              first_name: this.first_name.value,
              last_name: this.last_name.value,
              phonenumber: this.phonenumber.value,
              email: this.email.value
            }
          })
           // EDIT: I'VE ADDED THIS AS RECOMMENDED IN THE COMMENTS:
          .then(response => response)

          .then(
            this.props.stripe.confirmIdealPayment(content.client_secret, {
              payment_method: {
                ideal: idealBank
              },
              return_url: 'http://127.0.0.1:3000/payment-succeeded/',
            }),
          );

我试图通过遵循此处的 react-stripe-elements 文档来找出问题所在：https ://github.com/stripe/react-stripe-elements但找不到问题所在。

我还按照条纹指南检查了传递的付款意图数据是否正确：https ://stripe.com/docs/api/payment_intents/object 。

虽然请求有效并且 webhook 已成功创建和发送，但 owner:{} 和 metadata:{} 不在请求中。

我需要通过 webhook 传递额外的数据，以便我可以在我创建的后端验证付款。

为什么我声明的额外数据没有与请求中的其余数据一起传递？

我会很感激任何人看一看，我期待着您的建议、评论和答案。

谢谢！

标签： reactjsdjango-rest-frameworkstripe-payments