Pay by Phone: Credit Card Input Bug Fix

TL;DR

The pay by phone screen incorrectly accepts credit card details instead of just a mobile number. This guide explains how to identify the problem, fix the input validation on the frontend and backend, and test the solution.

Identifying the Problem

1. Reproduce the issue: Attempt to pay using the ‘Pay by Phone’ option and enter credit card details instead of a mobile phone number. Confirm that the system accepts this invalid input.
2. Inspect Frontend Code: Use your browser’s developer tools (usually F12) to examine the HTML form for the Pay by Phone screen. Look at the input element and any associated JavaScript validation code.
3. Check Backend Logs: Review server logs for errors or unexpected data being received from the Pay by Phone endpoint when invalid credit card information is submitted.

Fixing the Frontend Validation

1. Update Input Type: Change the input type to tel to specifically request a telephone number.

   <input type="tel" id="phone_number" name="phone_number" required pattern="^[0-9]{10,12}$" placeholder="Mobile Number">

2. Add Input Pattern: Use a regular expression (regex) to enforce the correct mobile number format. The example above uses pattern="^[0-9]{10,12}$" which requires 10 to 12 digits.

   Adjust the regex pattern as needed for your specific country/region’s phone number formats.

3. Implement JavaScript Validation: Add client-side validation using JavaScript to provide immediate feedback to the user if they enter invalid input. This improves the user experience.

   const phoneNumberInput = document.getElementById('phone_number');
   phoneNumberInput.addEventListener('input', function() {
     if (!/^[0-9]{10,12}$/.test(this.value)) {
       alert('Please enter a valid mobile number.');
       this.value = ''; // Clear invalid input
     }
   });

Fixing the Backend Validation

1. Locate Pay by Phone Endpoint: Identify the server-side code that handles requests to the Pay by Phone endpoint.
2. Implement Server-Side Validation: Add validation logic to ensure that the received input is a valid mobile phone number before processing it.

   function processPayByPhone(phoneNumber) {
     const isValidPhoneNumber = /^[0-9]{10,12}$/.test(phoneNumber);
   
     if (!isValidPhoneNumber) {
       return 'Invalid mobile number.'; // Or return an error code
     }
   
     // Proceed with payment processing...
   }

3. Sanitize Input: Before using the phone number, sanitize it to remove any non-numeric characters. This prevents potential security vulnerabilities.

   function sanitizePhoneNumber(phoneNumber) {
     return phoneNumber.replace(/[^0-9]/g, '');
   }

Testing the Solution

1. Valid Mobile Number: Submit a valid mobile phone number and confirm that the payment process is initiated successfully.
2. Invalid Credit Card Details: Attempt to submit credit card details again. The frontend validation should prevent submission, and the backend should reject the request if it bypasses the frontend.
3. Edge Cases: Test with various edge cases such as numbers with spaces, special characters, or incorrect lengths.
4. Cross-Browser Testing: Verify that the solution works correctly across different browsers (Chrome, Firefox, Safari, Edge).