使用生成的 Stripe 结帐按钮

Question

我试图在我的 VueJS 项目中实现一个从 Stripe 仪表板生成的结账按钮。

我觉得我没有以正确的方式做这件事，所以如果你有建议，我想听听他们的建议。

我在 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

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

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

2. 第二个错误是因为当您尝试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/include