Vue de paiement fait avec Laravel, Livewire & AlpineJS

tailwind-payment-view.html

<div class="mx-auto max-w-screen-xl px-4 py-4 sm:py-6 sm:px-6">
    <div class="grid gap-6 lg:grid-cols-3 lg:gap-8">
        <div class="sm:col-span-2">
            <x:alert /> <!-- Alert component use for Laravel 7.0 -->
            <h1 class="leading-7 text-gray-700 font-semibold text-xl">{{ __("Moyen de paiement") }}</h1>
            <p class="mt-1 text-sm text-gray-500 leading-5">{{ __("Toutes vos transactions sont sécurisées et encryptées. Aucune carte de crédit n'est enregistrée dans notre site.") }}</p>
            <div class="mt-4 bg-white rounded-md shadow-md py-1 divide-y divide-gray-100">
                <div class="px-4 sm:px-6 py-2.5">
                    <label for="method_paypal" class="flex items-center justify-between cursor-pointer">
                        <span class="flex items-center">
                            <input id="method_paypal" wire:model.lazy="method" type="radio" class="form-radio h-4 w-4 text-red-600 transition duration-150 ease-in-out border-2" value="paypal" />
                            <span class="ml-4 block text-base leading-6 text-gray-600">PayPal</span>
                        </span>
                        <span class="flex-shrink-0">
                            <img class="h-8 w-12" src="images/credit-cards/paypal.svg" alt="Pay Pal">
                        </span>
                    </label>
                    @if($method === 'paypal')
                        <p class="p-4 sm:p-6 text-gray-500 leading-5 text-base">
                            {{ __("Vous allez être redirigé·(e) sur PayPal pour pouvoir finaliser votre paiement.") }}
                        </p>
                    @endif
                </div>
                <div class="px-4 sm:px-6 py-2.5">
                    <label for="method_credit_card" class="flex-1 flex items-center justify-between cursor-pointer">
                        <span class="flex items-center">
                            <input id="method_credit_card" wire:model.lazy="method" type="radio" class="form-radio h-4 w-4 text-red-600 transition duration-150 ease-in-out" value="credit_card" />
                            <span class="ml-4 block text-base leading-6 text-gray-600">{{ __("Carte de crédit") }}</span>
                        </span>
                        <span class="flex-shrink-0 flex items-center space-x-2">
                            <img class="h-8 w-12" src="images/credit-cards/visa.svg" alt="Visa">
                            <img class="h-8 w-12" src="images/credit-cards/mastercard.svg" alt="Mastercard">
                        </span>
                    </label>
                    @if($method === 'credit_card')
                        <div class="p-4 sm:p-6 text-gray-500 leading-5 text-base">
                            <div class="rounded-md bg-blue-50 p-4">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                    <div class="ml-3 flex-1 md:flex md:justify-between">
                                        <p class="text-sm leading-5 text-blue-700">
                                            {{ __("Vous devez renseignez votre carte à chaque fois que vous effectuez un paiement. Veuillez consulter notre page concernant les cordonnées de votre carte bancaire.") }}
                                        </p>
                                        <p class="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
                                            <a href="#" class="whitespace-no-wrap font-medium text-blue-700 hover:text-blue-600 transition ease-in-out duration-150">
                                                {{ __("Détails") }} &rarr;
                                            </a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-6">
                                <p class="text-gray-500 leading-5 text-base">{{ __("Renseignez votre carte qui sera utilisée pour votre paiement.") }}</p>
                                <div class="mt-3 grid grid-cols-4 gap-4">
                                    <div class="col-span-4">
                                        <label for="card_number" class="block text-sm font-medium leading-5 text-gray-600">{{ __("Numéro de la carte") }}</label>
                                        <div class="mt-1 relative rounded-md shadow-sm">
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <span class="text-gray-500 flex-shrink-0">
                                                    <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                                                    </svg>
                                                </span>
                                            </div>
                                            <input id="card_number" wire:model="card_number" class="form-input block w-full pl-12 sm:text-sm sm:leading-5" placeholder="**** **** **** ****" />
                                            @error('card_number')
                                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                                    <svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                                    </svg>
                                                </div>
                                            @enderror
                                        </div>
                                        @error('card_number')
                                            <p class="mt-2 text-sm text-red-600" id="email-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-span-4 sm:col-span-2">
                                        <label for="cart_holder_name" class="block text-sm font-medium leading-5 text-gray-600">{{ __("Nom sur la carte") }}</label>
                                        <div class="mt-1 relative rounded-md shadow-sm">
                                            <input id="cart_holder_name" wire:model="cart_holder_name" class="form-input block w-full sm:text-sm sm:leading-5" placeholder="John Doe" />
                                            @error('cart_holder_name')
                                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                                    <svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                                    </svg>
                                                </div>
                                            @enderror
                                        </div>
                                        @error('cart_holder_name')
                                            <p class="mt-2 text-sm text-red-600" id="email-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-span-2 sm:col-span-1">
                                        <label for="expiration_date" class="block text-sm font-medium leading-5 text-gray-600">{{ __("Exp. Date") }}</label>
                                        <div class="mt-1 relative rounded-md shadow-sm">
                                            <input id="expiration_date" wire:model="expiration_date" class="form-input block w-full sm:text-sm sm:leading-5" placeholder="03/25" />
                                            @error('expiration_date')
                                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                                    <svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                                    </svg>
                                                </div>
                                            @enderror
                                        </div>
                                        @error('expiration_date')
                                            <p class="mt-2 text-sm text-red-600" id="email-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="col-span-2 sm:col-span-1">
                                        <label for="cvc" class="block text-sm font-medium leading-5 text-gray-600">{{ __("CVC") }}</label>
                                        <div class="mt-1 relative rounded-md shadow-sm">
                                            <input id="cvc" wire:model="cvc" class="form-input block w-full sm:text-sm sm:leading-5" placeholder="***" />
                                            @error('cvc')
                                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                                    <svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                                    </svg>
                                                </div>
                                            @enderror
                                        </div>
                                        @error('cvc')
                                            <p class="mt-2 text-sm text-red-600" id="email-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="px-4 sm:px-6 py-2.5">
                    <label for="method_on_shipping" class="flex items-center justify-between cursor-pointer">
                        <span class="flex items-center">
                            <input id="method_on_shipping" wire:model.lazy="method" type="radio" class="form-radio h-4 w-4 text-red-600 transition duration-150 ease-in-out border-2" value="shipping" />
                            <span class="ml-4 block text-base leading-6 text-gray-600">À la livraison</span>
                        </span>
                        <span class="flex-shrink-0">
                            <svg class="h-6 w-6" stroke="none" fill="currentColor" viewBox="0 0 24 24">
                                <path clip-rule="evenodd" fill-rule="evenodd" d="M17.765 5.453c2.905 0 5.226 2.405 5.235 5.36v6.042c-.06 1.055-1.028.955-1.028.955v.008c0 1.726-1.431 3.182-3.128 3.182-1.743 0-3.127-1.408-3.127-3.182v-.008h-5.54v.008c0 1.726-1.43 3.182-3.126 3.182-1.73 0-3.106-1.39-3.127-3.143H2.895a.905.905 0 01-.895-.91V2.906A.9.9 0 012.895 2h10.672c2.784.122 2.48 2.881 2.454 3.452h1.744zm0 1.818H16.02v3.726h5.227v-.135c0-2-1.564-3.591-3.483-3.591zM7.046 19.227c.758 0 1.384-.637 1.384-1.409 0-.771-.625-1.408-1.384-1.408-.759 0-1.384.637-1.384 1.408 0 .772.625 1.409 1.384 1.409zm7.236-3.235V4.542a.712.712 0 00-.715-.728H3.743v12.222h.703a3.099 3.099 0 012.6-1.4c1.071 0 2.01.532 2.57 1.356h4.666zm4.554 3.235c.763 0 1.388-.637 1.384-1.409-.043-.77-.625-1.408-1.384-1.408-.759 0-1.384.637-1.384 1.408 0 .772.625 1.409 1.384 1.409zm0-4.59c.977 0 1.842.444 2.412 1.142V12.81H16.02v3.225h.214a3.099 3.099 0 012.6-1.4h.001zm-7.634-7.641c.488 0 .895.41.895.91 0 .501-.403.911-.895.911H6.51a.905.905 0 01-.896-.91c0-.501.403-.911.896-.911h4.69zm0 3.727c.488 0 .89.41.895.91-.047.502-.403.911-.895.911H6.51a.905.905 0 01-.896-.91c0-.501.403-.911.896-.911h4.69z" />
                            </svg>
                        </span>
                    </label>
                    @if($method === 'shipping')
                        <p class="p-4 sm:p-6 text-gray-500 leading-5 text-base">
                            {{ __("Vous allez passez une commande qui sera validée une fois que le type de paiement associé à votre commande sera passée.") }}
                        </p>
                    @endif
                </div>
                <div class="px-4 sm:px-6 py-2.5">
                    <label for="method_mobile_money" class="flex-1 flex items-center justify-between cursor-not-allowed disabled">
                        <span class="flex items-center">
                            <input id="method_mobile_money" wire:model.lazy="method" type="radio" class="form-radio h-4 w-4 text-red-600 transition duration-150 ease-in-out" value="mobile_money" disabled />
                            <span class="ml-4 flex items-center text-base leading-6 text-gray-400">
                                <span>{{ __("Mobile Money") }}</span>
                                <span class="ml-4 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-gray-100 text-gray-800">
                                    {{ __("Bientôt") }}
                                </span>
                            </span>
                        </span>
                        <span class="flex-shrink-0 flex items-center space-x-2">
                            <img class="h-8 w-12" src="images/credit-cards/orange-money.svg" alt="Orange Money">
                            <img class="h-8 w-10 rounded" src="images/credit-cards/mtn-money.jpg" alt="MTN Mobile Money">
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <div class="order-first sm:order-last sm:col-span-1">
            <div class="bg-white rounded-md shadow px-4 py-4 sm:px-6">
                <ul class="divide-y divide-gray-200">
                    <li class="flex items-start justify-between py-3">
                        <span class="text-gray-600 text-base leading-5">{{ __("Sous total") }}:</span>
                        <span class="text-gray-700 text-lg leading-5 font-semibold">200.000 FCFA</span>
                    </li>
                    <li class="py-3">
                        <div class="flex items-start justify-between ">
                            <span class="text-gray-600 text-base leading-5">{{ $shippingMethod }}:</span>
                            @if($shippingPrice === 0)
                                <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800">
                                    {{ __("Gratuite") }} 🎉
                                </span>
                            @else
                                <span class="text-gray-700 text-lg leading-5 font-semibold">
                                    12.000 FCFA
                                </span>
                            @endif
                        </div>
                        <p class="mt-2 py-3 text-sm leading-5 text-gray-500">
                            {{ __("Pour en savoir plus sur notre politique de livraison nous vous invitons à visiter") }}
                            <a href="#" target="_blank" class="text-red-600 font-medium underline">
                                {{ __("ce lien") }}.
                            </a>
                        </p>
                    </li>
                    <li class="flex items-start justify-between py-3">
                        <span class="text-gray-500 text-base sm:text-lg font-medium leading-5">{{ __("Total") }}:</span>
                        <span class="text-red-700 text-lg sm:text-2xl leading-5 font-bold">
                            200.000 FCFA
                        </span>
                    </li>
                </ul>
                @if(!empty($method))
                    <button type="button" wire:click="nextStep" class="group mt-3 w-full flex justify-center items-center text-center px-4 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:shadow-outline-red transition duration-150 ease-in-out">
                        {{ __("Continuer") }}
                        <span class="ml-2 transform translate-x-0 group-hover:translate-x-1 transition duration-150 ease-in-out">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                            </svg>
                        </span>
                    </button>
                @endif
                <p class="mt-2 text-gray-500 text-sm leading-4">{{ __("Vous pourrez vérifier et confirmer votre commande à la prochaine étape.") }}</p>
            </div>
        </div>
    </div>
</div>