問了他們的工程師，回覆是不接受同個介面不同版本的 JS，但我在所有要引入 JS 的地方都是同個版本，實在是找不出來。

不過總之是知道是 JS 出事，所以今天稍早又試了使用 enqueue 載入自己的 JS，只把 JS 獨立出來，但又遇到可以使用 TPDirect.setupSDK()，但竟然無法使用 TPDirect.card.setup()，明明只是差在一個是在頭一個是在尾，總之也是錯的方向。

原來是 JS 載入順序

因為我也不是學資工資科的，所以其實對 JS 了解不是非常清楚，直到今天看到 https://ithelp.ithome.com.tw/articles/10194569 這篇說到 JS 是非同步的我才想起來...
所以就照著大大的做法，讓後面的 API 可以在 JS & TPDirect.setupSDK() 完成後才執行。
TADA! 這就被我摸中了！

// Just past it in function.php and should works well!
function custom_enqueue_scripts() {
    // 加入CSS
    wp_enqueue_style('semantic-ui-css', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css');
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

/*TapPay*/
function TapPay_DP_after_payment() {
    ?>
    <!-- Your provided HTML, CSS and JS goes here -->
    <div class="ui grid centered doubling stackable">
        <div class="six wide column">
            <div class="ui segment">
                <h1 class="ui header">Direct Pay - iframe</h1>

                <form class="ui form">
                    <div class="field">
                        <label>信用卡</label>
                        <div id="tappay-iframe"></div>
                    </div> 
                </form>
                
                <br>
                <div class="ui button" id="submit">Get Prime</div>
                <br>
                <pre class="ui error message" id="message" style="overflow-x: auto">
                </pre>
                <pre class="ui info message" id="result" style="overflow-x: auto">
                </pre>
                <pre class="ui info message" id="curl" style="overflow-x: auto">
                </pre>
            </div>
        </div>
    </div>
    <!-- Moved scripts in headers here, still before main Javascripts -->
    <script src="https://js.tappaysdk.com/sdk/tpdirect/v5.17.0"></script>
    <script>
        TPDirect.setupSDK(11327, '<?php echo TAPPAY_API_KEY; ?>', 'sandbox')
    </script>
    <!-- Main JS -->
	<script>
	//alert("成功進入 JS")
	var result = [];
	// 載入 TapPay SDK
	var tappayScript = document.createElement('script');
	tappayScript.src = 'https://js.tappaysdk.com/sdk/tpdirect/v5.17.0';
	document.head.appendChild(tappayScript);

	// 確保在 tappayScript 完成後進入
	tappayScript.onload = function() {
		// 初始化 TapPay SDK
		TPDirect.setupSDK(11327, '<?php echo TAPPAY_API_KEY; ?>', 'sandbox');
	}
	result.push('jquery, tappaysdk, and API TPDirect.setupSDK finished')
	//alert(result)
	if( result.length === 1 ){
		var statusTable = {
			'0': '欄位已填好，並且沒有問題',
			'1': '欄位還沒有填寫',
			'2': '欄位有錯誤，此時在 CardView 裡面會用顯示 errorColor',
			'3': '使用者正在輸入中',
		}
		var defaultCardViewStyle = {
			color: 'rgb(0,0,0)',
			fontSize: '15px',
			lineHeight: '24px',
			fontWeight: '300',
			errorColor: 'red',
			placeholderColor: ''
		}
		var config = { 
			isUsedCcv: false,
			// 此設定會顯示卡號輸入正確後，會顯示前六後四碼信用卡卡號
			isMaskCreditCardNumber: true,
			maskCreditCardNumberRange: {
				beginIndex: 6, 
				endIndex: 11
			}
		}
		TPDirect.card.setup('#tappay-iframe', defaultCardViewStyle, config)
		alert('TPDirect.card.setup')
		TPDirect.card.onUpdate(function (update) {

			var submitButton = document.querySelector('#submit')
			var cardViewContainer = document.querySelector('#tappay-iframe')

			if (update.canGetPrime) {
				submitButton.removeAttribute('disabled')
			} else {
				submitButton.setAttribute('disabled', true)
			}

			var message = document.querySelector('#message')

			message.innerHTML = `
			canGetPrime: ${update.canGetPrime} \n
			cardNumberStatus: ${statusTable[update.status.number]} \n
			cardExpiryStatus: ${statusTable[update.status.expiry]} \n
			ccvStatus: ${statusTable[update.status.ccv]}
		`.replace(/    /g, '')

			if (update.hasError) {
				message.classList.add('error')
				message.classList.remove('info')
			} else {
				message.classList.remove('error')
				message.classList.add('info')
			}
		})
		document.querySelector('#submit').addEventListener('click', function(event) {
			TPDirect.card.getPrime(function(result) {
				document.querySelector('#result').innerHTML  = JSON.stringify(result, null, 4)
				// 取得帳單的名字、電話號碼、電子郵件、zip、address、city、state、總金額
				var billing_first_name = jQuery('#billing_first_name').val();
				alert(billing_first_name)
				var billing_phone = jQuery('#billing_phone').val();
				alert(billing_phone)
				var billing_email = jQuery('#billing_email').val();
				alert(billing_email)
				var billing_postcode = jQuery('#billing_postcode').val();
				alert(billing_postcode)
				var billing_address_1 = jQuery('#billing_address_1').val();
				alert(billing_address_1)
				var billing_city = jQuery('#billing_city').val();
				alert(billing_city)
				var billing_state = jQuery('#billing_state').val();
				alert(billing_state)
				var checkoutTotal = '<?php echo WC()->cart->total; ?>';
				alert(checkoutTotal)
				
				var command = `
				Use following command to send to server \n\n
				curl -X POST https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime \\
				-H 'content-type: application/json' \\
				-H 'x-api-key: partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM' \\
				-d '{
				"partner_key": "partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM",
				"prime": "${result.card.prime}",
				"amount": "${checkoutTotal}",
				"merchant_id": "GlobalTesting_CTBC",
				"details": "Some item",
				"cardholder": {
					"phone_number": "${billing_phone}",
					"name": "${billing_first_name}",
					"email": "${billing_email}",
					"zip_code": "${billing_postcode}",
					"address": "${billing_state+billing_city+billing_address_1}",
				}
				}'`.replace(/                /g, '')

				document.querySelector('#curl').innerHTML = command;
			})
		})
	}
    </script>	
    <?php
}
// 可以自己選擇要放在 woocommerce_after_checkout_form 或其他地方
// 請見 https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/
add_action('woocommerce_after_checkout_form', 'TapPay_DP_after_payment');

雖然一樣是暴力貼上，但還是成功了！

結語

同樣提醒，請務必注意網頁安全性，ChatGPT 4 建議將機密資料於 wp-config.php 中定義，並儲存於伺服器的環境變數中，你可以在安裝 WP 的 root 資料夾中找到 .htaccess 檔案（可能要使用檔案管理員），我用的 cPanel 是在 cPanel>檔案>檔案管理員>public_html or your_file_name

在 .htaccess 最上面儲存密碼：
SetEnv THE_API_KEY thisisthepassword1234

另外 wp-config.php 是在 cPanel>檔案>檔案管理員>public_html or your_file_name，在裡面加上
define('TAPPAY_API_KEY', 'THE_API_KEY');
在 function.php 呼叫

<script>
    TPDirect.setupSDK(11327, '<?php echo TAPPAY_API_KEY; ?>', 'sandbox');
</script>

或是如果你不想設定 wp-config.php，直接使用 getenv('THE_API_KEY') 也可以！

我在後面還有加上取得 billing details 的程式碼呦！如果不需要這麼多可以刪掉，不過有這些資料，要 POST 到 Ragic 根本是一小塊蛋糕 ><