1 Reply Latest reply on Sep 27, 2013 12:24 PM by kamal_khadka

    how to mask a credit card input field

    kamal_khadka
    kamal_khadka Sep 26, 2013 10:11 AM

      I have been trying to mask the credit card field to show the only last 4 digits of credit card i.e XXXX1234.

       

      When customer clicks edit credit card info button only need to show XXXX1234 but they can input new credit card number if they want to or cancel it. If they do choose to cancel keep the old credit card.

       

      my code looks like following

       

      <h:inputText value=#{bean.creditcard}>

           <a4j:support event="onblur" immediate="true" ajaxSingle="true"/>

      </h:inputText>

       

      My backing bean has following setter and getter

       

      public void setCreditCard(String cardNumber)

      {

           String encryptedCardNumber = "";

           // encrypt credit card

           setCreditCardNumber(encryptedCardNumber);

      }

       

      @validator.CreditCard(message = "#{messages.global_valid_cc}")

      public String getCreditCard()

      {

           String decryptedCardNumber = "";

           // decrypt credit card

           return decryptedCardNumber;

      }

       

      Environment: JSF 1.2, RichFaces 3.3.3, Seam 2, Hibernate

       

      Thank you very much for help.

        • 1. Re: how to mask a credit card input field
          kamal_khadka
          kamal_khadka Sep 27, 2013 12:24 PM (in response to kamal_khadka)

          I have resolved the issue with the following:

           

           

          I created two field one output and input.

           

          Output displays the customer old credit card last four digit.

           

          Input field is where customer can choose to put new one if they like to.

           

          ccValidator checks if the credit card is valid or not.

           

          <s:decorate id="oldCardDecoration" template="/layout/edit.xhtml">

                      <ui:define name="label">

                        <h:outputText value="Old #{messages.editBillingProfile_cardNumber}" />

                      </ui:define>

                      <h:outputText

                        value="XXXXXXX-#{dashboardMediator.currentCustomerCreditCardNumber}">

                      </h:outputText>

                    </s:decorate>

           

           

           

           

                    <s:decorate id="cardNumberDecoration" template="/layout/edit.xhtml">

                      <ui:define name="label">

                        <h:outputText value="New #{messages.editBillingProfile_cardNumber}" />

                      </ui:define>

                      <h:inputText id="ccNumber" onclick="this.value=''"

                        value="#{dashboardMediator.currentCustomerCreditCard.card}" validator="ccValidator">

                        <a4j:support event="onblur" bypassUpdates="true" ajaxSingle="true" reRender="cardNumberDecoration" />

                      </h:inputText>

                    </s:decorate>

           

           

          --------------------------------------------------------------------------------------

           

          private String card = "";

           

            public void setCard(String cardNumber){

            if(cardNumber.length() != 0)

            setCardNumber(cardNumber);

            else

            setCardNumber(getCardNumber());

            }

           

            @Transient

            public String getCard()

            {

            return card;

            }

          1 of 1 people found this helpful
            • Actions