Donation API error page - How to handle credit cards?

Matthew Andrade

Hello guys,

I was hoping someone can point me in the right direction. I am looking to use this plugin along with jquery.validation plugin in my forms but from what I see I would need to use a select tag in order for creditcard2 to function correctly.

What I currently have is this on my page where the donation page lives as my CC choices:

<span><p</span><span> </span><span>class</span><span>=</span><span>"ccType"</span><span>></span><span><br />     </span><span><label</span><span> </span><span>for</span><span>=</span><span>"card_type"</span><span> </span><span>class</span><span>=</span><span>"error"</span><span>></span><span>You must select a credit card from one of the following.</span><span></label></span><span><br />        </span><span><br></span><span><br />     </span><span><input</span><span> </span><span>type</span><span>=</span><span>"radio"</span><span> </span><span>value</span><span>=</span><span>"1000"</span><span> </span><span>id</span><span>=</span><span>"card_type_1000"</span><span> </span><span>name</span><span>=</span><span>"card_type"</span><span> </span><span>style</span><span>=</span><span>"</span><span>outline</span><span>:</span><span>none</span><span>;</span><span> border</span><span>:</span><span>none</span><span>;</span><span>"</span><span> </span><span>/></span><span> <br />        </span><span><img</span><span> </span><span>src</span><span>=</span><span>"../visa.png"</span><span> </span><span>alt</span><span>=</span><span>"Visa"</span><span> </span><span>width</span><span>=</span><span>"50"</span><span> </span><span>height</span><span>=</span><span>"30"</span><span> </span><span>align</span><span>=</span><span>"top"</span><span> </span><span>/></span><span> <br />        </span><span><input</span><span> </span><span>type</span><span>=</span><span>"radio"</span><span> </span><span>value</span><span>=</span><span>"1002"</span><span> </span><span>id</span><span>=</span><span>"card_type_1002"</span><span> </span><span>name</span><span>=</span><span>"card_type"</span><span> </span><span>style</span><span>=</span><span>"</span><span>outline</span><span>:</span><span>none</span><span>;</span><span> border</span><span>:</span><span>none</span><span>;</span><span>"</span><span> </span><span>/></span><span> <br />        </span><span><img</span><span> </span><span>src</span><span>=</span><span>"../mastercard.png"</span><span> </span><span>alt</span><span>=</span><span>"Mastercard"</span><span> </span><span>width</span><span>=</span><span>"50"</span><span> </span><span>height</span><span>=</span><span>"30"</span><span> </span><span>align</span><span>=</span><span>"top"</span><span> </span><span>/></span><span> <br />        </span><span><input</span><span> </span><span>type</span><span>=</span><span>"radio"</span><span> </span><span>value</span><span>=</span><span>"1006"</span><span> </span><span>id</span><span>=</span><span>"card_type_1006"</span><span> </span><span>name</span><span>=</span><span>"card_type"</span><span> </span><span>style</span><span>=</span><span>"</span><span>outline</span><span>:</span><span>none</span><span>;</span><span> border</span><span>:</span><span>none</span><span>;</span><span>"</span><span> </span><span>/></span><span> <br />        </span><span><img</span><span> </span><span>src</span><span>=</span><span>"../discover.png"</span><span> </span><span>alt</span><span>=</span><span>"Discover"</span><span> </span><span>width</span><span>=</span><span>"50"</span><span> </span><span>height</span><span>=</span><span>"30"</span><span> </span><span>align</span><span>=</span><span>"top"</span><span> </span><span>/></span><span> <br />        </span><span><input</span><span> </span><span>type</span><span>=</span><span>"radio"</span><span> </span><span>value</span><span>=</span><span>"1004"</span><span> </span><span>id</span><span>=</span><span>"card_type_1004"</span><span> </span><span>name</span><span>=</span><span>"card_type"</span><span> </span><span>style</span><span>=</span><span>"</span><span>outline</span><span>:</span><span>none</span><span>;</span><span> border</span><span>:</span><span>none</span><span>;</span><span>"</span><span> </span><span>/></span><span> <br />        </span><span><img</span><span> </span><span>src</span><span>=</span><span>"../amex.png"</span><span> </span><span>alt</span><span>=</span><span>"American Express"</span><span> </span><span>width</span><span>=</span><span>"50"</span><span> </span><span>height</span><span>=</span><span>"30"</span><span> </span><span>align</span><span>=</span><span>"top"</span><span> </span><span>/></span><span><br />    </span><span></p></span>

value = 1000 is "Visa"

value = 1002 is "MasterCard"

value = 1006 is "Discover"

value = 1004 is "AmEx"

The plugin site mentions creating a lookup hash. I don't know how to create one. Also the documentation that is on the site only shows examples using <select></select>. I am using inputs.

How can I get this to work with the set up that I currently have.

any suggestions on how this can work alongside the error page for the donation API?

Noah Cooper

Try something like this:

<script type="text/javascript">
var ccType='';
$(function(){
     $('#myform').validate({
          rules:{
               cardnum:{
                    creditcard2:function(){
                         return ccType;
                    }
               }
          }
     });
     $('#cardnum').keydown(function(){
          getCCType();
     });
     $('input').click(function(){
          getCCType();
          $('#myform').validate().element('#cardnum');
     });
});
function getCCType(){
     $('input').each(function(){
          if($(this).attr('checked'))
               ccType=$(this).val();
     });
}
</script>
<form id="myform">
     <p class="ccType">
          <label for="card_type" class="error">You must select a credit card from one of the following.</label><br />
          <input type="radio" value="Visa" id="card_type_1000" name="card_type" style="outline:none; border:none;" /> 
          <img src="../visa.png" alt="Visa" width="50" height="30" align="top" /> 
          <input type="radio" value="MasterCard" id="card_type_1002" name="card_type" style="outline:none; border:none;" /> 
          <img src="../mastercard.png" alt="Mastercard" width="50" height="30" align="top" /> 
          <input type="radio" value="Discover" id="card_type_1006" name="card_type" style="outline:none; border:none;" /> 
          <img src="../discover.png" alt="Discover" width="50" height="30" align="top" /> 
          <input type="radio" value="AmEx" id="card_type_1004" name="card_type" style="outline:none; border:none;" /> 
          <img src="../amex.png" alt="American Express" width="50" height="30" align="top" />
     </p>
     <input id="cardnum" name="cardnum" />
</form>

Note that I changed the values for the card types to the values the plugin expects, rather than using a hash table. Since card type is not actually a field that gets passed to the API, the values don't matter.