首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >表单提交和重定向

表单提交和重定向
EN

Stack Overflow用户
提问于 2020-11-03 02:02:32
回答 1查看 100关注 0票数 2

我正在尝试在我的网站上实现条带支付,但在客户去条带结账之前,我需要从表单中收集数据。

我有下面的代码,但表单没有被提交。当我单击该按钮时,它会直接转到条纹。如果你们有任何想法让这个表单工作,那就太棒了!提前谢谢你。

代码语言:javascript
运行
复制
<form id="booking-form" action="<?php echo esc_url( ct_get_thankyou_page() ); ?>">  

<input type="text" class="form-control" name="first_name" value="">

<input type="text" class="form-control" name="last_name" value="">

<input type="text" class="form-control" name="email" value="">

<button type="submit" class="book-now-btn" id="book-now-btn" <?php echo esc_html__( 'Pay Now', 'bookings' ) ?></button>


</form>



<script>
const url = '/stripe_checkout_integration_php/stripe_charge.php'; // 


var buyBtn = document.getElementById('book-now-btn');
var responseContainer = document.getElementById('paymentResponse');

    
// Create a Checkout Session with the selected product
var createCheckoutSession = function (stripe) {
  
    return fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            checkoutSession: 1,
        }),
    }).then(function (result) {

        return result.json();

       


    });
};

// Handle any errors returned from Checkout
var handleResult = function (result) {
    if (result.error) {
        responseContainer.innerHTML = '<p>'+result.error.message+'</p>';
    }
    buyBtn.disabled = false;
    buyBtn.textContent = 'Buy Now';
};

// Specify Stripe publishable key to initialize Stripe.js
var stripe = Stripe('<?php echo STRIPE_PUBLISHABLE_KEY; ?>');

buyBtn.addEventListener("click", function (evt) {
    buyBtn.disabled = true;
    buyBtn.textContent = 'Please wait...';



    createCheckoutSession().then(function (data) {
        if(data.sessionId){
            stripe.redirectToCheckout({
            }).then(handleResult);
        }else{
            handleResult(data);
        }
    });
});
</script>
EN

回答 1

Stack Overflow用户

发布于 2020-11-03 06:42:49

您已经创建了一个争用条件,这或多或少是意料之中的。你正在重定向到条纹结账,并且还希望通过一次点击来发布表单数据,而不需要对这种相互交织的行为进行任何显式管理。

您可以使用所需的数据进行显式的服务器调用,或者在createCheckoutSession fetch调用中传递数据并在那里进行处理,而不是依赖于表单post。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64650857

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档