paymentInformación de pago
Sección para recopilar datos financieros del cliente, utilizando diferentes tipos de campos para cada tipo de información.
widgetsElementos utilizados
arrow_drop_down_circle
select
Menú desplegable para tipo de tarjeta
phone
input type="tel"
Campo para número de tarjeta
date_range
input type="month"
Campo para fecha de vencimiento
security
input type="number"
Campo para código de seguridad
codeCódigo de información de pago
<fieldset>
<legend>Información de pago</legend>
<div class="form-group">
<label for="tipo-tarjeta">Tipo de tarjeta: <span class="required">*</span></label>
<select id="tipo-tarjeta" name="tipo-tarjeta" required>
<option value="" disabled selected>Seleccione una opción</option>
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="amex">American Express</option>
</select>
</div>
<div class="form-group">
<label for="numero-tarjeta">Número de tarjeta: <span class="required">*</span></label>
<input type="tel" id="numero-tarjeta" name="numero-tarjeta" placeholder="1234-5678-9012-3456" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}" required>
</div>
<div class="form-group">
<label for="vencimiento">Fecha de vencimiento: <span class="required">*</span></label>
<input type="month" id="vencimiento" name="vencimiento" required>
</div>
<div class="form-group">
<label for="cvv">Código de seguridad (CVV): <span class="required">*</span></label>
<input type="number" id="cvv" name="cvv" min="100" max="999" required>
</div>
</fieldset>
<legend>Información de pago</legend>
<div class="form-group">
<label for="tipo-tarjeta">Tipo de tarjeta: <span class="required">*</span></label>
<select id="tipo-tarjeta" name="tipo-tarjeta" required>
<option value="" disabled selected>Seleccione una opción</option>
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="amex">American Express</option>
</select>
</div>
<div class="form-group">
<label for="numero-tarjeta">Número de tarjeta: <span class="required">*</span></label>
<input type="tel" id="numero-tarjeta" name="numero-tarjeta" placeholder="1234-5678-9012-3456" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}" required>
</div>
<div class="form-group">
<label for="vencimiento">Fecha de vencimiento: <span class="required">*</span></label>
<input type="month" id="vencimiento" name="vencimiento" required>
</div>
<div class="form-group">
<label for="cvv">Código de seguridad (CVV): <span class="required">*</span></label>
<input type="number" id="cvv" name="cvv" min="100" max="999" required>
</div>
</fieldset>
visibilityVista previa
Formulario de Pago
Los campos obligatorios se han marcado con *.