问题描述
我的网站代码位于@ https://github.com/CB-Essential-Services/adorable-chestnut/blob/staging-3/src/components/checkout.js
我正在运行Netlify-Gatsby-StripeCheckout堆栈。
问题：我需要以下代码中的submit按钮才能将表单数据提交到Netlify Forms并使用' onClick '事件{{1 }}，以使用Stripe处理付款。
redirecttocheckoutCheckout.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部分工作正常。 Stripe开发人员支持说，我应该能够将表单数据提交给Netlify-> initial convo w/Stripe secondary convo w/Stripe
总而言之，Stripe开发人员支持说是的，我可以在前端的任何时候使用redirecttocheckout 。例如，使用AJAX将表单数据提交给Netlify，然后解析结果redirecttocheckout。
与我正在执行的方法不同。我不知道如何利用AJAX！
但是他们还暗示过程是流畅的。我的方法应该没问题。我只需要弄清楚如何将数据发布到Netlify。
解决方法
完成所有验证后，您需要扩展和重定向您的流程通过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表单时，数据结构非常重要，必须准确传递所需的信息。您可以检查this article for further details。
一旦您的诺言成功结束，您只需将console.log(`OK`)更改为navigate("/your-page")。