namespace WPForms\Forms\Fields\CreditCard;
use WPForms\Forms\Fields\Traits\ProField as ProFieldTrait;
* Credit card field (legacy).
class Field extends WPForms_Field {
* Primary class constructor.
// Define field type information.
$this->name = esc_html__( 'Credit Card', 'wpforms-lite' );
$this->type = 'credit-card';
$this->icon = 'fa-credit-card';
$this->group = 'payment';
protected function hooks(): void {
* Field options panel inside the builder.
* @param array $field Field settings.
public function field_options( $field ) {
'after_title' => $this->get_field_options_notice(),
$this->field_option( 'label', $field );
$this->field_option( 'description', $field );
$this->field_option( 'required', $field );
$this->field_option( 'basic-options', $field, $args );
* Advanced field options.
$this->field_option( 'advanced-options', $field, $args );
$this->field_option( 'size', $field );
$cardnumber_placeholder = ! empty( $field['cardnumber_placeholder'] ) ? esc_attr( $field['cardnumber_placeholder'] ) : '';
'<div class="wpforms-clear wpforms-field-option-row wpforms-field-option-row-cardnumber" id="wpforms-field-option-row-%1$d-cardnumber" data-subfield="cardnumber" data-field-id="%1$d">',
'slug' => 'cardnumber_placeholder',
'value' => esc_html__( 'Card Number Placeholder Text', 'wpforms-lite' ),
echo '<div class="placeholder">';
'<input type="text" class="placeholder-update" id="wpforms-field-option-%1$d-cardnumber_placeholder" name="fields[%1$d][cardnumber_placeholder]" value="%2$s" data-field-id="%1$d" data-subfield="credit-card-cardnumber">',
esc_attr( $cardnumber_placeholder )
$cardcvc_placeholder = ! empty( $field['cardcvc_placeholder'] ) ? $field['cardcvc_placeholder'] : '';
'<div class="wpforms-clear wpforms-field-option-row wpforms-field-option-row-cvc" id="wpforms-field-option-row-%1$d-cvc" data-subfield="cvc" data-field-id="%1$d">',
'slug' => 'cardcvc_placeholder',
'value' => esc_html__( 'Security Code Placeholder Text', 'wpforms-lite' ),
echo '<div class="placeholder">';
'<input type="text" class="placeholder-update" id="wpforms-field-option-%1$d-cardcvc_placeholder" name="fields[%1$d][cardcvc_placeholder]" value="%2$s" data-field-id="%1$d" data-subfield="credit-card-cardcvc">',
esc_attr( $cardcvc_placeholder )
$cardname_placeholder = ! empty( $field['cardname_placeholder'] ) ? $field['cardname_placeholder'] : '';
'<div class="wpforms-clear wpforms-field-option-row wpforms-field-option-row-cardname" id="wpforms-field-option-row-%1$d-cardname" data-subfield="cardname" data-field-id="%1$d">',
'slug' => 'cardname_placeholder',
'value' => esc_html__( 'Name on Card Placeholder Text', 'wpforms-lite' ),
echo '<div class="placeholder">';
'<input type="text" class="placeholder-update" id="wpforms-field-option-%1$d-cardname_placeholder" name="fields[%1$d][cardname_placeholder]" value="%2$s" data-field-id="%1$d" data-subfield="credit-card-cardname">',
esc_attr( $cardname_placeholder )
$this->field_option( 'css', $field );
$this->field_option( 'label_hide', $field );
$this->field_option( 'sublabel_hide', $field );
$this->field_option( 'advanced-options', $field, $args );
* Field preview inside the builder.
* @param array $field Field settings.
public function field_preview( $field ) {
$number_placeholder = ! empty( $field['cardnumber_placeholder'] ) ? esc_attr( $field['cardnumber_placeholder'] ) : '';
$cvc_placeholder = ! empty( $field['cardcvc_placeholder'] ) ? esc_attr( $field['cardcvc_placeholder'] ) : '';
$name_placeholder = ! empty( $field['cardname_placeholder'] ) ? esc_attr( $field['cardname_placeholder'] ) : '';
$this->field_preview_option(
'label_badge' => $this->get_field_preview_badge(),
<div class="format-selected format-selected-full">
<div class="wpforms-field-row">
<div class="wpforms-credit-card-cardnumber">
<label class="wpforms-sub-label"><?php esc_html_e( 'Card Number', 'wpforms-lite' ); ?></label>
<input type="text" placeholder="<?php echo esc_attr( $number_placeholder ); ?>" readonly>
<div class="wpforms-credit-card-cardcvc">
<label class="wpforms-sub-label"><?php esc_html_e( 'Security Code', 'wpforms-lite' ); ?></label>
<input type="text" placeholder="<?php echo esc_attr( $cvc_placeholder ); ?>" readonly>
<div class="wpforms-field-row">
<div class="wpforms-credit-card-cardname">
<label class="wpforms-sub-label"><?php esc_html_e( 'Name on Card', 'wpforms-lite' ); ?></label>
<input type="text" placeholder="<?php echo esc_attr( $name_placeholder ); ?>" readonly>
<div class="wpforms-credit-card-expiration">
<label class="wpforms-sub-label"><?php esc_html_e( 'Expiration', 'wpforms-lite' ); ?></label>
<div class="wpforms-credit-card-cardmonth">
<div class="wpforms-credit-card-cardyear">
$this->field_preview_option( 'description', $field );
* Field display on the form front-end.
* @param array $field Field data and settings.
* @param array $deprecated Deprecated field attributes. Use field properties.
* @param array $form_data Form data and settings.
public function field_display( $field, $deprecated, $form_data ) {