自動化綠界測試付款流程
· 約 10 分鐘 軟體開發

自動化綠界測試付款流程

文章目錄（4 節）

先說結論

  • 如果你在開發綠界（ECPay）的測試付款功能時，對於一直「重複輸入測試的信用卡號」與「點擊交易流程」已經擁有手指肌肉記憶，想要更懶一點的話，那麼推薦你用我的 Tampermonkey 自動化腳本幫你：
  • 自動輸入「測試信用卡號」
  • 自動點擊綠界交易流程按鈕，自動完成完成付款
  • 完整模擬整個付款流程，免去前端信用卡驗證的麻煩，自動完成所有測試。

請看示範影片，沒有加速，我點了“立即付款”後，就會進入綠界模擬付款頁面，然後Tampermonkey會自動開始工作。

Tampermonkey 是什麼？

Tampermonkey 是Chrome的擴充程式，支援 Chrome、Firefox 等主流瀏覽器，能讓你在載入特定網頁時注入自訂的 JavaScript 腳本，自動執行重複性操作。

裝好之後就不用再管它

使用者只要把腳本貼入 Tampermonkey，開啟頁面就會自動跑。

開發過程簡述

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

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

  2. 欸，有個按鈕沒按過

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

  3. 讓GPT幫我完成腳本

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

    1. 腳本一來就先去按「測試付款請點此」
    2. 新頁面一載入，就自動輸入信用卡號等資訊，然後按「交易成功」
    3. 最後補上「OTP 驗證」

Tampermonkey 腳本範本

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

三支 Tampermonkey 腳本接力跑完綠界測試付款 按下立即付款後進入綠界結帳頁，第一支腳本自動導向「測試付款請點此」；到了模擬付款頁，第二支腳本填入卡號、有效年月、安全碼與手機後按交易成功；再到 OTP 驗證頁，第三支腳本點取得 OTP、填 1234 並送出，最後付款完成，全程不用手動輸入。 綠界的頁面流程 Tampermonkey 腳本 @match 命中 你點「立即付款」 綠界結帳頁 AioCheckOut/V5 模擬付款頁 MockScanCodePayPaid OTP 驗證頁 Payment/SendAuth 付款完成 免去手動輸入與點擊 腳本① 自動打開測試付款連結 抓 aCredit 連結，自動導向 腳本② 模擬付款自動填表並提交 填卡號、有效年月、安全碼、手機 再按「交易成功」 腳本③ 自動取得 OTP 並送出 點取得 OTP、填 1234、送出

左右滑動看完整內容

三支腳本各綁一個綠界頁面，靠 @match 自動接力，從按下立即付款到付款完成中間不用手動介入
腳本① 自動打開測試付款連結 貼在結帳頁跑，替你按下「測試付款請點此」 
// ==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);
    });
})();
腳本② 模擬付款自動填表並提交 在模擬付款頁填好卡號、有效年月、安全碼、手機，再按「交易成功」 
// ==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);
    });
})();
腳本③ 自動取得 OTP 並送出 最後一關：點取得 OTP、填 1234、送出 
// ==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);
    });
})();

留言