1

我的站点代码位于@ https://github.com/CB-Essential-Services/adorable-chestnut/blob/staging-3/src/components/checkout.js

我正在运行一个 Netlify -- Gatsby -- StripeCheckout 堆栈。

问题：我需要submit下面代码中的按钮来将表单数据提交到 Netlify Forms 并使用“ onClick ”事件redirectToCheckout来处理 Stripe 的付款。

Checkout.js


import React, { useState } from "react";
import { loadStripe } from "@stripe/stripe-js";

import _ from 'lodash';

function encode(data) {
    return Object.keys(data)
      .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      .join('&')
  }

let stripePromise
const getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe("pk_test_RlvibjeKdvwY81acv2YLwvTM00I3UsWXIi")
  }
  return stripePromise
}

const Checkout = () => {
  const [loading, setLoading] = useState(false)

  const redirectToCheckout = async event => {
    event.preventDefault()
    setLoading(true)

    const stripe = await getStripe()
    const { error } = await stripe.redirectToCheckout({
      mode: "subscription",
      lineItems: [{ price: "price_1Gva5YAeKYVunD5viRkFzoR7", quantity: 1 }],
      successUrl: `http://localhost:8000/thanks/`,
      cancelUrl: `http://localhost:8000/404`,
    })

    if (error) {
      console.warn("Error:", error)
      setLoading(false)
    }
  }

  return (    
<form
    name="transfer"
    method="POST"
    content-type= "application/x-www-form-urlencoded"
    data-netlify-honeypot="bot-field"
    data-netlify="true"
    id="transfer"
    className="transfer"
>
    <p className="screen-reader-text">
        <label>Don't fill this out if you're human: <input name="bot-field" /></label>
    </p>
    <p className="form-row">
        <label htmlFor="transfer-name" className="form-label">Name</label>
        <input type="text" name="name" id="transfer-name" className="form-input" />
    </p>
    <p className="form-row">
        <label htmlFor="transfer-email" className="form-label">Email address</label>
        <input type="email" name="email" id="transfer-email" className="form-input" />
    </p>
    <input type="hidden" name="transfer" value="transfer" />
    <p className="form-row form-submit">
        <button type="submit" className="button" 
        disabled={loading}
      onClick={redirectToCheckout}>
          Pay
          </button>
    </p>
</form>
  )
}

export default Checkout

该redirectToCheckout部分工作正常。Stripe 开发人员支持说我应该能够将表单数据提交给 Netlify --> initial convo w/Stripe secondary convo w/Stripe

总之，Stripe 开发支持说是的，我可以redirectToCheckout在前端的任何时候使用。例如，使用 AJAX 将表单数据提交给 Netlify，然后同时解析结果redirectToCheckout。

这与我正在做的方法不同。我不知道如何利用 AJAX！

但他们也暗示这个过程是流动的。我的方法应该没问题。我只需要弄清楚如何将数据发布到 Netlify。

4

1 回答 1

0

redirectToCheckout完成所有验证后，您需要扩展和重定向您的流通功能。

假设您的redirectToCheckout函数将您的数据正确推送到 Stripe，您只需将数据传递给 Netlify 并进行简单的重定向。

  const redirectToCheckout = async event => {
    event.preventDefault()
    setLoading(true)

   // form validations here. If passed the validation, send data to Stripe and Netlify

    const stripe = await getStripe()
    const { error } = await stripe.redirectToCheckout({
      mode: "subscription",
      lineItems: [{ price: "price_1Gva5YAeKYVunD5viRkFzoR7", quantity: 1 }],
      successUrl: `http://localhost:8000/thanks/`,
      cancelUrl: `http://localhost:8000/404`,
    })


    fetch(`/`, {
      method: `POST`,
      headers: {
        'Content-Type': `application/x-www-form-urlencoded`,
      },
      body: encode({
        'form-name': `transfer`,
        ...data, // here you need to pass your data object
      }),
    })
      .then(() => console.log(`OK`)) // navigate to desired page
      .catch(error => alert(error));
    };

    if (error) {
      console.warn("Error:", error)
      setLoading(false)
    }
  }

上面的片段中有很多东西。首先，在将数据发送到 Stripe API 或 Netlify 之前，确保正确验证您的数据并使用key-对为您的所有字段创建数据对象，您应该需要先验证您的表单。value

然后，您只需要使用fetch（内置JavaScript）或使用axios例如创建一个异步请求。在处理 Netlify 表单时，数据结构非常重要，并且必须准确地传递所需的信息。您可以查看这篇文章以获取更多详细信息。

一旦你的承诺成功结束，你只需要更改console.log(`OK`)for a navigate("/your-page")。

于 2020-10-10T07:00:07.083 回答