Vue+SpringBoot で 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 です */
.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 で使用されるデータ*/
      支払いオブジェクト: {
        //支払いデータ 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() {
      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 // ポップアップ滞在時間 });
          }
        });
    },

    @レスポンス本文
    @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;
}
</スタイル>