更新了Stripe与MERN购物应用程序的集成

Question

我想将现在不起作用的旧版stripe集成到用3D安全方式更新的新版本中。我应该如何更改这个代码，我试图搜索YT和博客，但没有找到

mycart：创建一个令牌，然后将其发送到后端进行进一步的支付处理。

const onToken = (token) =>{
setStripeToken(token); 
}
// const history = useNavigate();
const navigate = useNavigate();

//token returns on successful order placing
// console.log(stripeToken); 
useEffect(() => {
const makeRequest = async () => {
try {
const res = await userRequest.post("/checkout/payment", {
tokenId: stripeToken.id,
amount: cart.total,
});
navigate("/success", {state:res});
} 
catch(err)
{
console.log(err);
}
};
stripeToken && makeRequest();
}, [stripeToken, cart.total , navigate]);
return (
<Container>
<Navbar data={searchLinks}/>
<Announcement/>

<Wrapper>
<Title>YOUR CART</Title>
<Top>
<Link to="/products"><TopBotton>CONTINUE SHOPPING</TopBotton></Link>
{/* <a href="/products"><TopBotton>CONTINUE SHOPPING</TopBotton></a> */}

<TopTexts>
<TopText><ShoppingBag style={{margin:"-3px 2px", color: "teal"}}/> BAG({cart.quantity})</TopText>
<TopText><Favorite style={{margin:"-3px 2px", color: "red"}}/> WISHLIST(0)</TopText>
</TopTexts>
<StripeCheckout
name="Ecofelx"
image="https://avatars.githubusercontent.com/Ardent10"
billingAddress
shippingAddress
description={`Your total is ₹ ${cart.total}`}
currency="INR"
amount={cart.total*100}
token={onToken}
stripeKey={KEY}>
<TopBotton type="filled">CHECKOUT NOW</TopBotton>
</StripeCheckout>
</Top>
<Bottom>

{cart.products.length=== 0? 
(
<Info>
<h2>Your Cart is Empty</h2> 
<EmptyImage src='https://cdni.iconscout.com/illustration/premium/thumb/empty-cart-2130356-1800917.png' alt=''/>
</Info>
) :(

<Info>

{cart.products.map((product)=>(
<Product key={product._id}>
<ProductDetail>
<Image src={product.img}/>
<Details>
<ProductName><b>Product:</b> {product.title}</ProductName>
<ProductId><b>ID:</b> {product._id}</ProductId>
<ProductId><b>Color:</b> <ProductColor color={product.color}/></ProductId>                                          
<ProductSize><b>Size:</b> {product.size}</ProductSize>
</Details>
<Removebtn onClick={()=>handleRemove(product._id)}>Remove</Removebtn>
</ProductDetail>
<PriceDetail>
<Hr/>
<ProductAmountContainer>
<Remove/>
<ProductAmount>{product.quantity}</ProductAmount>
<Add/>
</ProductAmountContainer>
<ProductPrice>
₹ {product.price*product.quantity}
</ProductPrice>
</PriceDetail>
</Product>
))}
<Hr/>   

</Info>)

}

<Summary>

<SummaryTitle>ORDER SUMMARY</SummaryTitle>
<SummaryItem>
<SummaryItemText>Subtotal: </SummaryItemText>
<SummaryItemPrice>₹ {cart.total}</SummaryItemPrice>
</SummaryItem>
<SummaryItem>
<SummaryItemText>Estimated Shipping: </SummaryItemText>
<SummaryItemPrice>₹ 150.90</SummaryItemPrice>
</SummaryItem>

<SummaryItem>
<SummaryItemText>Shipping Discount: </SummaryItemText>
<SummaryItemPrice>-₹ 150.90</SummaryItemPrice>
</SummaryItem>
<Hr/>
<SummaryItem type="total">
<SummaryItemText >Total: </SummaryItemText>
<SummaryItemPrice>₹ {cart.total}</SummaryItemPrice>
</SummaryItem>
<StripeCheckout
name="Ecofelx"
image="https://avatars.githubusercontent.com/Ardent10"
billingAddress
shippingAddress
description={`Your total is ₹ ${cart.total}`}
currency="INR"
amount={cart.total*100}
token={onToken}
stripeKey={KEY}
>
<Button>CHECKOUT NOW</Button>
</StripeCheckout>
</Summary>
</Bottom>
</Wrapper>

<Footer/>
</Container>
)

我的成功页面

const Success = () => {
const location = useLocation();
// console.log(location); // to see what state are being passed after placing an order
const cart = useSelector((state)=>state.cart);
const data = location.state;
// console.log(data,cart);
const currentUser = useSelector((state)=>state.user.currentUser);
const [orderId, setOrderId] = useState(null);
console.log(orderId);
useEffect(() => {

const createOrder = async () => {
try {
const res = await userRequest.post("/orders", {

userId: currentUser._id,
products: cart.products.map((item) => ({
productId: item._id,
quantity: item.quantity,
})),
amount: cart.total,
address: data.billing_details.address,
});
setOrderId(res.data._id);
} 
catch(err) {
console.log(err);  
}
};
data && createOrder();
}, [cart, data, currentUser]);

return (
<Container>
{orderId
? `🎊Order has been created successfully. Your order number is ${orderId}`
: `🎉Successfull. Your order is being prepared...`}
<Link to="/">
<Button>Go to Homepage</Button>
</Link>
</Container>
);
};

export default Success;

我的后端中的条纹

router.post("/payment", (req,res)=>{   

stripe.charges.create(
{
source:req.body.tokenId,
amount:req.body.amount,
currency:"INR",
},(stripeErr, stripeRes)=>{
if(stripeErr){
res.status(500).json(stripeErr);
}
else{
res.status(200).json(stripeRes);
}
});
});

Answer 1

我认为你应该直接问Lama Dev来得到答案，我也被这个问题卡住了，找不到任何关于MERN项目的条带集成的新指南，所有旧的都使用react条带结账方法。

看看这个也许会对你有所帮助：https://stripe.com/docs/payments/quickstart

您可以选择要检查代码的前端和后端。

以下是最近的另一个集成：https://codesource.io/how-to-add-credit-card-payment-system-with-stripe-in-react/