Wordpress Datatrans Ajax Implementierung

Question

Ich versuche, einen Kreditkarten-Zahlungsdienst (von datatrans.ch) in eine Wordpress basierte Seite zu implementieren. Datatrans bietet eine Ajax API an, die man sich hier anschauen kann:

Datatrans Ajax API

Beispiel Code

Ich habe den Beispielcode kopiert und in einer HTML-Datei auf meinem Rechner gespeichert. Die Ausführung funktioniert einwandfrei. Im nächsten Schritt habe ich versucht, es in Wordpress zu implementieren, indem ich die folgende Funktion erstellt habe:

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>

Wenn ich es ausführe, erhalte ich einen Fehlerstatuscode 1003, der besagt, dass die uppTransactionId undefiniert ist, was sich aus dem responseCallback ergeben sollte. Ich vermute also, dass es etwas mit der üblichen Verarbeitung von Ajax-Aufrufen in WordPress zu tun hat, die über die Datei admin-ajax.php im wp-admin-Ordner laufen müssen!? Ich bin mir nicht sicher, wie ich diese datatrans-Implementierung in Stücke schneiden kann, damit sie in die Wordpress-Ajax-Verarbeitung passt. Außerdem würde ich gerne wissen, ob Sie denken, dass meine Vermutung richtig ist, was den Fehler verursacht?

Vielen Dank im Voraus.

Zum Wohl, Tim