{% if craft.app.request.isCpRequest == true %} {% endif %} {% import "_includes/forms" as forms %}
{{ 'Card Holder'|t('commerce') }}
{{ forms.text({ name: 'firstName', maxlength: 70, placeholder: "First Name"|t('commerce'), autocomplete: false, class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-holder-first-name'~(paymentForm.getErrors('firstName') ? ' error'), value: paymentForm.firstName, required: true, autocomplete: "given-name" }) }}
{{ forms.text({ name: 'lastName', maxlength: 70, placeholder: "Last Name"|t('commerce'), autocomplete: false, class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-holder-last-name'~(paymentForm.getErrors('lastName') ? ' error'), value: paymentForm.lastName, required: true, autocomplete: "family-name" }) }}
{% set errors = [] %} {% for attributeKey in ['firstName', 'lastName'] %} {% set errors = errors|merge(paymentForm.getErrors(attributeKey)) %} {% endfor %} {{ forms.errorList(errors) }}
{{ 'Contact Information'|t('commerce') }}
{{ forms.text({ name: 'email', maxlength: 70, placeholder: "Email Address"|t('commerce'), autocomplete: false, class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-holder-first-name'~(paymentForm.getErrors('firstName') ? ' error'), value: paymentForm.email, required: true, autocomplete: "email" }) }}
{{ forms.text({ name: 'phone', maxlength: 70, placeholder: "Phone Number"|t('commerce'), autocomplete: false, class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-holder-last-name'~(paymentForm.getErrors('lastName') ? ' error'), value: paymentForm.phone, required: true, autocomplete: "phone" }) }}
{{ 'Billing Information'|t('commerce') }}
{{ forms.text({ name: 'address', placeholder: "Address"|t('commerce'), autocomplete: false, class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-number'~(paymentForm.getErrors('number') ? ' error'), value: paymentForm.address, autocomplete: "address" }) }}
{{ forms.text({ class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-expiry'~(paymentForm.getErrors('month') ? ' error'), type: 'text', name: 'city', placeholder: "City"|t('commerce'), value: paymentForm.city, autocomplete: "city" }) }}
{{ forms.text({ class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-expiry'~(paymentForm.getErrors('year') ? ' error'), type: 'text', name: 'state', placeholder: "State"|t('commerce'), value: paymentForm.state, autocomplete: "state" }) }}
{{ forms.text({ type: 'text', name: 'postalCode', placeholder: "Postal Code"|t('commerce'), class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-cvc'~(paymentForm.getErrors('cvv') ? ' error'), value: paymentForm.postalCode, autocomplete: "zip" }) }}
{{ forms.text({ type: 'text', name: 'country', placeholder: "Country"|t('commerce'), class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-cvc'~(paymentForm.getErrors('cvv') ? ' error'), value: paymentForm.country, autocomplete: "country" }) }}
{{ 'Card'|t('commerce') }}
{{ forms.text({ name: 'cc-number', maxlength: 19, placeholder: "Card Number"|t('commerce'), autocomplete: false, class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-number'~(paymentForm.getErrors('number') ? ' error'), value: paymentForm.number, autocomplete: "cc-number" }) }}
{{ forms.text({ class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-expiry'~(paymentForm.getErrors('month') ? ' error'), type: 'text', maxlength: 2, name: 'month', placeholder: "MM"|t('commerce'), value: paymentForm.month, autocomplete: "cc-exp-month" }) }}
{{ forms.text({ class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-expiry'~(paymentForm.getErrors('year') ? ' error'), type: 'text', maxlength: 4, name: 'year', placeholder: "YYYY"|t('commerce'), value: paymentForm.year, autocomplete: "cc-exp-year" }) }}
{{ forms.text({ type: 'text', name: 'cvv', placeholder: "CVV"|t('commerce'), class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-cvc'~(paymentForm.getErrors('cvv') ? ' error'), value: paymentForm.cvv, autocomplete: "cc-csc" }) }}
{{ forms.hidden({ name: 'cardDescription', id: 'cardDescription', placeholder: "Card Description"|t('commerce'), autocomplete: false, class: 'w-full border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded card-number'~(paymentForm.getErrors('number') ? ' error'), value: paymentForm.cardDescription, }) }}
{% set errors = [] %} {% for attributeKey in ['number', 'month', 'year', 'cvv'] %} {% set errors = errors|merge(paymentForm.getErrors(attributeKey)) %} {% endfor %} {{ forms.errorList(errors) }}