html 在条带确认URL后,将数据发送到后端JS

kcugc4gi  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(114)

我在发送数据时遇到了问题,在本例中是关于送货地址、购买的产品、购买日期、进行此购买的用户。我在何时以及如何发送此数据方面遇到了问题?我使用Stripe API来实现支付,一切正常用户在Stripe链接上与其会话重定向,并根据他的购物车中的项目支付.但我的结帐数据丢失.理想的情况是,当条纹确认购买,从而重定向成功的网址,这是情况,以及引用的数据被转移.所以我有这个代码:
HTML checkout

<div class="form">
        <p class="text">Adresse de livraison</p>

        <input type="text" id="address" placeholder="adresse">
        
        <div class="two-input-container">
            <input type="text" id="city" placeholder="ville">
            <input type="number" id="state" placeholder="code postale">
        </div>
        <input type="text" id="landmark" placeholder="informations complémentaire">
    </div>

检出JS

window.onload = () => {
    if(!sessionStorage.user){
        location.replace('/login')
    }

    if(location.search.includes('payment=done')){
        let items = [];
        localStorage.setItem('cart', JSON.stringify(items));
        showFormError("order is placed");
    }

    if(location.search.includes('payment_fail=true')){
        showFormError("Une erreur est survenue, merci de réessayer");
    }
}

// select place order button
const placeOrderBtn = document.querySelector('.place-order-btn');

const getAddress = () => {
    // form validation
    let address = document.querySelector('#address').value;
    let city = document.querySelector('#city').value;
    let state = document.querySelector('#state').value;
    let landmark = document.querySelector('#landmark').value;

    if(!address.length || !city.length || !state.length){
        return showFormError("Remplisser tous les champs");
    } else{
        return { address, city, state, landmark }
    }
}
placeOrderBtn.addEventListener('click', () => {
    let cart = JSON.parse(localStorage.getItem('cart'));
    if(cart == null || !cart.length){
        return showFormError("Vous commander aucun article");
    }
    else{
        let address = getAddress();
        
    if(address.address.length){
        // send data to backend
        fetch('/stipe-checkout', {
            method: 'post',
            headers: new Headers({'Content-Type': 'application/json'}),
            body: JSON.stringify({
                items: JSON.parse(localStorage.getItem('cart')),
                address: address,
                email: JSON.parse(sessionStorage.user).email
            })
        })
        .then(res => res.json())
        .then(url => {
            location.href = url;
        })
        .catch(err => console.log(err))
    }
}
})

服务器索引. JS

// stripe payment
let stripeGateway = stripe(process.env.stripe_key);

let DOMAIN = process.env.DOMAIN;

app.post('/stipe-checkout', async (req, res) => {
    const session = await stripeGateway.checkout.sessions.create({
        payment_method_types: ["card"],
        mode: "payment",
        success_url: `${DOMAIN}/success?session_id={CHECKOUT_SESSION_ID}&order=${JSON.stringify(req.body)}`,
        cancel_url: `${DOMAIN}/checkout?payment_fail=true`,
        line_items: req.body.items.map(item => {
            return {
               price_data: {
                   currency: "eur",
                   product_data: {
                       name: item.name,
                       description: item.shortDes,
                       images: item.images
                   },
                   unit_amount: item.price * 100
               },
               quantity: item.item 
            }
        })
    })

    res.json(session.url)
})

app.get('/success', async (req, res) => {
    let { order, session_id } = req.query;

    try{
        const session = await stripeGateway.checkout.sessions.retrieve(session_id);
        const customer = await stripeGateway.customers.retrieve(session.customer);

        let date = new Date();

        let orders_collection = collection(db, "orders");
        let docName = `${customer.email}-order-${date.getTime()}`;

        setDoc(doc(orders_collection, docName), JSON.parse(order))
        .then(data => {
            res.redirect('/checkout?payment=done')
        })

    } catch{
        res.redirect("/404");
    }
})

我曾试图发送它之前,但事实上,如果有人点击按钮,重定向到条纹确认页面,他交付的数据,将被存储,即使他不确认他的购买。

von4xj4u

von4xj4u1#

那么,当您的客户触发重定向到Stripe Checkout时,您要保留的地址数据是否存在于app.post('/stripe-checkout'req变量中?
在这种情况下,您可以在payment_intent_data.shipping参数中创建结帐会话时包括此数据。然后,此数据将存储在结帐创建的付款意向的shipping属性中。您可以在检索结帐会话时获取此数据(server-side或客户端),方法是在Expand参数中传递payment_intent,并查看Checkout会话对象上的payment_intent.shipping.address属性。
或者,您 * 可以 * 让Checkout Session自己为您收集送货地址信息。这会将地址存储在shipping_details.address属性中。
为了确保您的集成能够获取客户的地址信息,我建议您将集成配置为侦听checkout.session.completedwebhook。这样,即使客户无法重定向回您的站点,您的后端代码仍能够获取地址信息。

相关问题