Javascript 如何创建'；onClick'；表单提交按钮的事件，该按钮将数据发布到Netlify并重定向到条带签出？

我的网站代码是@

我在经营一家Netlify——盖茨比——StripeCheckout公司

问题：我需要下面代码中的

submit

按钮向Netlify表单提交表单数据，并使用“onClick”事件

重定向到checkout

处理带条带的付款

Checkout.js

import React，{useState}来自“React”；
从“@stripe/stripe js”导入{loadStripe}；
从“lodash”进口；
函数编码（数据）{
返回Object.keys（数据）
.map（（键）=>encodeURIComponent（键）+'='+encodeURIComponent（数据[key]））
.join（“&”）
}
让脱衣舞表演
常量getStripe=（）=>{
如果（！stripePromise）{
stripePromise=加载条带（“pk_测试_RlvibjeKdvwY81acv2YLwvTM00I3UsWXIi”）
}
返回条程序
}
常量签出=（）=>{
常量[loading，setLoading]=useState（false）
const redirectToCheckout=异步事件=>{
event.preventDefault（）
设置加载（真）
const stripe=await getStripe（）
const{error}=wait stripe.redirectToCheckout({
模式：“订阅”，
行项目：[{价格：“价格”，数量：1}]，
成功URL:`http://localhost:8000/thanks/`,
取消URL:`http://localhost:8000/404`,
})
如果（错误）{
console.warn（“错误：”，错误）
设置加载（错误）
}
}
报税表（

如果你是人类，请不要填写：


名称


电子邮件地址


支付

)
}
导出默认签出

完成所有验证后，您需要展开并重定向流程

重定向到Checkout

功能

假设您的

重定向到checkout

函数正确地将数据推送到条带，您只需将数据传递到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，在此之前，您需要验证表单

然后，您只需要使用（JavaScript内置）或例如使用创建异步请求。在处理Netlify表单时，数据结构非常重要，必须准确地传递所需的信息。你可以查一下

---

一旦您的承诺成功结束，您只需更改

控制台.log（`OK`）

，即可进行

导航（“/your page”）

一旦完成所有验证，您需要展开并重定向您的流程

重定向到checkout

函数

假设您的

重定向到checkout

函数正确地将数据推送到条带，您只需将数据传递到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，在此之前，您需要验证表单

然后，您只需要使用（JavaScript内置）或例如使用创建异步请求。在处理Netlify表单时，数据结构非常重要，必须准确地传递所需的信息。你可以查一下

---

一旦您的承诺成功结束，您只需更改

console.log（`OK`）

即可导航（“/your page”）

谢谢Ferran。我成功地添加了数据对象，它传递了成功提交的值，而没有重定向到checkout。将其添加为“onClick”事件似乎覆盖了完成Netlify过程。我是否100%需要使用“fetch”？我的成功页面在redirectToCheckout中定义。换句话说：我可以从“”重定向到CheckOut吗？然后（）=>'？fetch用于向Netlify发出AJAX请求，其他值不是必需的。当然，您可以使用then（）调用另一个函数。可能会在

then（）中添加
条带。重定向到checkout
）

适用于您。谢谢Ferran。我成功添加了数据对象，它传递了成功提交的值，而没有重定向到checkout。将其添加为“onClick”事件似乎覆盖了完成Netlify进程。是否100%需要使用“fetch”？我的成功页面在redirectToCheckout中定义。换句话说：我可以从中重定向到CheckOut吗？然后（（）=>”？fetch用于向Netlify发出AJAX请求，其他值不是必需的。当然，您可以使用then（）调用另一个函数。可能会在

then（）中添加
条带。重定向到checkout
。