wordpress ベースのサイトに (datatrans.ch の) クレジットカード決済サービスを実装しようとしています。Datatrans は Ajax API を提供しており、こちらで確認できます。
サンプル コードをコピーして貼り付け、マシンの html ファイル内に保存しました。実行すると正常に動作します。次のステップでは、次の関数を作成して wordpress に実装しようとしました。
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"> </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> </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> </td>
<td align="left"><input type="text" size="20" name="currency" value="<?php echo $currency; ?>"/>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="left">Card Number :</td>
<td> </td>
<td align="left"><input type="text" size="24" name="cardNumber" value="4242424242424242"/>
</td>
</tr>
<tr>
<td align="left">Expiry :</td>
<td> </td>
<td align="left">
<input type="text" size="4" name="expm" value="12"/>
<input type="text" size="4" name="expy" value="15"/> (MM/YY)
</td>
</tr>
<tr>
<td align="left">CVV code :</td>
<td> </td>
<td align="left"><input type="text" size="4" name="cvv" value="123"/>
</td>
</tr>
<tr style="display: none;">
<td align="left">Process mode :</td>
<td> </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"> </td>
</tr>
<tr>
<td> </td>
<td> </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>
これを実行すると、エラー ステータス コード 1003 が表示され、uppTransactionId が未定義であり、これは responseCallback の結果であるはずです。つまり、wp-admin フォルダー内の admin-ajax.php ファイルを通過する必要がある wordpress での Ajax 呼び出しの通常の処理と関係があると思います!? この datatrans 実装を分割して、ワードプレスの Ajax 処理に適合させる方法がわかりません。さらに、エラーの原因について、私の推測が正しいと思われるかどうかを知りたいですか?
前もって感謝します。
乾杯、ティム