NAV
docs

Create Token

TapPay Fields

  1. 設定三個 tappay field container
  2. 利用 TPDirect.setupSDK 設定參數
  3. 使用 TPDirect.card.setup 設定外觀
  4. TPDirect.card.onUpdated 取得 TapPay Fields 狀態
  5. 利用 TPDirect.card.getPrime 來取得 prime 字串
  6. 如欲知 SDK 兼容性,請參考 SDK compatibility

如果有任何問題,請參考我們的 Example Code

TapPay Fields

在您的 HTML 裡面,加入 3 個 div,作為 TapPay fields container

<style>
    .tpfield {
        height: 40px;
        width: 300px;
        border: 1px solid gray;
        margin: 5px 0;
        padding: 5px;
    }
</style>
<div class="tpfield" id="card-number"></div>
<div class="tpfield" id="card-expiration-date"></div>
<div class="tpfield" id="card-ccv"></div>

SetupSDK

TPDirect.setupSDK(appID, appKey, serverType)

名稱 內容
appID 請參考 appid
appKey 請參考 appkey
serverType 使用的伺服器種類
測試時請使用 Sandbox 環境 (‘sandbox’)
實體上線後請切換至 Production 環境 ('production’)
兩個環境底下所使用的 appKey 將會不同
<script src="https://js.tappaysdk.com/tpdirect/v3"></script>
<script>
    TPDirect.setupSDK(APP_ID, 'APP_KEY', 'sandbox')
</script>

TPDirect.card.setup

TPDirect.card.setup(config)

名稱 類別 內容
fields Object
名稱類別內容
numberObjectelement: CSS Selector or DOM element
placeholder: String
expirationDateObjectelement: CSS Selector or DOM element
placeholder: String
ccvObjectelement: CSS Selector or DOM element
placeholder: String
styles Object 支援的 CSS 屬性,請參考 TapPay Fields Styles
TPDirect.card.setup({
    fields: {
        number: {
            // css selector
            element: '#card-number',
            placeholder: '**** **** **** ****'
        },
        expirationDate: {
            // DOM object
            element: document.getElementById('card-expiration-date'),
            placeholder: 'MM / YY'
        },
        ccv: {
            element: '#card-ccv',
            placeholder: '後三碼'
        }
    },
    styles: {
        // Style all elements
        'input': {
            'color': 'gray'
        },
        // Styling ccv field
        'input.cvc': {
            // 'font-size': '16px'
        },
        // Styling expiration-date field
        'input.expiration-date': {
            // 'font-size': '16px'
        },
        // Styling card-number field
        'input.card-number': {
            // 'font-size': '16px'
        },
        // style focus state
        ':focus': {
            // 'color': 'black'
        },
        // style valid state
        '.valid': {
            'color': 'green'
        },
        // style invalid state
        '.invalid': {
            'color': 'red'
        },
        // Media queries
        // Note that these apply to the iframe, not the root window.
        '@media screen and (max-width: 400px)': {
            'input': {
                'color': 'orange'
            }
        }
    }
})

onUpdate

TPDirect.card.onUpdate(callback)

實作 TPDirect.card.onUpdate,得知目前卡片資訊的輸入狀態
Callback 函數回傳的物件內將會有以下幾個屬性

名稱 內容
cardType (String) mastercard, visa, jcb, amex, unknown
canGetPrime (boolean) true = 全部欄位皆為正確,可以呼叫 getPrime
hasError (boolean) true = 任何欄位有錯誤
status.number (int) 回傳的 status code 請參考 reference
status.expiry (int) 回傳的 status code 請參考 reference
status.cvc (int) 回傳的 status code 請參考 reference
TPDirect.card.onUpdate(function (update) {
    // update.canGetPrime === true
    // --> you can call TPDirect.card.getPrime()
    if (update.canGetPrime) {
        // Enable submit Button to get prime.
        // submitButton.removeAttribute('disabled')
    } else {
        // Disable submit Button to get prime.
        // submitButton.setAttribute('disabled', true)
    }

    // cardTypes = ['mastercard', 'visa', 'jcb', 'amex', 'unknown']
    if (update.cardType === 'visa') {
        // Handle card type visa.
    }

    // number 欄位是錯誤的
    if (update.status.number === 2) {
        // setNumberFormGroupToError()
    } else if (update.status.number === 0) {
        // setNumberFormGroupToSuccess()
    } else {
        // setNumberFormGroupToNormal()
    }

    if (update.status.expiry === 2) {
        // setNumberFormGroupToError()
    } else if (update.status.expiry === 0) {
        // setNumberFormGroupToSuccess()
    } else {
        // setNumberFormGroupToNormal()
    }

    if (update.status.cvc === 2) {
        // setNumberFormGroupToError()
    } else if (update.status.cvc === 0) {
        // setNumberFormGroupToSuccess()
    } else {
        // setNumberFormGroupToNormal()
    }
})

getTappayFieldsStatus

TPDirect.card.getTappayFieldsStatus()

此方法可得到 TapPay Fields 卡片資訊的輸入狀態
與 TPDirect.card.onUpdate Callback 物件相同

Get Prime

TPDirect.card.getPrime(callback)

使用 TPDirect.card.getPrime 取得 Prime

名稱 內容
status 錯誤代碼,0 為成功
card 卡片資訊,將會回傳以下幾個值:
名稱類別(長度)內容
primeString(64)prime 字串,於 Pay by Prime 交易時使用
bincodeString(6)卡片前六碼
lastfourString(4)卡片後四碼
issuerString發卡銀行
fundingint卡片類別
0 = 信用卡 (Credit Card)
1 = 簽帳卡 (Debit Card)
2 = 預付卡 (Prepaid Card)
typeint卡片種類
1 = VISA
2 = MasterCard
3 = JCB
4 = Union Pay
5 = AMEX
levelString卡片等級
countryString發卡行國家
countrycodeString發卡行國家碼
clientip 交易者的 IP 位置
// call TPDirect.card.getPrime when user submit form to get tappay prime
// $('form').on('submit', onSubmit)

function onSubmit(event) {
    event.preventDefault()

    // 取得 TapPay Fields 的 status
    const tappayStatus = TPDirect.card.getTappayFieldsStatus()

    // 確認是否可以 getPrime
    if (tappayStatus.canGetPrime === false) {
        alert('can not get prime')
        return
    }

    // Get prime
    TPDirect.card.getPrime((result) => {
        if (result.status !== 0) {
            alert('get prime error ' + result.msg)
            return
        }
        alert('get prime 成功,prime: ' + result.card.prime)

        // send prime to your server, to pay with Pay by Prime API .
        // Pay By Prime Docs: https://docs.tappaysdk.com/tutorial/zh/back.html#pay-by-prime-api
    })
}

TapPay Fields focus style

為了讓您可以對 TapPay Fields 的 focus state 進行 style, 我們會在 field focus 的時候,把 tappay field container 加上 tappay-field-focus 這個 class,您可以對此 class 撰寫 css

/* Bootstrap 的 focus style */
.tappay-field-focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}