VariableSingleDonation.vue

<template>
    <form @submit.prevent="oneOff">
        <label for="cardholder-name">Cardholder Name</label>
        <input id="cardholder-name"
               v-model="name"
               class="block border mb-4 p-4 border-gray-500 w-full"
               type="text">
        <label for="amount">Amount</label>
        <input type="number"
               id="amount"
               v-model="amount"
               class="block border mb-4 p-4 border-gray-500 w-full">
        <!-- placeholder for Elements -->
        <div id="card-element"></div>
        <button id="card-button"
                class="btn w-full"
                :data-secret="intentSecret">
            {{ buttonText }}
        </button>
    </form>
</template>

<script>
    import axios from 'axios'
    export default {
        data: () => ({
            name: '',
            amount: 10,
            intentSecret: null,
            buttonText: 'Add Card Details'
        }),
        methods: {
            oneOff() {
                axios.post('/donation', {
                    name: this.name,
                    amount: this.amount
                })
                    .then((response) => this.intentSecret = response.data)
                    .then(() => this.makeDonation())
            },
            makeDonation() {
                this.buttonText = 'Make Donation'
                const stripe = Stripe('pk_test_XXXXXXXXXXXX')

                const elements = stripe.elements()
                const cardElement = elements.create('card')
                cardElement.mount('#card-element')

                const cardholderName = document.getElementById('cardholder-name')
                const cardButton = document.getElementById('card-button')
                const clientSecret = cardButton.dataset.secret

                cardButton.addEventListener('click', async (ev) => {
                    const {paymentIntent, error} = await stripe.handleCardPayment(
                        clientSecret, cardElement, {
                            payment_method_data: {
                                billing_details: {name: cardholderName.value}
                            }
                        }
                    );

                    if (error) {
                        console.log(error)
                    } else {
                        console.log('yay! 🎉')
                    }
                })
            }
        }
    }
</script>