Create Token

TapPay Fields

如欲了解最新版號 SDK 以及各版號之間的差異性，請參考 Github Release Page : TapPay Web Github

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)

請注意版本的差異，避免載入 Web SDK 錯誤
https://js.tappaysdk.com/sdk/tpdirect/v5.14.0
https://js.tappaysdk.com/tpdirect/v5.13.1
使用方式請參考以下範例

<script src="https://js.tappaysdk.com/sdk/tpdirect/v5.14.0"></script>
<script>
    TPDirect.setupSDK(APP_ID, 'APP_KEY', 'sandbox')
</script>

若使用低於 v5.14.0 之Web SDK版本，請使用以下路徑引用 Web SDK

<script src="https://js.tappaysdk.com/tpdirect/v5.13.1"></script>
<script>
    TPDirect.setupSDK(APP_ID, 'APP_KEY', 'sandbox')
</script>

TPDirect.card.setup

TPDirect.card.setup(config)

TPDirect.card.setup({
    // Display ccv field
    let 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: 'ccv'
        }
    }
    // Not display ccv field
    let fields = {
        number: {
            // css selector
            element: '#card-number',
            placeholder: '**** **** **** ****'
        },
        expirationDate: {
            // DOM object
            element: document.getElementById('card-expiration-date'),
            placeholder: 'MM / YY'
        }
    }

    fields: fields,
    styles: {
        // Style all elements
        'input': {
            'color': 'gray'
        },
        // Styling ccv field
        'input.ccv': {
            // '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'
            }
        }
    },
    // 此設定會顯示卡號輸入正確後，會顯示前六後四碼信用卡卡號
    isMaskCreditCardNumber: true,
    maskCreditCardNumberRange: {
        beginIndex: 6,
        endIndex: 11
    }
})

onUpdate

TPDirect.card.onUpdate(callback)

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

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', 'unionpay','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.ccv === 2) {
        // setNumberFormGroupToError()
    } else if (update.status.ccv === 0) {
        // setNumberFormGroupToSuccess()
    } else {
        // setNumberFormGroupToNormal()
    }
})

getTappayFieldsStatus

TPDirect.card.getTappayFieldsStatus()

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

Get Prime

TPDirect.card.getPrime(callback)

使用 TPDirect.card.getPrime 取得 Prime

// 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);
}

Get CCV Prime

此串接內容適合用於『當使用 Pay by Card Token API 時，希望帶入 CCV 進行交易，但卻不想經手明碼 CCV』情境
透過 SDK 串接後, 可以使用 TPDirect.ccv.getPrime() 取得一串 ccv_prime, 並把 ccv_prime 帶入到 Pay by Card Token API 後即可進行交易
註: ccv_prime 為一串亂數, 並不是敏感資訊

建議串接流程

1. 串接 Setup CCV Field
2. 串接 Setup Card Type
3. 串接 onUpdate
4. 串接 Get Prime

Setup CCV field

透過此 TPDirect.ccv.setup 可以設定 ccv input 欄位

fields 的表格

TPDirect.ccv.setup({
    fields: {
        ccv: {
            element: '#card-ccv',
            placeholder: 'ccv'
        }
    },
    styles: {
        // Style all elements
        'input': {
            'color': 'gray'
        },
        // Styling ccv field
        'input.ccv': {
            // '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'
            }
        }
    }
})

Setup Card Type

設置完 ccv input 欄位後, 可以透過 TPDirect.ccv.setupCardType 設定 ccv 相對應的長度

並可透過以下六個不同卡別直接設置, 若不設置預設則為 Unknown, ccv 長度當為 3 - 4 碼時, 可進行 Get CCV Prime

TPDirect.CardType.VISA
TPDirect.CardType.JCB
TPDirect.CardType.AMEX
TPDirect.CardType.MASTERCARD
TPDirect.CardType.UNIONPAY
TPDirect.CardType.UNKNOWN

接著透過 TPDirect.ccv.setupCardType(TPDirect.CardType.VISA) 去設定所想要的卡別

onUpdate

當在 ccv input 欄位輸入時, 可以透過 TPDirect.ccv.onUpdate() 去監測目前輸入狀況

TPDirect.ccv.onUpdate((update) => {
    console.log(update)
})

// Example Data
{
  canGetPrime: true
  hasError: false
  status: {
    ccv: 0
  }
}

update 欄位結構為下表

Get Prime

最後透過 TPDirect.ccv.getPrime 可以取得 ccv_prime 並把這 ccv_prime 帶入到 Pay by Card Token API 的請求中，送到 TapPay 即可完成交易 TPDirect.ccv.getPrime 支援 callback 和 promise 兩個版本

透過 callback 取得 prime

TPDirect.ccv.getPrime((error, response) => {
    if (error) {
        console.log(error)
        return
    }
    console.log(response)
})

透過 promise 取得 prime

TPDirect.ccv.getPrime().then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
})

Response 資料結構為下表

Get Device Id

若您有使用風險控制服務
呼叫 getDeviceId() 取得裝置識別碼

TPDirect.getDeviceId()

Q&A

如果您需要設定 Content Security Policy 中的 frame-src， 請設置以下二個網域：

1. js.tappaysdk.com
2. fraud.tappaysdk.com