自動化綠界測試付款流程

先說結論

如果你在開發綠界（ECPay）的測試付款功能時，對於一直「重複輸入測試的信用卡號」與「點擊交易流程」已經擁有手指肌肉記憶，想要更懶一點的話，那麼推薦你用我的 Tampermonkey 自動化腳本幫你：

1. 自動輸入「測試信用卡號」
2. 自動點擊綠界交易流程按鈕，自動完成完成付款

完整模擬整個付款流程，免去前端信用卡驗證的麻煩，自動完成所有測試。請看示範影片，沒有加速，我點了“立即付款”後，就會進入綠界模擬付款頁面，然後Tampermonkey會自動開始工作

Tampermonkey 是什麼？

Tampermonkey 是Chrome的擴充程式，支援 Chrome、Firefox 等主流瀏覽器，能讓你在載入特定網頁時注入自訂的 JavaScript 腳本，自動執行重複性操作。使用者只要把腳本貼入 Tampermonkey，開啟頁面就會自動跑。

開發過程簡述

• 一開始讓程式輸入卡號，綠界有驗證

  我第一個念頭是：「直接把卡號丟進去就好」，我讓腳本直接把信用卡號碼貼進信用卡欄位，然後送出。結果失敗，後來我又試著一個字一個字用腳本「假裝」敲鍵盤，觸發輸入事件，還是失敗，綠界應該有做某種檢查，但我懶得去研究了。

• 欸，有個按鈕沒按過

  在測試頁面上，我發現一個「測試付款請點此」的按鈕。之前都沒按過，綠界的文件也沒說明，好奇點進去才知道：這個按鈕會到另一個簡化版的信用卡輸入頁面，這個頁面看起來比較陽春，用上一步的方法測試，成功啦！（轉圈+撒花)

• 讓GPT幫我完成腳本

  剩下就叫AI幫我寫腳本了，流程大概就是：

  1.腳本一來就先去按「測試付款請點此」

  2.新頁面一載入，就自動輸入信用卡號等資訊，然後按「交易成功」

  3. 最後補上「OTP 驗證」

Tampermonkey 腳本範本

以下是我的 Tampermonkey 腳本模板，貼入 Tampermonkey 後即可生效，自行取用，不需要再自己摸索細節。

1. 自動打開測試付款連結

   // ==UserScript==
   // @name         自動打開測試付款連結
   // @namespace    http://tampermonkey.net/
   // @version      1.0
   // @description  進入頁面後自動導向 "測試付款請點此" 的連結網址
   // @match        https://payment-stage.ecpay.com.tw/Cashier/AioCheckOut/V5*
   // @grant        none
   // ==/UserScript==
   (function () {
       'use strict';
       window.addEventListener("load", function () {
           // 延遲 500 毫秒確保 DOM 完全載入
           setTimeout(function () {
               const link = document.getElementById("aCredit");
               if (link && link.href) {
                   console.log("自動導向連結：" + link.href);
                   window.location.href = link.href;
               } else {
                   console.error("找不到 id 為 aCredit 的連結或連結無 href");
               }
           }, 200);
       });
   })();

2. 模擬付款自動填表並提交

   // ==UserScript==
   // @name         模擬付款自動填表並提交
   // @namespace    http://tampermonkey.net/
   // @version      1.0
   // @description  自動填寫模擬付款頁面的欄位，然後點擊提交「交易成功」按鈕
   // @match        https://payment-stage.ecpay.com.tw/MockScanCodePay/MockScanCodePayPaid*
   // @grant        none
   // ==/UserScript==
   (function () {
       'use strict';
       // 設定要填入的資料
       const paymentData = {
           CardNo: "4311952222222222",         // 信用卡號（預設值）
           AuthExpireDateYY: "30",            // 信用卡有效年 (YY)
           AuthExpireDateMM: "12",            // 信用卡有效月 (MM)
           AuthCode: "222",                   // 信用卡安全碼
           CellPhone: "0911222333",           // 手機號碼
       };
       // 設定欄位值並觸發 input 與 change 事件
       function setField(id, value) {
           const field = document.getElementById(id);
           if (field) {
               field.value = value;
               field.dispatchEvent(new Event("input", { bubbles: true }));
               field.dispatchEvent(new Event("change", { bubbles: true }));
               console.log(`設定 ${id} 為 ${value}`);
           } else {
               console.error(`找不到欄位: ${id}`);
           }
       }
       // 模擬點擊提交（交易成功）按鈕
       function clickSubmit() {
           const submitBtn = document.querySelector('input[type="submit"][value="交易成功"]');
           if (submitBtn) {
               console.log("點擊提交按鈕");
               submitBtn.click();
           } else {
               console.error("找不到提交按鈕");
           }
       }
       window.addEventListener("load", function () {
           // 延遲 1 秒以確保頁面所有元素載入完成
           setTimeout(() => {
               setField("CardNo", paymentData.CardNo);
               setField("AuthExpireDateYY", paymentData.AuthExpireDateYY);
               setField("AuthExpireDateMM", paymentData.AuthExpireDateMM);
               setField("AuthCode", paymentData.AuthCode);
               setField("CardHolderInfo_CellPhone", paymentData.CellPhone);
               // 延遲 0.5 秒後自動點擊提交按鈕
               setTimeout(clickSubmit, 100);
           }, 200);
       });
   })();

3. 自動取得 OTP 並送出

   // ==UserScript==
   // @name         自動取得 OTP 並送出
   // @namespace    http://tampermonkey.net/
   // @version      1.0
   // @description  進入頁面後自動點擊取得 OTP、填入 1234 並點擊送出
   // @match        https://cc-stage.ecpay.com.tw/Payment/SendAuth?*
   // @grant        none
   // ==/UserScript==
   (function() {
       'use strict';
       window.addEventListener("load", function() {
           console.log("開始");
           // 延遲 1 秒等待頁面載入穩定
           setTimeout(function() {
               const btnGetOTP = document.getElementById("GetOTPPwd");
               if (btnGetOTP) {
                   btnGetOTP.click();
                   console.log("點擊取得 OTP 服務密碼按鈕");
               } else {
                   console.error("找不到取得 OTP 服務密碼按鈕");
               }
               // 延遲 1 秒後填入 OTP 值
               setTimeout(function() {
                   const otpInput = document.getElementById("OTP");
                   if (otpInput) {
                       otpInput.value = "1234";
                       otpInput.dispatchEvent(new Event("input", { bubbles: true }));
                       otpInput.dispatchEvent(new Event("change", { bubbles: true }));
                       console.log("OTP 輸入欄位填入 1234");
                   } else {
                       console.error("找不到 OTP 輸入欄位");
                   }
                   // 再延遲 0.5 秒後點擊送出按鈕
                   setTimeout(function() {
                       const btnSend = document.getElementById("OTPSend");
                       if (btnSend) {
                           btnSend.click();
                           console.log("點擊送出按鈕");
                       } else {
                           console.error("找不到送出按鈕");
                       }
                   }, 100);
               }, 100);
           }, 100);
       });
   })();