Pin Payment and OptimizePress Integration

Pin Payment (PP) is an online payment system from Australia. Like Paypal, They also offer some API so it can be integrated easily with outside system. They have a good documentation that any developer can learn how to use the API’s.

In this tutorial, I’m going to explain how to integrate the payment form on OptimizePress (OP) with Pin Payment based on my job experience. First, we need to create a payment form on OP. Then, we need to edit the form to include some javascript on the OP Live Editor.

First, create a payment form and add some inputs like First Name, Last Name, email, credit card number, etc. Here is for completed input.payment_formYou can peek the HTML code payment_form (just open it in your html editor) and make some changes like add a javascript link, css, etc.

Second, we’ll include a javascript that linked to the Pin server. To use the test server, please link to https://test-api.pin.net.au/pin.js. For the live one, use https://cdn.pin.net.au/pin.v2.js. Put the link on the script tag below the links tags. Here is the code (for the test one).

  1. <link rel="stylesheet" href="//www1.moon-ray.com/formeditor/formeditor/css/form.default.css" type="text/css" />
  2. ...
  3. <script src='https://test-api.pin.net.au/pin.js'></script>
  4. ...

We also need a link to another javascript to validate the inputs of the form. We call this new javascript file, pin_payment.js. Put it below the new script.

  1. <link rel="stylesheet" href="//www1.moon-ray.com/formeditor/formeditor/css/form.default.css" type="text/css" />
  2. ...
  3. <script src='https://test-api.pin.net.au/pin.js'></script>
  4. <script type="text/javascript" src="http://localhost/Projects/conversionrateacademy/wp-content/themes/optimizePressTheme/pages/global/js/pin_payment.js">
  5. ...

I used  a complete url here : http://localhost/Projects/conversionrateacademy/wp-content/themes/optimizePressTheme/pages/global/js/pin_payment.js because OP don’t allow relative url. It seems not good if we have many page and want to include all the javascripts or want to use the script in another site.

