決済用プラグインの制作～（４）SBペイメントサービスから受け取った結果の処理

2019年11月12日2020年1月9日

class.wpmop-payment.phpファイルで決済処理された結果は、ajaxを通じてjson形式でform-ajax.jsに送り返されてきます。

その内容をJSON.parse()で配列に変換し、resultキーの内容で分岐処理します。

今回は、trueかそうでないかの2択というシンプルな形式にします。

ファイル構造

form-ajax.jsファイル

前回のconsole.logの出力から、送られてきた結果をJSON.parseで配列にして、successキーの値で判定すればいいことがわかっているので、

jQuery(function($){
    $('#ProductForm').submit(function(event){
        //フォームのデフォルトの送信処理を止める
        event.preventDefault();

　　　　/*
       $('#ProductForm')の中に、以下の項目を追加します。
       1. ExtraInfo.NONCEHTML：PHP側で作成しJavaScriptの変数として出力したnonce用のHTML
　　　　2. ExtraInfo.ACTIONNAME：PHP側で作成しJavaScriptの変数として出力したAjaxで利用するアクション名
　　　　*/
       var $ProductForm = $('#ProductForm').append(ExtraInfo.NONCEHTML + '<input type="hidden" name="action" value="' + ExtraInfo.ACTIONNAME + '" >');

        /*
        ajax送信で決まりきった書き方です。
　　　　・送信先（url）として、PHP側で作成しJavaScriptの変数として出力したExtraInfo.AJAXURLを指定しておきます。
　　　　・本来ならば値のバリデーションを行うべきだけれども、ここはとりあえずそのままserialize()関数を使用して送信。
        */
        $.ajax({
            url: ExtraInfo.AJAXURL, 
            type: 'POST', 
            data: $ProductForm.serialize() 
        }).done( function( data ){ 
            //ajax送信後、出力されたものをChromeのconsoleに出力させる. 
            //console.log(data); 
//↓↓↓↓↓新規追加ここから
            var result = JSON.parse( result );
            if( true === result['success'] ){
                $('#ProductForm').html('<p>購入完了いたしました。登録していただいたアドレス宛に購入の詳細についてを送信させていただきましたのでご確認ください。</p>');
            }else{
                $('#ProductForm').html('<p>購入処理が上手く行きませんでした。お問い合わせフォームよりご登録いただきましたメールアドレスと共にご連絡お願いします。</p>');
            }
//↑↑↑↑↑新規追加ここまで

        }).fail(function( XMLHttpRequest, textStatus, error ){
//↓↓↓↓↓新規追加ここから
            $('#ProductForm').html('<p>システムエラーです。決済処理はされておりません。</p>');
//↑↑↑↑↑新規追加ここまで
        }); 
    }); 
});