Add Autofill Support for Iranian Payment Gateways and Standardized Card Format

Iranian online payment gateways, standardized by Shaparak (https://www.shaparak.ir/), have a uniform input structure for card payments. Unlike many international gateways, Iranian payment pages do not include a “Cardholder Name” field. Instead, they require:

  • Card Number (16 digits)
  • Expiration Date (Month/Year) split into two fields: MM and YY
  • CVV2 (3 or 4 digits)

By adding autofill support for these standardized fields, Bitwarden can enhance the user experience for Iranian customers, allowing them to quickly and securely fill in their card details during online transactions.

Key Points:

  • No Cardholder Name Field: Iranian gateways differ from most international ones by omitting the cardholder name.
  • Uniform Structure: All Iranian gateways follow a similar pattern, simplifying implementation of autofill.
  • Expiration Fields: Two separate inputs for month and year are standard.
  • CVV2: A short numeric field (3 or 4 digits).

Benefits:

  • Improved User Experience: Users save time and reduce errors by autofilling their card details.
  • Broader International Support: This addition caters to a growing global user base.
  • Enhanced Trust: A seamless autofill process encourages users to store payment credentials in Bitwarden.

References:

Example Code Snippets:

All share a similar structure: fields for Card Number, Expiry Month/Year, and CVV2.
Note: The action URL and field names/IDs may vary slightly.

1. Beh Pardakht Mellat (BPM)

html

Copy code

<form action="https://bpm.shaparak.ir/pgwchannel/startpay.mellat" method="post">
  <label for="Pan">Card Number:</label>
  <input type="tel" id="Pan" name="Pan" maxlength="19" placeholder="**** **** **** ****" required>

  <label for="ExpireMonth">Expire Month:</label>
  <input type="tel" id="ExpireMonth" name="ExpireMonth" maxlength="2" placeholder="MM" required>

  <label for="ExpireYear">Expire Year:</label>
  <input type="tel" id="ExpireYear" name="ExpireYear" maxlength="2" placeholder="YY" required>

  <label for="Cvv2">CVV2:</label>
  <input type="tel" id="Cvv2" name="Cvv2" maxlength="4" placeholder="CVV2" required>

  <button type="submit">Pay</button>
</form>

2. Parsian E-Payment (PEC)

html

Copy code

<form action="https://pec.shaparak.ir/pecpaymentgateway" method="post">
  <label for="Pan">Card Number:</label>
  <input type="tel" id="Pan" name="Pan" placeholder="**** **** **** ****" required>

  <label for="ExpireMonth">Expire Month:</label>
  <input type="tel" id="ExpireMonth" name="ExpireMonth" placeholder="MM" required>

  <label for="ExpireYear">Expire Year:</label>
  <input type="tel" id="ExpireYear" name="ExpireYear" placeholder="YY" required>

  <label for="Cvv2">CVV2:</label>
  <input type="tel" id="Cvv2" name="Cvv2" maxlength="4" placeholder="CVV2" required>

  <button type="submit">Pay</button>
</form>

3. Saman Kish (SEP)

html

Copy code

<form action="https://sep.shaparak.ir/payment.aspx" method="post">
  <label for="Pan">Card Number:</label>
  <input type="tel" id="Pan" name="Pan" required placeholder="**** **** **** ****">

  <label for="ExpireMonth">Expire Month:</label>
  <input type="tel" id="ExpireMonth" name="ExpireMonth" maxlength="2" required placeholder="MM">

  <label for="ExpireYear">Expire Year:</label>
  <input type="tel" id="ExpireYear" name="ExpireYear" maxlength="2" required placeholder="YY">

  <label for="Cvv2">CVV2:</label>
  <input type="tel" id="Cvv2" name="Cvv2" maxlength="4" required placeholder="CVV2">

  <button type="submit">Pay</button>
</form>

4. Pasargad (PEP)

html

Copy code

<form action="https://pep.shaparak.ir/gateway.aspx" method="post">
  <label for="Pan">Card Number:</label>
  <input type="tel" id="Pan" name="Pan" required placeholder="**** **** **** ****">

  <label for="ExpireMonth">Expire Month:</label>
  <input type="tel" id="ExpireMonth" name="ExpireMonth" maxlength="2" required placeholder="MM">

  <label for="ExpireYear">Expire Year:</label>
  <input type="tel" id="ExpireYear" name="ExpireYear" maxlength="2" required placeholder="YY">

  <label for="Cvv2">CVV2:</label>
  <input type="tel" id="Cvv2" name="Cvv2" maxlength="4" required placeholder="CVV2">

  <button type="submit">Pay</button>
</form>

5. Asan Pardakht

html

Copy code

<form action="https://asan.shaparak.ir/pay.aspx" method="post">
  <label for="Pan">Card Number:</label>
  <input type="tel" id="Pan" name="Pan" maxlength="19" required placeholder="**** **** **** ****">

  <label for="ExpireMonth">Expire Month:</label>
  <input type="tel" id="ExpireMonth" name="ExpireMonth" maxlength="2" required placeholder="MM">

  <label for="ExpireYear">Expire Year:</label>
  <input type="tel" id="ExpireYear" name="ExpireYear" maxlength="2" required placeholder="YY">

  <label for="Cvv2">CVV2:</label>
  <input type="tel" id="Cvv2" name="Cvv2" maxlength="4" required placeholder="CVV2">

  <button type="submit">Pay</button>
</form>

@MostafaAfrouzi Welcome to the forum!

Are you having problems with autofilling credit card information from Bitwarden?

Autofilling of credit card numbers, expiration dates, and CVV codes is already supported in the Bitwarden browser extensions. I created a test form using the HTML code samples that you provided above, and I had no issues autofilling information that had been stored as a Card item in my Bitwarden vault.

If you are experiencing autofill issues on specific websites, then you can submit an Autofill Failure Report to Bitwarden, using the following form:

 

If I have misunderstood your request, could you please clarify in greater detail what new feature you are proposing (i.e., what is something not currently possible, which would become possible if your feature request is implemented?)?