JPay API 串接範例

本頁面主要提供 JPay 相關 API 的使用方式及注意事項。

請先依照 範例 - Cat 的方式實作 useCat.ts 後使用。

readyToPay

開啟 JPay 支付彈窗

import { useCat } from '@/composable/useCat'

const { pay } = useCat()

const readyToPay = (payload: { accessToken: string; transactionToken: string }) => {
  pay().readyToPay(payload)
}

refreshJPoints

觸發 JPay 刷新 JPoints 相關資訊

import { useCat } from '@/composable/useCat'

const { pay } = useCat()

const refreshJPoints = () => {
  pay().refreshJPoints()
}

setOnDeal

設定 JPay 交易成功時觸發的 callback

import { useCat } from '@/composable/useCat'

const { pay } = useCat()

pay().setOnDeal((payload: { orderId: string }) => {
    console.log(payload.orderId, 'JPay OnDeal')
})

setOnFailed

設定 JPay 交易失敗時觸發的 callback

import { useCat } from '@/composable/useCat'

const { pay } = useCat()

pay().setOnFailed((payload: { orderId: string }) => {
    console.log(payload.orderId, 'JPay OnFailed')
})

setOnCancel

設定 JPay 交易取消時觸發的 callback

import { useCat } from '@/composable/useCat'

const { pay } = useCat()

pay().setOnCancel((payload: { orderId: string }) => {
    console.log(payload.orderId, 'JPay OnCancel')
})

setOnTrading

設定 JPay 前往交易時觸發的 callback

import { useCat } from '@/composable/useCat'

const { pay } = useCat()

pay().setOnTrading((payload: { orderId: string; paymentChannel: number }) => {
    console.log(payload.orderId, 'JPay OnTrading')
    console.log(payload.paymentChannel, 'JPay OnTrading')
})

setOnMaintenance

設定 JPay 開啟維護中畫面時觸發的 callback

import { useCat } from '@/composable/useCat'

const { pay } = useCat()

pay().setOnMaintenance((payload: { setInfo: (payload: { title: string; message: string }) => void }) => {
    console.log('JPay OnMaintenance')

    // 若不設定則會帶入預設文案
    payload.setInfo({
      title: '維護中標題',
      message: '維護中內容',
    })
})

load

產品端 RD 不需執行，此為 Data4 開發者使用

載入 JPay 相關 js 以及建立 js instance

import { useCat } from '@/composable/useCat'

const { pay } = useCat()

const load = async () => {
  await pay().load()
}