• Resolved Tad

    (@tatifox)


    Hello,

    Is there any way we can add custom placeholder text in credit card info fields?
    (For: Card Number, Expiration Date, and Security Code)
    Card Number: ‘•••• •••• •••• ••••’
    Expiration Date: MM / YY
    Security Code: CSC

    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Erica Kuschel

    (@piratepenpen)

    Automattic Happiness Engineer

    Hey @tatifox,

    This would fall under the custom developer thing I mentioned. It would require a reworking of the extension.

    Cheers,

    I would like to add placeholders as well!

    Plugin Support Erica Kuschel

    (@piratepenpen)

    Automattic Happiness Engineer

    Hey @nandrey and @tatifox – I went ahead and added that feature request as well. I don’t have an ETA on if/when this would be added, so you may want to still consider looking at some custom code to get you there if you’re looking to implement it now.

    Cheers!

    Hello @piratepenpen,

    Would you be able to at least give us a piece of code too add it in to theme functions.php file?

    Card Number: ‘•••• •••• •••• ••••’
    Expiration Date: MM/YY
    Security Code: CSC

    Also I find placeholder and other attributes code inside plugin PHP files, but I am wondering why they are not functioning?

    class-sv-wc-payment-gateway-payment-form.php
    class-sv-wc-payment-gateway-admin-payment-token-editor.php

    
    	/**
    	 * Get the editor fields.
    	 *
    	 * @since 4.3.0
    	 * @return array
    	 */
    	protected function get_fields( $type = '' ) {
    
    		if ( ! $type ) {
    			$type = $this->get_gateway()->get_payment_type();
    		}
    
    		switch ( $type ) {
    
    			case 'credit-card' :
    
    				// Define the credit card fields
    				$fields = array(
    					'id' => array(
    						'label'    => __( 'Token ID', 'woocommerce-plugin-framework' ),
    						'editable' => ! $this->get_gateway()->get_api()->supports_get_tokenized_payment_methods(),
    						'required' => true,
    					),
    					'card_type' => array(
    						'label'   => __( 'Card Type', 'woocommerce-plugin-framework' ),
    						'type'    => 'select',
    						'options' => $this->get_card_type_options(),
    					),
    					'last_four' => array(
    						'label'   => __( 'Last Four', 'woocommerce-plugin-framework' ),
    						'attributes' => array(
    							'pattern'   => '[0-9]{4}',
    							'maxlength' => 4,
    						),
    					),
    					'expiry'    => array(
    						'label' => __( 'Expiration (MM/YY)', 'woocommerce-plugin-framework' ),
    						'attributes' => array(
    							'placeholder' => 'MM/YY',
    							'pattern'     => '(0[1-9]|1[012])[- /.]\d\d',
    							'maxlength'   => 5,
    						),
    					),
    				);
    
    			break;
    
    			case 'echeck' :
    
    				// Define the echeck fields
    				$fields = array(
    					'id' => array(
    						'label'    => __( 'Token ID', 'woocommerce-plugin-framework' ),
    						'editable' => ! $this->get_gateway()->get_api()->supports_get_tokenized_payment_methods(),
    						'required' => true,
    					),
    					'account_type' => array(
    						'label'   => __( 'Account Type', 'woocommerce-plugin-framework' ),
    						'type'    => 'select',
    						'options' => array(
    							'checking' => __( 'Checking', 'woocommerce-plugin-framework' ),
    							'savings'  => __( 'Savings', 'woocommerce-plugin-framework' ),
    						),
    					),
    					'last_four' => array(
    						'label'   => __( 'Last Four', 'woocommerce-plugin-framework' ),
    						'attributes' => array(
    							'pattern'   => '[0-9]{4}',
    							'maxlength' => 4,
    						),
    					),
    				);
    
    			break;
    
    			default :
    				$fields = array();
    		}
    
    		// Parse each field against the defaults
    		foreach ( $fields as $field_id => $field ) {
    
    			$fields[ $field_id ] = wp_parse_args( $field, array(
    				'label'      => '',
    				'type'       => 'text',
    				'attributes' => array(),
    				'editable'   => true,
    				'required'   => false,
    			) );
    		}
    
    
    	/**
    	 * Get default credit card form fields, note this pulls default values
    	 * from the associated gateway
    	 *
    	 * for an explanation of autocomplete attribute values, see:
    	 * @link https://html.spec.whatwg.org/multipage/forms.html#autofill
    	 *
    	 * @since 4.0.0
    	 * @return array credit card form fields
    	 */
    	protected function get_credit_card_fields() {
    
    		$defaults = $this->get_gateway()->get_payment_method_defaults();
    
    		$fields = array(
    			'card-number' => array(
    				'type'              => 'tel',
    				'label'             => esc_html__( 'Card Number', 'woocommerce-plugin-framework' ),
    				'id'                => 'wc-' . $this->get_gateway()->get_id_dasherized() . '-account-number',
    				'name'              => 'wc-' . $this->get_gateway()->get_id_dasherized() . '-account-number',
    				'placeholder'       => '•••• •••• •••• ••••',
    				'required'          => true,
    				'class'             => array( 'form-row-wide' ),
    				'input_class'       => array( 'js-sv-wc-payment-gateway-credit-card-form-input js-sv-wc-payment-gateway-credit-card-form-account-number' ),
    				'maxlength'         => 20,
    				'custom_attributes' => array(
    					'autocomplete'   => 'cc-number',
    					'autocorrect'    => 'no',
    					'autocapitalize' => 'no',
    					'spellcheck'     => 'no',
    				),
    				'value' => $defaults['account-number'],
    			),
    			'card-expiry' => array(
    				'type'              => 'text',
    				'label'             => esc_html__( 'Expiration (MM/YY)', 'woocommerce-plugin-framework' ),
    				'id'                => 'wc-' . $this->get_gateway()->get_id_dasherized() . '-expiry',
    				'name'              => 'wc-' . $this->get_gateway()->get_id_dasherized() . '-expiry',
    				'placeholder'       => esc_html__( 'MM / YY', 'woocommerce-plugin-framework' ),
    				'required'          => true,
    				'class'             => array( 'form-row-first' ),
    				'input_class'       => array( 'js-sv-wc-payment-gateway-credit-card-form-input js-sv-wc-payment-gateway-credit-card-form-expiry' ),
    				'custom_attributes' => array(
    					'autocomplete'   => 'cc-exp',
    					'autocorrect'    => 'no',
    					'autocapitalize' => 'no',
    					'spellcheck'     => 'no',
    				),
    				'value' => $defaults['expiry'],
    			),
    		);
    
    		if ( $this->get_gateway()->csc_enabled() ) {
    
    			$fields['card-csc'] = array(
    				'type'              => 'tel',
    				'label'             => esc_html__( 'Card Security Code', 'woocommerce-plugin-framework' ),
    				'id'                => 'wc-' . $this->get_gateway()->get_id_dasherized() . '-csc',
    				'name'              => 'wc-' . $this->get_gateway()->get_id_dasherized() . '-csc',
    				'placeholder'       => esc_html__( 'CSC', 'woocommerce-plugin-framework' ),
    				'required'          => $this->get_gateway()->csc_required(),
    				'class'             => array( 'form-row-last' ),
    				'input_class'       => array( 'js-sv-wc-payment-gateway-credit-card-form-input js-sv-wc-payment-gateway-credit-card-form-csc' ),
    				'maxlength'         => 4,
    				'custom_attributes' => array(
    					'autocomplete'   => 'off',
    					'autocorrect'    => 'no',
    					'autocapitalize' => 'no',
    					'spellcheck'     => 'no',
    				),
    				'value' => $defaults['csc'],
    			);
    		}
    
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fields Placeholder’ is closed to new replies.