tappay / tappay-web-example Goto Github PK
View Code? Open in Web Editor NEWTapPay SDK example code for Web
Home Page: https://tappay.github.io/tappay-web-example
TapPay SDK example code for Web
Home Page: https://tappay.github.io/tappay-web-example
Hi team,
我用你們的TapPay_Fields測試產生的prime要透過php post pay request會fail, 目前我用第三方網站測試也會有一樣的問題,所以想請問我填的資料或者使用上有什麼問題嗎?
以下是測試網站跟sample code
https://reqbin.com/code/php
我輸入以下程式碼但 getPrimeWithCard not found,請問有類似的方法可以用嗎
TPDirect.card.getPrimeWithCard({
number: '4242 4242 4242 4242', // 信用卡號
dueMonth: '01', // 到期月份
dueYear: '2025', // 到期年份
ccv: '123', // 信用卡驗證碼
onSuccess: function(result) {
// 取得 prime 成功,處理回傳的結果
console.log(result);
},
onFail: function() {
// 取得 prime 失敗,顯示錯誤訊息
alert('取得 prime 失敗');
}
});
雖然 blur 後會再檢查為失效,
有辦法把 12a
這種狀況視為無效嗎?
不是很確定是否台新銀行有強制要使用TapPay direct Pay的客戶啟用 3D驗證?但老闆要求所以今天還是加了three_domain_secure: true 設定到payment info,然後把這payment info丟給 TapPay.payByPrime(payment_info) 但是,怎麼嘗試都不會跳轉到台新銀行的3D驗證畫面~而是直接付款成功~請問這是否不正常?還是是因為我的信用卡卡號之前已經被記錄在tappay裡面了?(我有用 remember: true 這設定)所以不會挑轉到3D驗證畫面?
const payment_info = {
prime: req.body.prime,
merchant_id: 'xxxxxxxx'
amount: _vcase.payPrice,
currency: 'TWD',
details: String(_vcase.serviceNames),
cardholder: {
phone_number: _vcase.userTel || '',
name: _vcase.userName || '',
email: _vcase.email || ''
},
remember: true,
three_domain_secure: true,
result_url: {
backend_notify_url: 'https://34136ad3.ngrok.io/pay_result',
frontend_redirect_url: 'https://34136ad3.ngrok.io/pay_result'
}
};
tlogger.info(payment_info);
TapPay.payByPrime(payment_info).then()
您好:
目前想實做pay by prime信用卡交易後的Backend Notify,關於這部分有幾個疑問想請教
文件上是寫說3D驗證交易完成後會發送通知,這部分是只有啟用3D驗證才會做通知嗎?
除了交易後的結果通知外,如果有refund或是其他交易狀態改變的話是否也會有通知?
如果notify接收失敗的話tappay會不會在一段時間後重新通知呢?
要如何認證收到的notify是tappay發送過來的
(有tappay的對外IP或其他資訊能讓我們驗證的嗎)
我用的是 https://js.tappaysdk.com/tpdirect/v2_3_3
在使用 Tappay Fields 的頁面網址後面有 #hash 時會有 js error
例如:www.shop.com/booking/pay#step1
錯誤發生在這兩行
可能要檢查一下會執行這兩行的條件是否涵蓋了沒有 query 但是有 hash 的情況,導致 window.location.search 是空的時候執行發生錯誤
TPDirect.card.setup styles 不支援 16 進位格式嗎?例如 #FFFFFF
,會掛掉
Network:
https://fraud.tappaysdk.com/get_fraud_id
{"message":"Server Error","status":-1}
Code:
useEffect(()=> {
console.log(`[TapPay] setupSDK`)
// @ts-ignore
TPDirect.setupSDK(123456, 'xxx', 'sandbox')
console.log(`[TapPay] setupSDK done`)
if(!tapPayRef.current) {
return
}
let defaultCardViewStyle = {
color: 'rgb(0,0,0)',
fontSize: '15px',
lineHeight: '24px',
fontWeight: '300',
errorColor: 'red',
placeholderColor: '',
}
// 預設不戴第三個參數的話, 是會必須填入 CCV
console.log(`[TapPay] card.setup`)
// @ts-ignore
TPDirect.card.setup('#tappay-iframe', defaultCardViewStyle)
console.log(`[TapPay] card.setup done`)
}, [tapPayRef.current])
Log:
[TapPay] setupSDK
[TapPay] setupSDK done
js:1 [TapPay Fraud]: Unable to get fraud_id.
js:1 XHR finished loading: POST "https://fraud.tappaysdk.com/get_fraud_id".
Document上面是寫-1 | Web SDK 重複載入兩次
,但我看Network沒有重複載入,TPDirect.isDoubleLoaded
也是false
This one is your sandbox URL but what's the production URL?
https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime
使用 Direct Pay - iframe 時, 到期日部份如果用貼上的, 即便填完仍會回報欄位未完成
可以在此示範頁面重現, 所以應該跟套件用戶端程式碼無關
測試環境:
測試步驟
用戶回報才注意到的現象, 但對方僅回報完成的欄位未被驗證(因此造成無法付款), 實際輸入手段不明, 上述的重現手段僅是我測試時發現的, 不確定是否有其它的因素造成狀態未正確更新.
用戶端程式這邊在貼上動作執行時不會收到 update 事件 (onUpdate 未被觸發), polling TPDirect.card.getTappayFieldsStatus() 得到的數值也都是 3.
如題,謝謝。
Hi,
我用 Direct Pay - TapPay Fields
試著加入 autocomplete credit card,
但是好像不會觸發 chrome 自動填信用卡,可能是因為每個欄位都各自包在 iframe?
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
目前只能從TapPay portal去生成 [付款連結] ,希望能夠整合我們的程式把付款內容透過LinkPay API (如果有的話) 去自動生成,這樣就不需要登入到TapPay portal裡面人為操作。
因為沒有在文件上看到有LinkPay API, 所以想在這邊發問和你們確認一下。
感謝
/Easy_Wallet/README.md
的內容不正確,裡面寫的都是 JKO Pay。
Do you have docs for your HTTP api that your TapPay-fields js sdk is built on? I would much prefer to use it directly instead of JS sdk.
Here is example from Stripe with documentation how to add card details on their system through http api:
https://stripe.com/docs/api/payment_methods/create
範例中:然後再用 TapPay.redirect(payment_url) 到 Line Pay 付款頁面
這句我不太懂噎?哪裡才是Line Pay 付款頁面呢
有順利取到Prime了(按下按鈕就有)
但怎麼連接 LINEPAY啊?
目前用react 寫程式
想說SDk打包成NPM 比較好操作
I would like to kindly request that you consider publishing your SDK on NPM. This move would significantly benefit users like me who rely on your SDK for various purposes. By making your SDK available on NPM, it would become much easier for us to update and track version changes, ensuring that we always have access to the latest features and improvements.
I'm trying to use TapPay
within React, and it seems to me that TPDirect.card.onUpdate((update) => {
is never being triggered. Any idea why?
Any idea?
export class CreditCardPayment extends React.Component {
number: HTMLInputElement
expiration: HTMLInputElement
ccv: HTMLInputElement
handleSubmit = () => {
getTPDirect().then((TPDirect) => {
const tappayStatus = TPDirect.card.getTappayFieldsStatus()
console.log('status', tappayStatus)
// ====================================
// logs:
// canGetPrime: false
// cardType: "unknown"
// hasError: false
// status: {number: 1, expiry: 1, ccv: 1}
// ====================================
if (tappayStatus.canGetPrime === false) {
alert('can not get prime')
return
}
TPDirect.card.getPrime(function (result) {
if (result.status !== 0) {
alert('get prime error ' + result.msg)
return
}
alert('get prime 成功,prime: ' + result.card.prime)
})
})
}
componentDidMount() {
getTPDirect().then((TPDirect) => {
TPDirect.setupSDK(
13951,
'app_oyLcnRbOPBJ2fqZvzaQ5d6Ueh1wK9nDN8dp3TmhvP7qQv72xS8CZMnw0TooY',
'sandbox'
)
// =============== setup() IS SEEMS TO BE WORKING OK
// when debugging I can see 'element' refs correcty configured in TPDirect.card
TPDirect.card.setup({
fields: {
number: {
element: this.number,
placeholder: '**** **** **** ****'
},
expirationDate: {
element: this.expiration,
placeholder: 'MM / YY'
},
ccv: {
element: this.ccv,
placeholder: "***"
}
}
})
TPDirect.card.onUpdate((update) => {
// =============== NEVER LOGS ANYTHING HERE !!! WHY?
console.log('update', update)
})
})
}
render() {
return <>
<div className="form">
<div className="form-group">
<label htmlFor="cc-name">Card number</label>
<div className="input-group custom-input">
<input
autoComplete="cc-number"
className="form-control rounded-0 text-monospace"
placeholder="**** **** **** ****"
ref={(e) => this.number = e!}
/>
<div className="input-group-append">
<span className="input-group-text text-muted">
{rawIcon(ccVisaSvg)}
{rawIcon(ccMasterCardSvg)}
</span>
</div>
</div>
</div>
<div className="row">
<div className="col-sm-8">
<div className="form-group">
<label><span className="hidden-xs">Expiration</span> </label>
<div className="input-group">
<input
ref={(e) => this.expiration = e!}
className="form-control text-monospace rounded-0"
placeholder="MM / YY" />
</div>
</div>
</div>
<div className="col-sm-4">
<div className="form-group">
<label data-toggle="tooltip" title="" data-original-title="3 digits code on back side of the card">CVV <i className="fa fa-question-circle"></i></label>
<input
className="form-control text-monospace rounded-0"
ref={(e) => this.ccv = e!}
/>
</div>
</div>
</div>
</div>
<div className="row py-3">
<Button
className="col-12 rounded-0"
color="secondary"
onClick={this.handleSubmit}>Reserve Now</Button>
</div>
</>
}
}
export function getTPDirect(): Promise<any> {
return new Promise((resolve, reject) => {
if (typeof window.TPDirect !== 'undefined') {
return resolve(window.TPDirect)
} else {
const script = window.document.createElement('script')
script.src = "https://js.tappaysdk.com/tpdirect/v5.1.0"
script.async = true
script.onload = () => {
if(typeof window.TPDirect !== 'undefined') {
resolve(window.TPDirect)
} else {
reject(new Error('failed to load TapPay sdk')
}
}
script.onerror = reject
window.document.body.appendChild(script);
}
})
}
Web SDK
在sandbox測試沒問題
推到正式,改完環境後
getPrime後取得status:79, App not found
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.