Donation API error page - How to handle credit cards?

Options
Matthew Andrade
Matthew Andrade
Ancient Membership 10 Comments Photogenic Name Dropper
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions

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?

Tagged:

Comments

  • Noah Cooper
    Noah Cooper
    Ancient Membership 1000 Comments 100 Likes Photogenic

    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.

Categories