PHP Classes

File: resources/views/livewire/tenant/billing/payment-method.blade.php

Recommend this page to a friend!
  Classes of Nyi Nyi Lwin   Laravel SAAS Boilerplate   resources/views/livewire/tenant/billing/payment-method.blade.php   Download  
File: resources/views/livewire/tenant/billing/payment-method.blade.php
Role: Auxiliary script
Content type: text/plain
Description: Auxiliary script
Class: Laravel SAAS Boilerplate
Base application to develop software as a service
Author: By
Last change:
Date: 1 year ago
Size: 3,122 bytes
 

Contents

Class file image Download
<div class="mt-8">
    <h3 class="text-lg font-medium text-gray-900">{{ __('Change Payment Method') }}</h3>
    <div class="mt-2 shadow overflow-hidden sm:rounded-md">
        <div class="px-4 py-5 bg-white sm:p-6">
            @livewire('tenant.billing.current-payment-method')

            <div class="hidden sm:block">
                <div class="py-4">
                    <div class="border-t border-gray-200"></div>
                </div>
            </div>

            <label for="card-holder-name" class="block text-sm font-medium leading-5 text-gray-700">{{ __('Card Holder Name') }}</label>
            <div class="mt-1 relative rounded-md shadow-sm">
                <input id="card-holder-name" type="text" class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 w-full" placeholder="{{ __('John Doe') }}">
            </div>

            <div class="mt-2 relative rounded-md shadow-sm">
                <div id="card-element" class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 w-full p-3"></div>
            </div>
            <p id="payment-method-message" class="text-sm"></p>
        </div>
        <div class="px-4 sm:px-6 py-2 bg-gray-50 flex justify-end">
            <button id="card-button" data-secret="{{ $intent->client_secret }}" class="py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-500 focus:outline-none focus:shadow-outline-blue focus:bg-indigo-500 active:bg-indigo-600 transition duration-150 ease-in-out">
                {{ __('Update Payment Method') }}
            </button>
        </div>
    </div>
</div>

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

<script>
    const stripe = Stripe('{{ env('STRIPE_KEY') }}');

    const elements = stripe.elements();
    const cardElement = elements.create('card');

    cardElement.mount('#card-element');

    const cardHolderName = document.getElementById('card-holder-name');
    const cardButton = document.getElementById('card-button');
    const clientSecret = cardButton.dataset.secret;

    function paymentMethodMessage(message, success) {
        document.getElementById('payment-method-message').innerHTML = message;
        document.getElementById('payment-method-message').classList = 'text-sm mt-4 ' + (success ? 'text-green-500' : 'text-red-500');
    }

    cardButton.addEventListener('click', async (e) => {
        const { setupIntent, error } = await stripe.confirmCardSetup(
            clientSecret, {
                payment_method: {
                    card: cardElement,
                    billing_details: { name: cardHolderName.value }
                }
            }
        );

        if (error) {
            alert('error')
            paymentMethodMessage(error.message, false);
        } else {
            paymentMethodMessage('Payment method updated successfuly.', true);
        @this.set('paymentMethod', setupIntent.payment_method);
        @this.call('save');
        }
    });
</script>