如何为表单提交按钮创建一个“onClick”事件，该按钮既可以将数据发布到 Netlify 又可以重定向到 Stripe Checkout？

Question

我的网站代码位于@ 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。

Answer 1

完成所有验证后，您需要扩展和重定向流程redirectToCheckout function。

假设您的redirectToCheckout function 正确地将您的数据推送到 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的数据 object，您应该需要先验证您的表单。

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

一旦您的 promise 成功结束，您只需将console.log(`OK`)更改为navigate("/your-page") 。