Fields from default credit card form not getting posted to handler

[shamilihsan]

Prerequisites

• [x ] I have searched for similar issues in both open and closed tickets and cannot find a duplicate
• [x ] The issue still exists against the latest master branch of WooCommerce on Github (this is not the same version as on WordPress.org!)
• I have attempted to find the simplest possible steps to reproduce the issue
• I have included a failing test as a pull request (Optional)

Steps to reproduce the issue

1. In the process_payment create a variable that extracts data from $_POST

$card_number = $_POST['gatewayID-card-number'];

2. You will notice that it returns a null.

3. Edit the file woocommerce/includes/gateways/class-wc-payment-gateway-cc.php as follows

$cvc_field = '<p class="form-row form-row-last">
			<label for="' . esc_attr( $this->id ) . '-card-cvc">' . esc_html__( 'Card code', 'woocommerce' ) . ' <span class="required">*</span></label>
			<input name="' . esc_attr( $this->id ) . '-card-cvc" id="' . esc_attr( $this->id ) . '-card-cvc" class="input-text wc-credit-card-form-card-cvc" inputmode="numeric" autocomplete="off" autocorrect="no" autocapitalize="no" spellcheck="no" type="tel" maxlength="4" placeholder="' . esc_attr__( 'CVC', 'woocommerce' ) . '" ' . $this->field_name( 'card-cvc' ) . ' style="width:100px" />
		</p>';

		$default_fields = array(
			'card-number-field' => '<p class="form-row form-row-wide">
				<label for="' . esc_attr( $this->id ) . '-card-number">' . esc_html__( 'Card number', 'woocommerce' ) . ' <span class="required">*</span></label>
				<input name="' . esc_attr( $this->id ) . '-card-number" id="' . esc_attr( $this->id ) . '-card-number" class="input-text wc-credit-card-form-card-number" inputmode="numeric" autocomplete="cc-number" autocorrect="no" autocapitalize="no" spellcheck="no" type="tel" placeholder="&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;" ' . $this->field_name( 'card-number' ) . ' />
			</p>',
			'card-expiry-field' => '<p class="form-row form-row-first">
				<label for="' . esc_attr( $this->id ) . '-card-expiry">' . esc_html__( 'Expiry (MM/YY)', 'woocommerce' ) . ' <span class="required">*</span></label>
				<input name="' . esc_attr( $this->id ) . '-card-expiry" id="' . esc_attr( $this->id ) . '-card-expiry" class="input-text wc-credit-card-form-card-expiry" inputmode="numeric" autocomplete="cc-exp" autocorrect="no" autocapitalize="no" spellcheck="no" type="tel" placeholder="' . esc_attr__( 'MM / YY', 'woocommerce' ) . '" ' . $this->field_name( 'card-expiry' ) . ' />
			</p>',
		);

4. Notice name attribute has been added to the input fields.

5. Now if you try accessing the $_POST['gatewayID-card-number'] the card number entered by the user would be available.

Expected/actual behavior

I am currently building a custom payment gateway plugin using the default credit card form that is available in woocommerce. I was having trouble extracting the details in the fields (Card number, expiry date, card code) once the user posts the form.

Once I did some digging I found the root cause. The issue was found in the file class-wc-payment-gateway-cc.php which is in located in woocommerce/includes/gateways/.

The default card form's input fields did not have a name attribute. This caused a Jquery function in checkout.js to miss specific input fields(i.e. card number, expiry date and card code) when serializing the form for a post request.

I had to manually add the name attribute to the fields which then allowed me to retrieve the data using $_POST.

Isolating the problem

• [x ] This bug happens with only WooCommerce plugin active
• [x ] This bug happens with a default WordPress theme active, or Storefront
• [x ] I can reproduce this bug consistently using the steps above

WordPress Environment

``` ` ### WordPress Environment ###

Home URL: http://localhost/ogodemo
Site URL: http://localhost/ogodemo
WC Version: 3.3.5
Log Directory Writable: ✔
WP Version: 4.9.5
WP Multisite: –
WP Memory Limit: 1 GB
WP Debug Mode: –
WP Cron: ✔
Language: en_US

Server Environment

Server Info: Apache/2.4.29 (Win32) OpenSSL/1.1.0g PHP/7.2.3
PHP Version: 7.2.3
PHP Post Max Size: 1 GB
PHP Time Limit: 5000
PHP Max Input Vars: 1000
cURL Version: 7.57.0
OpenSSL/1.1.0g

SUHOSIN Installed: –
Max Upload Size: 120 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ❌ Your server does not have the SoapClient class enabled - some gateway plugins which use SOAP may not work as expected.
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 3.3.5
WC Database Prefix: wp_
MaxMind GeoIP Database: ❌ The MaxMind GeoIP Database does not exist - Geolocation will not function. You can download and install it manually from http://dev.maxmind.com/geoip/legacy/geolite/ to the path: . Scroll down to "Downloads" and download the "Binary / gzip" file next to "GeoLite Country". Please remember to uncompress GeoIP.dat.gz and upload the GeoIP.dat file only.
Total Database Size: 1.52MB
Database Data Size: 0.67MB
Database Index Size: 0.85MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.05MB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB
wp_comments: Data: 0.02MB + Index: 0.09MB
wp_links: Data: 0.02MB + Index: 0.02MB
wp_options: Data: 0.09MB + Index: 0.02MB
wp_postmeta: Data: 0.06MB + Index: 0.03MB
wp_posts: Data: 0.02MB + Index: 0.06MB
wp_termmeta: Data: 0.02MB + Index: 0.03MB
wp_terms: Data: 0.02MB + Index: 0.03MB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB
wp_usermeta: Data: 0.02MB + Index: 0.03MB
wp_users: Data: 0.02MB + Index: 0.05MB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB

Post Type Counts

page: 4
post: 2
product: 4
shop_order: 7

Security

Secure connection (HTTPS): ❌Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates.
Hide errors from visitors: ✔

Active Plugins (2)

OGOPAY Gateway: by Denesh Rajaratnam – 0.0.1
WooCommerce: by Automattic – 3.3.5

Settings

API Enabled: ✔
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

WC Pages

Shop base: #5 - /shop/
Cart: #6 - /cart/
Checkout: #7 - /checkout/
My account: #8 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Storefront
Version: 2.2.8
Author URL: https://woocommerce.com/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

Templates

Overrides: –
`

</details>

[mikejolley]

@shamilihsan This is intentional. Names are excluded on the default form so these values are not posted to your server - posting credit card numbers to your server is a security risk and opens you up to complex PCI issues.

If you really need to do this, do so at your own risk and add the names.

The better way to do this, and how the larger gateways like Stripe handle this, is to deal with the fields client side and create a secure token which posts to your server instead. Hopefully your gateway supports something along those lines instead!

Thanks

[mikejolley]

cc @claudiulodro for visibility.