Stripe Elements re mount?

I have a multi step form. I want to allow the user to go back and edit change the credit card, not sure how to achieve this.

Presently I use an init to render the elements when the step is chosen. That seems to work fine. I even added a @if to just display visa ...2342 when the user goes back having already completed the card . I want to call a changeCard method reset card and let the user enter a new card.

Something is a miss. The elements do re-render, but fail to submit correctly and stripe gives a generic error.

I'm sure it's my lack of js knowledge, or something with stripe js not allowing reuse of the elements?

... billing tab
...
  @if($creditCard->paymentMethodId)
    <div class="card-detail mt-4 rounded-md border border-gray-300 p-1.5 text-sm w-3/4">
       {{ strtoupper($creditCard->brand) }} ...{{ $creditCard->masked }}
    </div>
  @else
    <div wire:init="$dispatch('loadStripe')" wire:ignore id="payment-element" class="mt-4"></div>
  @endif
....
@script
<script>
    const stripe = Stripe('{{ config('services.stripe.publishable') }}');

    ...

    const elements = stripe.elements({ clientSecret: '{{ $intentClientSecret }}', appearance });
    const paymentElement = elements.create('payment', options);
    
    $wire.on('changeCard', (event) => {
        paymentElement.unmount(); // Remove the current card element
        $nextTick(() => { paymentElement.mount('#payment-element') });
    });

    $wire.on('loadStripe', (event) => {
        paymentElement.mount('#payment-element');

        const form = document.getElementById('setup-form');
        form.addEventListener('submit', async (event) => {
            event.preventDefault();

			...
        });
    });
</script>
@endscript

LaryAI

1 year ago

Level 58

To address the issue of re-mounting Stripe Elements in a multi-step form, you need to ensure that the Stripe Elements are properly initialized and mounted each time the user navigates back to the credit card step. The problem you're encountering might be due to the reuse of the same paymentElement instance without reinitializing it properly. Here's a solution to handle this scenario:

Ensure Proper Initialization: Each time you want to allow the user to change the card, you should create a new instance of the Stripe Elements and mount it.
Unmount and Re-mount: When the user decides to change the card, unmount the existing element and create a new one.

Here's how you can modify your code to achieve this:

<script>
    const stripe = Stripe('{{ config('services.stripe.publishable') }}');
    let elements;
    let paymentElement;

    function initializeStripeElements() {
        elements = stripe.elements({ clientSecret: '{{ $intentClientSecret }}', appearance });
        paymentElement = elements.create('payment', options);
        paymentElement.mount('#payment-element');
    }

    $wire.on('changeCard', () => {
        if (paymentElement) {
            paymentElement.unmount(); // Unmount the existing element
        }
        $nextTick(() => {
            initializeStripeElements(); // Re-initialize and mount a new element
        });
    });

    $wire.on('loadStripe', () => {
        initializeStripeElements(); // Initial load of Stripe Elements

        const form = document.getElementById('setup-form');
        form.addEventListener('submit', async (event) => {
            event.preventDefault();
            // Handle form submission
            ...
        });
    });
</script>

Key Points:

Re-initialization: By calling initializeStripeElements() each time you need to mount the element, you ensure that a fresh instance is created.
Unmounting: Before creating a new instance, always unmount the existing one to avoid conflicts.
Event Listeners: Ensure that your form submission logic is correctly handling the Stripe payment method creation and any errors that might occur.

This approach should help you manage the Stripe Elements lifecycle more effectively in a multi-step form scenario.

webrobert

1 year ago

Level 51

ok, this seems to work... it allows the user to go back and enter a new card. I used an event to load stripe and dynamically pass in the intentSecret so it was fresh.

Let me know if I missed something?

public function changeCard()
{
    $this->creditCard->reset();
    $this->intentClientSecret = (new StripeService)->setupIntent()['client_secret'];
    $this->dispatch('loadStripe', clientSecret: $this->intentClientSecret);
}

public function completeDetails()
{
    $this->form->validate();

    $this->showSection = 'billing';
    $this->dispatch('loadStripe', clientSecret: $this->intentClientSecret);
}

and in the blade...

...
<p>Your card will be securely stored for easy billing later.</p>

@if($creditCard->paymentMethodId)
    <div>
        <div>{{ strtoupper($creditCard->brand) }} ...{{ $creditCard->masked }}</div>
        <button wire:click="changeCard">change</button>
    </div>
@else
    <div wire:ignore id="payment-element" class="mt-4"></div>
@endif
...
@script
<script>
    const stripe = Stripe('{{ config('services.stripe.publishable') }}');
    let elements;
    let paymentElement;

    const appearance = { theme: 'stripe' };
    const options = { };

    $wire.on('loadStripe', (event) => {
        let intentClientSecret = event.clientSecret
        if (paymentElement) { paymentElement.unmount(); }
        $nextTick(() => {
            elements = stripe.elements({ clientSecret: intentClientSecret, appearance });
            paymentElement = elements.create('payment', options);
            paymentElement.mount('#payment-element');
        });
    });

    $wire.on('submitForm', async () => {
        const { setupIntent, error } = await stripe.confirmSetup({
            elements, confirmParams: {}, redirect: "if_required"
        });
        if (error) {
            console.error(error.message);
            $wire.dispatch('not-in-progress')
        } else if (setupIntent.status === 'succeeded') {
            $wire.dispatch('setup-confirmed', {paymentMethodId: setupIntent.payment_method});
        }
    });
</script>
@endscript

Please or to participate in this conversation.