Vue+SpringBoot で Alipay サンドボックス決済を実装するためのサンプルコード

まず、Alipay サンドボックスから一連のものをダウンロードします。多くのブログで取り上げられており、Ant Financial でも詳細に取り上げられているため、具体的な設定については説明しません。Vue フロントエンドにバックエンドの支払いページを表示する方法についてのみ説明します。

AlipayConfig ファイルを設定したら、フロントエンドロジックを記述できます。フロントエンドは、次のように Alipay ページを使用します。

ここにいくつかのインラインコードスニペットを示します。

/* 以下は支払い確認のHTMLです */
      <div style="text=#000000 bgColor=#ffffff 左マージン=0 上マージン=4">
        <ヘッダークラス="am-header">
          <h1>お支払い確認</h1>
        </ヘッダー>
        <div id="メイン">
          <!-- <フォーム名="alipayment" :model="payObject" target="_blank"> -->
          <div id="body1" class="show" name="divcontent">
            <dl class="content">
              <dt>販売者注文番号:</dt>
              <dd>
                <入力
                  id="WIDout_trade_no"
                  名前="WIDout_trade_no"
                  読み取り専用="true"
                  :value="payObject.WIDout_trade_no"
                />
              </dd>
              <hr class="one_line" />
              <dt>注文名:</dt>
              <dd>
                <入力
                  id="WID件名"
                  名前="WIDsubject"
                  読み取り専用="true"
                  :value="payObject.WIDsubject"
                />
              </dd>
              <hr class="one_line" />
              <dt>お支払い金額:</dt>
              <dd>
                <入力
                  id="WID合計金額"
                  name="WID合計金額"
                  読み取り専用="true"
                  :value="payObject.WIDtotal_amount"
                />
              </dd>
              <hr class="one_line" />
              <dt>製品の説明:</dt>
              <dd>
                <input id="WIDbody" name="WIDbody" readonly="true" :value="payObject.WIDbody" />
              </dd>
              <hr class="one_line" />
              <dd id="btn-dd">
                <span class="new-btn-login-sp">
                  <button class="new-btn-login" style="text-align: center;" @click="paySub()">支払う</button>
                </span>
                <span class="note-help">「支払う」ボタンをクリックすると、操作の実行に同意したことになります。 </span>
              </dd>
            </dl>
          </div>
          <!-- </フォーム> -->
        </div>
      </div>

このページのCSSを追加します

/* 以下は支払い確認サンプル CSS です */
.am-ヘッダー{
  ディスプレイ: -webkit-box;
  ディスプレイ: -ms-flexbox;
  /* ディスプレイ: flex; */
  幅: 100%;
  位置: 相対的;
  パディング: 15px 0;
  -webkit-box-sizing: 境界線ボックス;
  -ms-box-sizing:境界線ボックス;
  ボックスのサイズ: 境界線ボックス;
  背景: #1d222d;
  高さ: 50px;
  テキスト配置: 中央;
  -webkit-box-pack: 中央;
  -ms-flex-pack: 中央;
  ボックスパック: 中央;
  -webkit-box-align: 中央;
  -ms-flex-align: 中央;
  ボックスの位置合わせ: 中央;
}

.am-ヘッダー h1 {
  -webkit-box-flex: 1;
  -msフレックス: 1;
  ボックスフレックス: 1;
  行の高さ: 18px;
  テキスト配置: 中央;
  フォントサイズ: 18px;
  フォントの太さ: 300;
  色: #fff;
}
＃主要 {
  幅: 100%;
  マージン: 0 自動;
  フォントサイズ: 14px;
}
。見せる {
  クリア：左;
  表示: ブロック;
}
。コンテンツ {
  上マージン: 5px;
}

.content dt {
  幅: 100ピクセル;
  表示: インラインブロック;
  フロート: 左;
  左マージン: 20px;
  色: #666;
  フォントサイズ: 13px;
  上マージン: 8px;
}

.コンテンツdd{
  左マージン: 120px;
  下部マージン: 5px;
}

.content dd入力{
  幅: 85%;
  高さ: 28px;
  境界線: 0;
  -webkit-border-radius: 0;
  -webkit-appearance: なし;
  入力アウトライン:なし;
}
.1行目 {
  表示: ブロック;
  高さ: 1px;
  境界線: 0;
  上境界線: 1px 実線 #eeeeee;
  幅: 100%;
  左マージン: 20px;
}
#ボタン-dd {
  マージン: 20px;
  テキスト配置: 中央;
}
.new-btn-ログイン-sp {
  パディング: 1px;
  表示: インラインブロック;
  幅: 75%;
}
.new-btn-ログイン{
  背景色: #02aaf1;
  色: #ffffff;
  フォントの太さ: 太字;
  境界線: なし;
  幅: 100%;
  高さ: 50px;
  境界線の半径: 5px;
  フォントサイズ: 16px;
}
.note-help {
  色: #999999;
  フォントサイズ: 12px;
  行の高さ: 100%;
  上マージン: 5px;
  幅: 100%;
  表示: ブロック;
}

もちろん、HTML ページ内のデータは次のように定義されます。

