Question

我正在尝试在我的VueJS项目中实现从Stripe Dashboard生成的结帐按钮。

我觉得我做的方式不正确，所以如果您有建议，我想听听他们的意见。

我在index.html中添加了<script src="https://js.stripe.com/v3/"></script>。

这是我的Vue组件。

<template>
    <div>
    <button
            style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
            id="checkout-button-MY_PLAN"
            role="link"
    >
        Checkout
    </button>

    <div id="error-message"></div>
    </div>
</template>

<script>

    (function() {

        let stripe = Stripe('MY_KEY');

        let checkoutButton = document.getElementById('MY_PLAN');
        checkoutButton.addEventListener('click', function () {

            stripe.redirectToCheckout({
                items: [{plan: 'MY_PLAN', quantity: 1}],

                successUrl: '',
                cancelUrl: '',
            })
                .then(function (result) {
                    if (result.error) {
                        let displayError = document.getElementById('error-message');
                        displayError.textContent = result.error.message;
                    }
                });
        });
    })();
</script>

<style scoped>

</style>

如果我不能在VueJS项目中使用Stripe，如何在不修改我所有项目的情况下解决问题？

Answer 1

对于第一个错误，其中Stripe未定义。这可能是因为Stripe.js库没有在该代码运行之前加载。在执行任何使用Stripe的JavaScript之前，您需要确保在HTML中将此标签包含Stripe.js [1]。请注意，它尚未加载async。

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

第二个错误是因为当您尝试getElementById时传递的ID与按钮的HTML中的ID不同。

按钮的ID为checkout-button-MY_PLAN，而您试图通过传递查找按钮的ID为MY_PLAN。我建议将您对getElementById的调用更新为：

let checkoutButton = document.getElementById('checkout-button-MY_PLAN');

[1] https://stripe.com/docs/js/including

使用生成的条纹结帐按钮

1 个答案: