fincode for ESModulesはJavaScript/TypeScriptプロジェクトにおけるfincodeJSの呼び出しを支援するラッパーライブラリです。 fincodeJSのロードを簡略化し、ヘルパー関数とTypeScriptの型定義を提供します。
npm install @fincode/jsfincode for ESModulesはJavaScript/TypeScriptプロジェクトにおけるfincodeJSの呼び出しを支援するラッパーライブラリです。 fincodeJSのロードを簡略化し、ヘルパー関数とTypeScriptの型定義を提供します。
このライブラリはクライアントサイドJavaScriptプロジェクトでの利用を想定しています。 Node.js環境下でfincodeを利用する場合はfincode for Node.JSを利用できます。
``bash
$ npm i @fincode/js
Usage
$3
テスト環境および本番環境の管理画面からAPIキーを取得します。
APIキーはパブリックキーである必要があります。
$3
Getting Startedの手順に従い、
@fincode/js をプロジェクトにインストールします。$3
initFincode メソッドを呼び出し、 fincodeインスタンスを作成します。`js
import { initFincode, getCardToken } from "@fincode/js"const main = async () => {
const fincode = await initFincode({
publicKey: "p_*_*", // Public key
isLiveMode: true, // fincode Environment
})
// mount fincode payment UI form
const ui = fincode.ui({ layout: "vertical" })
ui.create("payment", { layout: "vertical" })
ui.mount("fincode", "400")
// get card token
const const onSubmit = async (e) => {
e.preventDefault()
const response = await getCardToken(fincode, ui, "4")
const tokens = response.list // expect 4 tokens
// Process something with token.
}
}
`Utility Functions
fincode js SDKは本来のfincode JSのラッパーとしての機能に加え、さらに便利に利用できるユーティリティ関数を提供します。
$3
UIコンポーネントに入力されているカード情報をもとに決済実行JS(payments())を呼び出します。
Promiseを返し、解決時には決済オブジェクト(PaymentObject)を返します。`ts
import { executePayment } from "@fincode/js"(async () => {
const payment = await executePayment({
fincode: fincode, // fincode instance (FincodeInstance)
ui: ui, // fincode UI instance (FincodeUI). : you can use the data input in the fincode ui component directly.
id: "", // order id of payment (string)
payType: "Card", // payment type (Card | Applepay | Konbini | Paypay | Directdebit | Virtualaccount)
accessId: "", // access id of payment (string)
})
})()
`$3
UIコンポーネントに入力されているカード情報をもとにカードトークンを取得します。
Promiseを返し、解決時にはトークン情報を含むデータを返します。`ts
import { getCardToken } from "@fincode/js"(async () => {
const res = await getCardToken({
fincode: fincode, // fincode instance (FincodeInstance)
ui: ui, // fincode UI instance (FincodeUI). : you can use the data input in the fincode ui component directly.
number: "4" // how many tokens you want to get (string, default: "1")
})
const tokens = res.list // there are 4 tokens in this array.
})()
`$3
UIコンポーネントに入力されているカード情報をもとにカードを登録します。
Promiseを返し、解決時には登録されたカードオブジェクト(CardObject)を返します。`ts
import { registerCard } from "@fincode/js"(async () => {
const card = await registerCard({
fincode: fincode, // fincode instance (FincodeInstance)
ui: ui, // fincode UI instance (FincodeUI). : you can use the data input in the fincode ui component directly.
customerId: "", // customer id to register the card (string)
useDefault: true, // use the card as default card (boolean)
})
})()
``