最近因為有需要，所以用到了一個三方金流的公司叫做 TabPay全方位金流平台，因為之前都只有接藍綠紅
現在百花齊放，因為看一下範例很多都是用 python 寫的，所以想說就筆記一下使用 C# 開發信用卡付款的方法
之後要用到就可以快速復習一下
1. 得先註冊，註冊完之後到這裡 https://portal.tappaysdk.com/information
你就可以拿到你的 Partner Key 這很重要之後會用到 基本上 開頭就是 partner_xxxxxxxxxx...
這是後端會用到的，請謹慎持有他
2. 你可以到這裡 https://portal.tappaysdk.com/myapps 拿到 App
Key 等等 Javascript 的地方會用到
3. 取得 Prime ， 因為我是網頁開發，這邊我的人機主要就是使用 Javascript 的部份，基本上你得透過前端 Javascript 的部份拿到 Prime
<![CDATA[
<script src="https://js.tappaysdk.com/tpdirect/v5.1.0"></script>
<script>TPDirect.setupSDK('153376', 'appkey_blog_step2', 'sandbox')</script>
<form method="post" id="formMain" enctype="multipart/form-data" onsubmit="Splash1()">
<div>
<label>請輸入卡號</label>
<p>
<div id="cardview-container"></div>
</p>
<p>
<button type="button" onclick="onClick()">Get Prime By Javascript</button>
</p>
<p>
<textarea asp-for="Prime" name="Prime" id="Prime" style="width:100%">
</textarea>
</p>
<p>
<button id="btnSubmit" asp-page-handler="Save" style="width: 200px;" class="btn btn-success pull-right"><i class="fa fa-save" aria-hidden="true"></i> &nbsp;Pay by Prime</button>
</p>
</div>
<div style="color:red" id="divResult">
@Model.Result
</div>
</form>
<script>
function onClick() {
toastr.success($('#cc-number').val());
TPDirect.card.getPrime(function (result) {
console.log(result);
//取得結果顯示出來
$('#Prime').val(JSON.stringify(result));
$('#divResult').html(JSON.stringify(result));
})
}
var defaultCardViewStyle = {
color: 'rgb(0,0,0)',
fontSize: '24px',
lineHeight: '50px',
fontWeight: '300',
errorColor: 'red',
placeholderColor: ''
};
TPDirect.card.setup('#cardview-container', defaultCardViewStyle, {
isUsedCcv: true
})
TPDirect.card.onUpdate(function (update) {
if (update.canGetPrime) {
console.log('success log');
} else {
}
if (update.hasError) {
cardViewContainer.classList.add('error')
} else {
cardViewContainer.classList.remove('error')
}
if (update.status.number) {
showErrorMessage('Please check your credit card number')
} else {
hideErrorMessage()
}
})
/* Prime Result
{
"status": 0,
"msg": "Success",
"card": {
"prime": "407475a665e5a772f7ea2b27c592292ba6f3137d6cc4b1cde49f6b8017acd66d",
"issuer": "",
"lastfour": "4242",
"bincode": "424242",
"funding": 0,
"type": 1,
"level": "",
"country": "UNITED KINGDOM",
"countrycode": "GB"
},
"clientip": "211.23.139.189",
"card_identifier": "3bbfcb157e5f44ee8856074baf712ae4"
}
*/
</script>
]]>
sandbox 測試卡號 4242424242424242 時間 04/29 , CSV: 123
4. 之後將 Prime 送到後端，再來就是 C# 的部份 ，透過 C# 就可以使用該 Prime 進行付款
C# Code:
<![CDATA[
public IActionResult OnPostSave()
{
using (var client = new HttpClient())
{
var primeInfo = JsonConvert.DeserializeObject<CardInfo>(Prime);
//正式機，就換網址
var url = "https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime";
client.DefaultRequestHeaders.Add("x-api-key", "partner_xxxxxxxxxxxxxxxxx_blog_step1");
client.DefaultRequestHeaders.Accept
.Add(new MediaTypeWithQualityHeaderValue("application/json"));//ACCEPT header
var requestBody = new
{
partner_key = "partner_xxxxxxxxxxxxxxxxx_blog_step1",
prime = primeInfo.card.prime,
amount = "99",
// 這就是付款方式
// 請參考 https://portal.tappaysdk.com/merchant/sandbox
merchant_id = "userid_CTBC",
details = "Some item",
cardholder = new
{
phone_number = "+886923456789",
name = "許當麻",
email = "test@sample.com",
zip_code = "110",
address = "台北市天龍區芝麻街1號1樓",
national_id = "A123456789"
}
};
var json = Newtonsoft.Json.JsonConvert.SerializeObject(requestBody);
var content = new StringContent(json, Encoding.UTF8, "application/json");
var response = client.PostAsync(url, content).Result;
var responseString = response.Content.ReadAsStringAsync().Result;
Result = responseString;
Console.WriteLine(responseString);
}
return Page();
}
/* Result:
{
"status": 0,
"msg": "Success",
"amount": 99,
"acquirer": "TW_CTBC",
"currency": "TWD",
"rec_trade_id": "D20240902CR1q5e",
"bank_transaction_id": "TP20240902CR1q5e",
"order_number": "",
"auth_code": "507256",
"card_info": {
"issuer": "",
"funding": 0,
"type": 1,
"level": "",
"country": "UNITED KINGDOM",
"last_four": "4242",
"bin_code": "424242",
"issuer_zh_tw": "",
"bank_id": "",
"country_code": "GB"
},
"transaction_time_millis": 1725260762529,
"bank_transaction_time": {
"start_time_millis": "1725260762577",
"end_time_millis": "1725260762577"
},
"bank_result_code": "",
"bank_result_msg": "",
"card_identifier": "3bbfcb157e5f44ee8856074baf712ae4",
"merchant_id": "userid_CTBC",
"is_rba_verified": false,
"transaction_method_details": {
"transaction_method_reference": "REQUEST",
"transaction_method": "FRICTIONLESS"
}
}
*/
]]>
之後就可以在 https://portal.tappaysdk.com/history/sandbox 在這裡看到自己的訂單
reference:
https://docs.tappaysdk.com/tutorial/zh/portal.html#merchant-registration
https://docs.tappaysdk.com/tutorial/zh/back.html#pay-by-prime-api
https://docs.tappaysdk.com/tutorial/zh/error.html#web-sdk-error-code
