使用生成的 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