Inertia, Vue3 w/composition API Stripe Issue

Hi all,

I have the following:

<template>
  <Head title="Subscription" />

  <AuthenticatedLayout>
      <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
          <FormSection @submitted="handleSubmit">
            <template #title>
              Subscription
            </template>

            <template #description>
                Update your card and subscription details here.
            </template>
            <template #form>
             

              <div class="col-span-6 sm:col-span-4 pb-4 pt-5">
                <InputLabel for="name" value="Cardholder name" />
                <TextInput
                    id="name"
                    v-model="form.cardholder"
                    type="text"
                    class="mt-1 block w-full"
                    autocomplete="name"
                />
                <div id="payment-element" class="pt-4"></div>
              </div>
            </template>

            <template #actions>
              <PrimaryButton

              >
                Update
              </PrimaryButton>
            </template>

          </FormSection>
        </div>
      </div>
  </AuthenticatedLayout>
</template>

<script setup>
import AuthenticatedLayout from '@/Layouts/AppLayout.vue';
import { ref, onMounted } from "vue"
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import FormSection from '@/Components/FormSection.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';

const token = ref(null)
const stripe = ref(null)
const elements = ref(null)

const props = defineProps(['intent', 'token'])

const form = useForm({
    _method: 'POST',
    cardholder: '',

});

onMounted(() => {
    stripe.value = Stripe('xxxxxxxxxxxxxxxxxx');

    const elements = stripe.value.elements();

    const options = {
      clientSecret: props.intent.client_secret,
    }

    elements.value = stripe.value.elements(options);
    const paymentElement = elements.value.create('payment');
    paymentElement.mount('#payment-element');

})

const handleSubmit = async (e) => {
    e.preventDefault();

    const { setupIntent, error } = await stripe.value.confirmCardSetup(props.intent.client_secret, {
        payment_method: {
          card: '', // What do and how can I pass the card here?
          billing_details: {
            name: form.cardholder,
          },
        },
    })

    if (error === undefined) {
      
    } else {
    
    }
}
</script>

But I can't seem to pass the cardElement to the submit method, I have tried to set to the ref values but then the Stripe form doesn't render.

Any help greatly appreciated.

MohamedTammam

3 years ago

Level 51

There's a conflict with this two lines, what are you trying to do?

const stripe = ref(null)

stripe.value = Stripe('xxxxxxxxxxxxxxxxxx');

theUnforgiven

3 years ago

Level 51

I just want to get Stripe elements showing (which it currently does) on mounted, then once it's filled out pass the cardElement to the submit method.

Please or to participate in this conversation.