Stripe payments 购买完成后更改条带签出按钮

我试图让我的按钮显示“付费”，或者甚至获得某种

控制台。当用户通过条带签出付费时，记录
。我当前的代码如下所示，但我得到的错误
标记未在我的控制台错误中定义

HTML:


接受并支付（23.99英镑）

JavaScript:

<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
    var handler = StripeCheckout.configure({
        key: 'pk_test_CF2GDj8RsSNWc23MhUJ9kylU00CkI1AJZ5',
        locale: 'auto',
        token: function(token) {
            // You can access the token ID with `token.id`.
            // Get the token ID to your server-side code for use.
            chargeStatus(token);
        }
    });

    var buyButtons = document.getElementsByClassName('purchaseButton');
    for (i = 0; i < buyButtons.length; i++) {
        buyButtons[i].addEventListener('click', function(e) {
            // Open Checkout with further options:
            handler.open({
                name: this.dataset.name,
                amount: this.dataset.amount,
                src: "https://checkout.stripe.com/checkout.js",
                class: "stripe-button",
                key: "pk_test_6pRNASCoBOKtIshFeQd4XMUh",
                email: this.dataset.email,
                currency: "gbp",
                description: this.dataset.description,
            });
            e.preventDefault();
        });
    }
    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
        handler.close();
    });

    function chargeStatus(theObject) {
        fetch("/charge", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify(theObject.id)
        })
        .then(response => {
            if (!response.ok)
                throw response;
            return response.json();
        })
        .then(output => {
            console.log("Purchase succeeded:", output);
        })
        .catch(err => {
            console.log("Purchase failed:", err);
        })
    }

</script>


var handler=StripeCheckout.configure({
键：“pk_测试\u CF2GDj8RsSNWc23MhUJ9kylU00CkI1AJZ5”，
区域设置：“自动”，
令牌：函数（令牌）{
//您可以使用“token.ID”访问令牌ID。
//获取服务器端代码的令牌ID以供使用。
收费状态（代币）；
}
});
var buyButtons=document.getElementsByClassName（'purchaseButton'）；
对于（i=0；i{
如果（！response.ok）
投掷反应；
返回response.json（）；
})
。然后（输出=>{
console.log（“购买成功：”，输出）；
})
.catch（错误=>{
console.log（“购买失败：”，错误）；
})
}
fetch
块试图访问该范围内不存在的变量
令牌。应在条带签出返回令牌供您使用后执行提取。将
fetch
代码包装到函数中，并在
token:function（token）{}
处理程序中调用该函数。
Hi Paul，我已经编辑了代码并将其包装在一个函数中，但不幸的是，在您传递的
对象
函数中，
令牌未定义
，但仍然引用
令牌
。此外，您没有将任何内容传递到
chargeStatus
。将
chargeStatus
中的
token
更改为
object.id
，并将
token
传递到您的
chargeStatus
函数中，它应该可以工作。谢谢Paul，我已经更新了上面的代码。我现在收到一个JS错误
帖子http://domain.local/charge 400（错误请求）
但我猜这是因为我不在安全的https域上。这只是意味着你的浏览器不能点击
http://domain.local/charge
。可能是因为您的后端未设置为在该路由接收请求。签出将在http中工作，但仅适用于测试模式。一旦你上线，你需要启用SSL。谢谢Paul，还有什么方法可以保持在同一页面上，只更改按钮文本吗？
<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
    var handler = StripeCheckout.configure({
        key: 'pk_test_CF2GDj8RsSNWc23MhUJ9kylU00CkI1AJZ5',
        locale: 'auto',
        token: function(token) {
            // You can access the token ID with `token.id`.
            // Get the token ID to your server-side code for use.
            chargeStatus(token);
        }
    });

    var buyButtons = document.getElementsByClassName('purchaseButton');
    for (i = 0; i < buyButtons.length; i++) {
        buyButtons[i].addEventListener('click', function(e) {
            // Open Checkout with further options:
            handler.open({
                name: this.dataset.name,
                amount: this.dataset.amount,
                src: "https://checkout.stripe.com/checkout.js",
                class: "stripe-button",
                key: "pk_test_6pRNASCoBOKtIshFeQd4XMUh",
                email: this.dataset.email,
                currency: "gbp",
                description: this.dataset.description,
            });
            e.preventDefault();
        });
    }
    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
        handler.close();
    });

    function chargeStatus(theObject) {
        fetch("/charge", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify(theObject.id)
        })
        .then(response => {
            if (!response.ok)
                throw response;
            return response.json();
        })
        .then(output => {
            console.log("Purchase succeeded:", output);
        })
        .catch(err => {
            console.log("Purchase failed:", err);
        })
    }

</script>