WordPress Datatrans Ajax implementation

I’m trying to implement a creditcard payment service (of datatrans.ch) into a wordpress based site. Datatrans offers an Ajax API, which you can take a look at here:

Datatrans Ajax API

Example Code

I copy/pasted the example code and saved it inside a html file on my machine. Running it works properly. In the next step I tried implementing it in wordpress by creating the following function:

function datatrans_payment_ajax($lang, $currency, $amount) {

$merchant_id = 101...; // ... on my machine it is numeric of course ;)

wp_deregister_script('datatrans-ajax');
wp_register_script('datatrans-ajax', 'https://pilot.datatrans.biz/upp/ajax/api.js?merchantId='.$merchant_id, false);
wp_enqueue_script('datatrans-ajax');

?>

<noscript>
    <p class="err">
    JavaScript is disabled in your browser.<br/>
    This showcase requires JavaScript.
    </p>
</noscript>

<div>

    <h3>Step 1: Ajax UPP.paymentRequest(...)</h3>

    <form id="uppform">
        <fieldset>

        <input type="hidden" name="language" value="<?php echo $lang; ?>"/>
        <table cellspacing="0" cellpadding="3" width="550">
            <tr>
                <td align="left">Merchant Id :</td>
                <td style="width: 10px">&nbsp;</td>
                <td align="left"><input type="text" size="20" name="merchantId" value="<?php echo $merchant_id; ?>"/>
                </td>
            </tr>

            <tr>
                <td align="left">Amount :</td>
                <td>&nbsp;</td>
                <td align="left"><input type="text" size="20" name="amount" value="<?php echo $amount; ?>"/> (= 10.00) 
                </td>
            </tr>

            <tr>
                <td align="left">Currency :</td>
                <td>&nbsp;</td>
                <td align="left"><input type="text" size="20" name="currency" value="<?php echo $currency; ?>"/>
                </td>
            </tr>

            <tr>
                <td colspan="3">&nbsp;</td>
            </tr>

            <tr>
                <td align="left">Card Number :</td>
                <td>&nbsp;</td>
                <td align="left"><input type="text" size="24" name="cardNumber" value="4242424242424242"/>
                </td>
            </tr>

            <tr>
                <td align="left">Expiry :</td>
                <td>&nbsp;</td>
                <td align="left">
                    <input type="text" size="4" name="expm" value="12"/>&nbsp; 
                    <input type="text" size="4" name="expy" value="15"/>&nbsp; (MM/YY) 
                </td>
            </tr>

            <tr>
                <td align="left">CVV code :</td>
                <td>&nbsp;</td>
                <td align="left"><input type="text" size="4" name="cvv" value="123"/>&nbsp; 
                </td>
            </tr>

            <tr style="display: none;">
                <td align="left">Process mode :</td>
                <td>&nbsp;</td>
                <td align="left">
                    <input type="radio" name="mode" id="auto" value="auto" checked="checked"/> <label for="auto">Automatic 3D ACS call using API</label>
                    <br/>
                    <input type="radio" name="mode" id="manual" value="manual"/> <label for="manual">Manual redirection to 3D ACS</label>
                </td>
            </tr>


            <tr>
                <td colspan="3">&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td align="left"><input type="button" class="button"
                    onclick="callPayment()" value="send"/><span class="buttend"></span>
                </td>
            </tr>

        </table>

        </fieldset>            
    </form>

    <div id="frameHolder"></div>
    <div id="response" style="width: 400px;"></div>
    <div id="step2" style="display: none;">
        <h3>Step 2: XML authorizeSplit (server-2-server request)</h3>
        <form action="https://pilot.datatrans.biz/upp/jsp/XML_authorizeSplitEx.jsp" method="post" target="_parent">
            <fieldset>
                <textarea style="width: 400px; height: 150px;" name="xmlRequest"></textarea>
                <div>
                <input type="submit" class="button" value="send"/><span class="buttend"></span>
                </div>
            </fieldset>
        </form>
    </div>

    <script type="text/javascript">

    var mode;
    var params;
    function callPayment()
    {
        mode = $("input[name=mode]:checked").val();

        // read form values
        params = {
                merchantId: $("input[name=merchantId]").val(),
                cardNumber: $("input[name=cardNumber]").val(),
                expy: $("input[name=expy]").val(),
                expm: $("input[name=expm]").val(),
                cvv: $("input[name=cvv]").val(),
                currency: $("input[name=currency]").val(),
                amount: $("input[name=amount]").val()
        }

        // call paymentRequest, response will be received in responseCallback
        if ( mode == "auto" )
        {
            params.returnUrl = "https://pilot.datatrans.biz/upp/ajax/sample-merchant-return-page.html";
            UPP.paymentRequest( params,     responseCallback, frameCallback );
        }
        else
        if ( mode == "manual" )
        {
            UPP.paymentRequest( params,     responseCallback );
        }
    };

    function frameCallback()
    {
        // create iframe and add it to document
        var iframe = $("<iframe/>").attr( "id", "paymentIFrame" ).width( 390 ).height( 400 );    
        $("#frameHolder").append( iframe );

        $("form#uppform").hide(); //hide the form

        return iframe[0];
    };

    function responseCallback( response ) 
    {     
        var responseElm = $("#response");

        responseElm
            .empty()
            .append( "<h4>Ajax response:</h4>")
            .append( $("<div/>").text("status: " + response.status) )
            .append( $("<div/>").text("uppTransactionId: " + response.uppTransactionId) );

        if ( JSON.stringify )
            responseElm
                .append( $("<div/>").html( "Complete JSON response: " + JSON.stringify( response ).replace( /,/g, ", ") ) )


        if ( mode == "auto" )
        {
            if ( response.status == "success" )
            {
                // This step will be done server-2-server
                $("#step2 textarea").val(
                        "<<?php?>?xml version="1.0" encoding="UTF-8" ?>n" + 
                        "<authorizationSplit version="1">n" + 
                        "<body merchantId="" + $("input[name=merchantId]").val() + "">n" +  
                        "<transaction refno="to_be_filled">n" + 
                        "  <request>n" + 
                        "    <uppTransactionId>" + response.uppTransactionId + "</uppTransactionId>n" +  
                        "    <amount>" + $("input[name=amount]").val() + "</amount>n" + 
                        "    <currency>" + $("input[name=currency]").val() + "</currency>n" + 
                        "   </request>n" + 
                        "  </transaction>n" + 
                        "</body>n" + 
                        "</authorizationSplit>"
                    );
                $("#step2").show();
                $("#uppform").hide();
            }

            if ( response.is3DEnrolled ) // close/remove the iframe
            {
                $("#paymentIFrame").remove();
            }
        }
        else
        if ( mode == "manual" ) // manual mode used, browser has to be redirected to ACSURL
        {        
            if ( response.is3DEnrolled && response.status == "success" )
            {
                responseElm.append( $("<div/>").html( "Redirecting page to ACS in 3 seconds..." ) );

                setTimeout( function() {
                    params.uppTransactionId = response.uppTransactionId;
                    params.errorUrl = "https://pilot.datatrans.biz/upp/merchant/errorPage.jsp";
                    params.returnUrl = "https://pilot.datatrans.biz/upp/merchant/successPage.jsp";
                    window.parent.location = response.ACSURL + "?" + $.param( params );
                }, 3000 );
            }
        }
    };
    </script>

</div>

When I run it, I receive an error status code 1003, saying that the uppTransactionId is undefined which should result from the responseCallback. So I guess it has something to do with the usual processing of Ajax calls in wordpress which must go through the admin-ajax.php file in the wp-admin folder!? I am not sure how to cut this datatrans implementation into pieces to make it fit the wordpress Ajax processing. Furthermore I would like to know if you think that my guess is even right regarding what causes the error?

Thanks in advance.

Cheers,
Tim