CODEWITHSUNDEEP
phpajaxforms
WeisbergWeb
WeisbergWeb

Reputation: 83

PHP/Ajax collect and pass form data

I need to collect an input ('x_amount') with a php form, then post it to a page that generates a hash and then posts it to a third party site. I don't want the customer to have a two step process, so can this be done with ajax and php? Here's what I have so far, but it needs to be ajaxified (i think?)

          <form action="https://globalgatewaye4.firstdata.com/pay" method="POST">

        <?php
              $x_login = "xxx-xxx";  //  Take from Payment Page ID in Payment Pages interface
              $transaction_key = "xxxxxxx"; // Take from Payment Pages configuration interface
              $x_currency_code = "CAD"; // Needs to agree with the currency of the payment page
              srand(time()); // initialize random generator for x_fp_sequence
              $x_fp_sequence = rand(1000, 100000) + 123456;
              $x_fp_timestamp = time(); // needs to be in UTC. Make sure webserver produces UTC

              // The values that contribute to x_fp_hash 
              $hmac_data = $x_login . "^" . $x_fp_sequence . "^" . $x_fp_timestamp . "^" . $x_amount . "^" . $x_currency_code;
              $x_fp_hash = hash_hmac('MD5', $hmac_data, $transaction_key);

              echo ('<label>x_login</label><input name="x_login"  type="hidden" value="' . $x_login . '">' );
              echo ('<label>x_amount</label><input name="x_amount"  type="hidden" value="' . $x_amount . '">' );
              echo ('<label>x_fp_sequence</label><input name="x_fp_sequence"  type="hidden" value="' . $x_fp_sequence . '">' );
              echo ('<label>x_fp_timestamp</label><input name="x_fp_timestamp"  type="hidden" value="' . $x_fp_timestamp . '">' );
              echo ('<label>x_fp_hash</label><input name="x_fp_hash"  type="hidden" value="' . $x_fp_hash . '" size="50">' );
              echo ('<label>x_currency_code</label><input name="x_currency_code"  type="hidden" value="' . $x_currency_code . '">');
        ?>

              <input type="hidden" name="x_show_form" value="PAYMENT_FORM"/>
              <input type="hidden" name="x_test_request" value="FALSE"/>
              Enter Payment Amount:<br>
              <input type="text" name="x_amount"/>
              <input type="submit" value="Pay with Payment Pages"/>
            </form>

In other words, can I collect the x amount, generate the hash and then post it to the third party with just one click of the submit button? How can I accomplish this?

Upvotes: 0

Views: 1066

Answers (2)

Mihai Iorga
Mihai Iorga

Reputation: 39724

Ok, so I saw that firstdata.com actually suggests you to do that. I've managed to make something for you.

You have to use ajax, post to same page the amount the client entered, process it and return to form. Sumbit form only when data is processed.

I made you entire script because it was getting frustrating at some point figuring out how to do it.

test.php

<?php
    if(isset($_POST['amount']) && ($_POST['amount'] != '')){
        $x_amount = $_POST['amount'];
        $x_login = "xxx-xxx";  //  Take from Payment Page ID in Payment Pages interface
        $transaction_key = "xxxxxxx"; // Take from Payment Pages configuration interface
        $x_currency_code = "CAD"; // Needs to agree with the currency of the payment page
        srand(time()); // initialize random generator for x_fp_sequence
        $x_fp_sequence = rand(1000, 100000) + 123456;
        $x_fp_timestamp = time(); // needs to be in UTC. Make sure webserver produces UTC

        // The values that contribute to x_fp_hash 
        $hmac_data = $x_login . "^" . $x_fp_sequence . "^" . $x_fp_timestamp . "^" . $x_amount . "^" . $x_currency_code;
        $x_fp_hash = hash_hmac('MD5', $hmac_data, $transaction_key);

        $values = array('login' => $x_login, 'amount' => $x_amount, 'sequence' => $x_fp_sequence, 'timestamp' => $x_fp_timestamp, 'hash' => $x_fp_hash, 'currency' => $x_currency_code);
        echo json_encode($values);
        die;    
    }

?><html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
    var processed = false;
    function makeProcessed(type){
        processed = type;
    }

    function prepareForm(){
        $('#submitPayment').val('Please wait ...');

        var processPayment = $.ajax({
            type: 'POST',       
            url: "test.php",
            data: {"amount": $('#x_my_amount').val()},
            dataType: 'json',
            async: false,
            success: function(data) {
                $('#x_login').val(data.login); 
                $('#x_amount').val(data.amount); 
                $('#x_fp_sequence').val(data.sequence); 
                $('#x_fp_timestamp').val(data.timestamp); 
                $('#x_fp_hash').val(data.hash); 
                $('#x_currency_code').val(data.currency);
                if(data.hash){
                    makeProcessed(true);
                }
            }
        });
        return processed;
    };
</script>

</head>
<body>
<form action="https://globalgatewaye4.firstdata.com/pay" method="POST" id="payment" onsubmit="return prepareForm();">
      <input type="hidden" name="x_show_form" value="PAYMENT_FORM"/>
      <input type="hidden" name="x_test_request" value="FALSE"/>

      <input name="x_login" id="x_login"  type="hidden" value="">
      <input name="x_amount" id="x_amount"  type="hidden" value="">
      <input name="x_fp_sequence" id="x_fp_sequence"  type="hidden" value="">
      <input name="x_fp_timestamp" id="x_fp_timestamp"  type="hidden" value="">
      <input name="x_fp_hash" id="x_fp_hash"  type="hidden" value="" size="50">
      <input name="x_currency_code" id="x_currency_code"  type="hidden" value="">

      Enter Payment Amount:<br>
      <input type="text" name="x_my_amount" id="x_my_amount" />
      <input type="submit" id="submitPayment" value="Pay with Payment Pages" />
    </form>

</body>
</html>

Upvotes: 2

u_mulder
u_mulder

Reputation: 54831

I think you can do this by creating ajax-request on blur event with "x_amount" field. if generating hash requires php then it will look like this:

form:

Enter Payment Amount:<br>
<input type="text" name="real_amount" id="real-amount"/>
<input type="hidden" name="x_amount" id="x-amount" />

javascript:

$('#real-amount').on('blur', function() {
    $.ajax({
        ....
        success: function(data) {
            // returned hash should be put in x_amount field here
            $('#x-amount').val(data); 
        }
    });
});

Upvotes: 0

Related Questions