OP provide a global directory where we can create a new file (.php, .css, .js). For the javascript file, we put it in js directory. Okay, create the file in /wp-content/themes/optimizePressTheme/pages/global/js/ directory and name it pin_payment.js. Don’t forget, to make it work, we need a pair of key from the pin payment when we registered for the first time. There are publishable key and secret key. Here is the code for pin_payment.js

  1. $(document).ready(function(){
  2.     $(".div_country br, .form-box br").remove();
  3.  
  4.     Pin.setPublishableKey('your_publishable_key');
  5.     var $form = $('form#frm_payment'),
  6.         $submitButton = $form.find(":submit"),
  7.         $errors=$form.find('.errors');
  8.     $submitButton.removeAttr('disabled');
  9.  
  10.     $form.submit(function(e) {
  11.         e.preventDefault();
  12.         $errors.hide();
  13.         $submitButton.attr({disabled: true});
  14.  
  15.         if(!validateInput())
  16.             return;
  17.         if(!validateCardName())
  18.             return;
  19.         if(!validateCardExpired())
  20.             return;
  21.         var card = {
  22.             number: $('#card_number').val(),
  23.             name: $('#card_name').val(),
  24.             expiry_month: $('#expiry_month').val(),
  25.             expiry_year: $('#expiry_year').val(),
  26.             cvc: $('#card_ccv').val(),
  27.             address_line1: $('#address').val(),
  28.             address_line2: '',
  29.             address_city: $('#city').val(),
  30.             address_state: $('#state').val(),
  31.             address_postcode: $('#zip').val(),
  32.             address_country: $('#country').val()
  33.         };
  34.  
  35.         Pin.createToken(card, handlePinResponse);
  36.     });
  37.  
  38.     function handlePinResponse(response) {
  39.         var $form = $('form#frm_payment');
  40.         if (response.response) {
  41.             $('<input>')
  42.                 .attr({type: 'hidden', name: 'card_token'})
  43.                 .val(response.response.token)
  44.                 .appendTo($form);
  45.             $('<input>')
  46.                 .attr({type: 'hidden', name: 'ip_address'})
  47.                 .val(response.ip_address)
  48.                 .appendTo($form);
  49.             $errors.hide();  
  50.             $form.get(0).submit();
  51.         } else {
  52.             var $errorList = $errors.find('ul');
  53.             $errors.find('h3').text(response.error_description);
  54.             $errorList.empty();
  55.             if (response.messages) {
  56.                 $.each(response.messages, function(index, errorMessage) {
  57.                     $('<li>').text(errorMessage.message).appendTo($errorList);
  58.                 });
  59.             }
  60.             $errors.show();
  61.             $submitButton.removeAttr('disabled');
  62.         }
  63.     };
  64.  
  65.     function validateInput(){
  66.         var firstname = $('#firstname').val();
  67.         var lastname = $('#lastname').val();
  68.         var email = $('#email').val();
  69.         var cell_phone = $('#cell_phone').val();
  70.         var address = $('#address').val();
  71.         var city = $('#city').val();
  72.         var state = $('#state').val();
  73.         var zip = $('#zip').val();
  74.         var country = $('#country').val();
  75.         var card_type = $('#card_type').val();
  76.  
  77.         var fail = 0;
  78.         var $errorList = $errors.find('ul');
  79.         $errors.find('h3').text("One or more parameters were missing or invalid");
  80.         $errorList.empty();
  81.  
  82.         if(firstname==''){
  83.             fail++;  
  84.             $('<li>').text("First Name can't be blank").appendTo($errorList);
  85.         }      
  86.         if(lastname==''){
  87.             fail++;  
  88.             $('<li>').text("Last Name can't be blank").appendTo($errorList);
  89.         }      
  90.         if(email==''){
  91.             fail++;  
  92.             $('<li>').text("Email can't be blank").appendTo($errorList);
  93.         }else{
  94.             if(!validateEmail(email)){
  95.                 fail++;  
  96.                 $('<li>').text("Email is not valid").appendTo($errorList);
  97.             }
  98.         }      
  99.         if(cell_phone==''){
  100.             fail++;  
  101.             $('<li>').text("Phone/Mobile can't be blank").appendTo($errorList);
  102.         }      
  103.         if(address==''){
  104.             fail++;  
  105.             $('<li>').text("Address can't be blank").appendTo($errorList);
  106.         }      
  107.         if(city==''){
  108.             fail++;  
  109.             $('<li>').text("City can't be blank").appendTo($errorList);
  110.         }
  111.         if(state==''){
  112.             fail++;  
  113.             $('<li>').text("State can't be blank").appendTo($errorList);
  114.         }
  115.         if(zip==''){
  116.             fail++;  
  117.             $('<li>').text("Zip Code/Postal can't be blank").appendTo($errorList);
  118.         }
  119.         if(country==''){
  120.             fail++;  
  121.             $('<li>').text("Country can't be blank").appendTo($errorList);
  122.         }
  123.         if(card_type==''){
  124.             fail++;  
  125.             $('<li>').text("Card Type can't be blank").appendTo($errorList);
  126.         }
  127.  
  128.         $submitButton.removeAttr('disabled');
  129.         if(fail > 0){
  130.             $errors.show();
  131.             return false;
  132.         }else
  133.             return true;
  134.       }
  135.  
  136.     function validateEmail(email) {
  137.         var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  138.         return re.test(email);
  139.     }
  140.  
  141.     function validateCardName(){
  142.         var error=0;
  143.         var card_name = $('#card_name').val();
  144.         card_name=card_name.trim();
  145.         card_name=card_name.split(" ");
  146.         if(card_name.length > 0){
  147.               var filled=0;
  148.               //var card_holder_name="";
  149.               for(i=0;i<card_name.length;i++){
  150.                   if(card_name[i].trim()!=""){
  151.                     filled++;
  152.                        //card_holder_name=card_holder_name + card_name[i].trim() + " ";
  153.                   }
  154.               }
  155.               if(filled > 1)
  156.                   return true;//card_holder_name.trim();
  157.               else
  158.                   error++;
  159.         }else{
  160.               error++;
  161.         }      
  162.  
  163.         if(error > 0){
  164.             var $errorList = $errors.find('ul');
  165.             $errors.find('h3').text("One or more parameters were missing or invalid");
  166.             $errorList.empty();
  167.             $('<li>').text("Please type First Name and Last Name for the Card Holder Name.").appendTo($errorList);
  168.             $submitButton.removeAttr('disabled');
  169.             $errors.show();
  170.             throw "";
  171.             return false;  
  172.         }
  173.       }
  174.  
  175.       function validateCardExpired(){
  176.         var expiry_month = $('#expiry_month').val();
  177.         var expiry_year = $('#expiry_year').val();
  178.  
  179.         var today = new Date();
  180.         var expiry = new Date(expiry_year, expiry_month);
  181.  
  182.         var $errorList = $errors.find('ul');
  183.         $errors.find('h3').text("One or more parameters were missing or invalid");
  184.         $errorList.empty();
  185.         if (expiry.getTime() < today.getTime()){
  186.               $('<li>').text("The card you have used has expired. Please use another card and try again.").appendTo($errorList);
  187.               $submitButton.removeAttr('disabled');
  188.               $errors.show();
  189.               throw "";
  190.               return false;
  191.         }else{
  192.               return true;
  193.         }
  194.       }
  195. });

Loading