/*html で使用されるデータ*/
      支払いオブジェクト: {
        //支払いデータ WIDsubject: 0,
        WIDout_trade_no: "",
        WID合計金額: "",
        WID本体: ""
      },

もちろん、支払いページを開く場合は、これらのデータを割り当てる関数を使用する必要があります。これは次のコードです。詳細についてはコメントを参照してください。

//支払いページへ移動 function payOrder() {
    //this.payObject.WIDsubject 支払いインターフェースにジャンプするときに注文番号として設定しました //oid(注文番号)が数字かどうかを判断します if (typeof this.payObject.WIDsubject != "string") {
      //sessionStorage からユーザーのデータを取得します。const usertoken = sessionStorage.getItem("usertoken");
        定数 user = JSON.parse(sessionStorage.getItem("user"));
        // コンソール.log(ユーザー)
        //ユーザーが通常の場合（空ではない）
        ユーザートークンが null の場合
          （ユーザー！= null）の場合{
            uname = user.uname;
            //どの注文を支払う必要があるかを取得するためにここにいます dishApi.payConfirm(this.payObject.WIDsubject).then(response => {
              レスポンスデータ
              （応答コード === 200）の場合{
              //この sNow データを生成します var vNow = new Date();
                var sNow = "";
                sNow += String(vNow.getFullYear());
                sNow += String(vNow.getMonth() + 1);
                sNow += String(vNow.getDate());
                sNow += String(vNow.getHours());
                sNow += String(vNow.getMinutes());
                sNow += String(vNow.getSeconds());
                sNow += String(vNow.getMilliseconds());
                //ページのデータをバインドします this.payObject.WIDout_trade_no = sNow; //tradenoをバインドします
                this.payObject.WIDbody = uname; //これはバインドされたユーザー名です this.payObject.WIDsubject = resp.oid; //現在の注文番号の値を返します this.payObject.WIDtotal_amount = resp.totalValue; //合計支払い金額を返します } else {
                this.$メッセージ({
                  メッセージ: 応答メッセージ、
                  タイプ:「警告」、
                  期間: 500 // ポップアップ滞在時間 });
              }
            });
          } それ以外 {
            this.$メッセージ({
              メッセージ: 「まずログインしてください」
              タイプ:「警告」、
              期間: 1000 // ポップアップ滞在時間 });
          }
        } それ以外 {
          this.$メッセージ({
            メッセージ: 「まずログインしてください」
            タイプ:「警告」、
            期間: 1000 // ポップアップ滞在時間 });
        }
      } それ以外 {
        this.$メッセージ({
          メッセージ: 「支払いエラー」、
          タイプ:「警告」、
          期間: 1000 // ポップアップ滞在時間 });
      }
    },

次に、「今すぐ支払う」をクリックしたとき（「支払う」をクリックするとpaySub()関数が呼び出されます）に何をするかを説明します。

    //支払いが開始/ユーザーに促す paySub() {
      this.$メッセージ({
        表示閉じる: true,
        メッセージ: 「5分以内にお支払いを完了してください」
        期間: 5000 // ポップアップ滞在時間 });

      //支払いへ進む//ここで、支払いデータをバックエンドに渡します。これは先ほど定義され、dishApiにバインドされたデータです。
        。支払う（
          this.payObject.WIDout_trade_no、
          this.payObject.WIDtotal_amount、
          this.payObject.WIDsubject、
          this.payObject.WIDbody
        ）
        .then(応答 => {
        //バックグラウンド応答の後処理は次のとおりです。const r = response.data;
          （r.code === 200）の場合{
          // これはバックエンドから返された r です。formaction を取得しました。その中身については、後で説明します。
          // 取得したデータは、後で読み取るためにまず sessionStorage に保存されます。sessionStorage.setItem("payaction", r.formaction);
//次に、ページを支払いインターフェースにジャンプします。window.open("#pay", "_blank");
          } それ以外 {
            this.$メッセージ({
              メッセージ: 応答メッセージ、
              タイプ:「警告」、
              期間: 500 // ポップアップ滞在時間 });
          }
        });
    },

次に、Springbootバックエンドを変更します。上記のdishApi.pay()でアクセスされるバックエンドがどのようなものかを書きましょう。

    @レスポンス本文
    @PostMapping("/AliPay")
    //ここでフロントエンドからpayInfoデータを受け取ります
    パブリックオブジェクト goPay(@RequestBody JSONObject payInfo、HttpServletResponse レスポンス、HttpServletRequest リクエスト) は IOException、AlipayApiException をスローします {
 //まずここで JSONObject jsonObject = new JSONObject();
        試す {
        //フロントエンドから解析されたデータは次のとおりです String WIDout_trade_no = payInfo.get("WIDout_trade_no").toString();
            文字列 WIDtotal_amount = payInfo.get("WIDtotal_amount").toString();
            文字列 WIDsubject = payInfo.get("WIDsubject").toString();
            文字列 WIDbody = payInfo.get("WIDbody").toString();
// System.out.println(WIDout_trade_no);System.out.println(WIDtotal_amount);System.out.println(WIDsubject);System.out.println(WIDbody);
            //初期化されたAlipayClientを取得する
            AlipayClient alipayClient = 新しい DefaultAlipayClient(AlipayConfig.gatewayUrl、AlipayConfig.app_id、AlipayConfig.merchant_private_key、"json"、AlipayConfig.charset、AlipayConfig.alipay_public_key、AlipayConfig.sign_type);

            //リクエストパラメータを設定する AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
            AlipayRequest.setReturnUrl(AlipayConfig.return_url);
            AlipayRequest.setNotifyUrl(AlipayConfig.notify_url);

// 文字列 out_trade_no = new String(request.getParameter("WIDout_trade_no").getBytes("ISO-8859-1"),"UTF-8");
// // 支払い金額、必須 // String total_amount = new String(request.getParameter("WIDtotal_amount").getBytes("ISO-8859-1"),"UTF-8");
// // 注文名、必須// String subject = new String(request.getParameter("WIDsubject").getBytes("ISO-8859-1"),"UTF-8");
// //製品の説明、オプション // String body = new String(request.getParameter("WIDbody").getBytes("ISO-8859-1"),"UTF-8");

            文字列 out_trade_no = WIDout_trade_no;
            //支払い金額、必須 String total_amount = WIDtotal_amount;
            //注文名、必須文字列 subject = WIDsubject;
            //製品の説明（オプション）String body = WIDbody;

            // この注文に許可されている最遅の支払い時間。期限を過ぎると取引は終了します。値の範囲: 1m～15d。 m-分、h-時間、d-日、1c-当日（1c-当日の場合、取引がいつ開始されても、0時に終了します）。 このパラメータ値は小数点を受け入れません。たとえば、1.5h は 90m に変換できます。
            文字列timeout_express = "10m";

            //たとえば、公式 API にアクセスして、alipayRequest.setBizContent("{\"out_trade_no\":\"" + out_trade_no + "\"," を見つけます。
                    + "\"合計金額\":\"" + 合計金額 + "\","
                    + "\"件名\":\"" + 件名 + "\","
                    + "\"本文\":\"" + 本文 + "\","
                    + "\"timeout_express\":\"" + timeout_express + "\","
                    + "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");


// //リクエスト文字列 result = alipayClient.pageExecute(alipayRequest).getBody();
            //上記はすべて Alipay からのものですが、次は私のものです //次は一連の文字列操作です。簡単に言うと、Alipay によって返された結果ページのボタン属性が非表示に設定され、いくつかの便利な属性が追加されます。次に、<script> タグが取り出されます (フロントエンドは v-html を使用しており、<script> を表示できないため)。最後に、変更された結果全体がフロントエンドに送信され、上記のフロントエンドは受信したコンテンツを sessionStorage に書き込みます。String befAction = result;
            StringBuffer aftAction = 新しい StringBuffer(befAction);
            aftAction を反転します。
            文字列midAction = aftAction.substring(68);
            aftAction = 新しい StringBuffer(midAction).reverse();
            aftAction=aftAction.append(" 幅: 200px; パディング:8px; 背景色: #428bca; 境界線の色: #357ebd; 色: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; 境界線の半径: 10px; -khtml-border-radius: 10px; テキスト配置: center; 垂直方向の配置: middle; 境界線: 1px 透明で実線; フォントの太さ: 900; フォントサイズ:125% \"> </form>");
            jsonObject.put("formaction"、aftAction);
            jsonObject.put("メッセージ", StateCode.SUCCESS.getMessage());
            jsonObject.put("コード", StateCode.SUCCESS.getCode());
            jsonObject を返します。
        }catch (例外 e)
        {
            jsonObject.put("メッセージ", StateCode.SERVER_FAILED.getMessage());
            jsonObject.put("コード", StateCode.SERVER_FAILED.getCode());
            jsonObject を返します。
        }
    }

次はフロントエンドの操作です。フロントエンドがページをリダイレクトしたばかりなので、次に記述するのはフロントエンドがジャンプした後のページです。

//これはジャンプ先のページのコード全体です <template>
<div class="top">
<h1 class="top">レジ係</h1>
 <div v-html="支払いアクション">
</div>
</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      支払いアクション: ""
    };
  },
  作成された() {
    this.showPayPage();
  },
  メソッド: {
    表示ペイページ() {
       
      this.$nextTick(関数() {
      //sessionStorage に書き込まれたページを現在のページに直接表示します。this.payaction = sessionStorage.getItem("payaction");
        //次に、sessionStorage 内のデータを削除します。sessionStorage.removeItem("payaction");
      });
    },
  }
};
</スクリプト>
<スタイルスコープ>
。トップ{
上マージン: 50px;
テキスト配置: 中央;
垂直位置合わせ: 中央;
下部マージン: 100px;
}
</スタイル>

この時点で、すべてのコードが完成しています。このページで直接支払いボタンをクリックすると、Alipay サンドボックス支払いインターフェースにリダイレクトされます。

Vue+SpringBoot で Alipay サンドボックス決済を実装するためのサンプルコードに関するこの記事はこれで終わりです。Vue+SpringBoot Alipay サンドボックス決済に関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: