@miraipay/js (MiraiPay.js)

English summary: @miraipay/js (display name MiraiPay.js) is the official browser SDK for MIRAI Pay. initMiraiPay only needs your MIRAI Pay public key (pk_test_mp_... / pk_live_mp_...) — it internally calls GET pay/v1/js/config to fetch the platform's fincode public key and your tenant's shop ID, then loads and configures fincode.js for you. Card data is sent directly from the browser to fincode; it never passes through MIRAI Pay's servers. This package is in beta (0.x) — MIRAI Pay's public host (api.miraikei.com) is not yet routable, so pass baseUrl pointing at your own MIRAI Pay endpoint until then. Breaking changes may land on any 0.x release.

MIRAI Pay のブラウザ向け公式 SDK です。加盟店側が fincode の公開キーを一切持たなくてよいことが大きな特徴です。 initMiraiPay は MIRAI Pay の公開キー（pk_test_mp_... / pk_live_mp_...）だけを受け取り、内部で GET pay/v1/js/config を叩いてプラットフォームの fincode 公開キーと対象テナントの tenant_shop_id を取得し、 fincode.js のロードと初期化（setTenantShopId）まで自動的に行います。カード情報はブラウザから fincode へ 直接送信され、MIRAI Pay のサーバーは経由しません（PCI DSS スコープを拡大しません）。

ベータ版（0.x）について: MIRAI Pay の公開ホスト（api.miraikei.com）はまだルーティングされていません。 開通するまでは baseUrl オプションでご自身の MIRAI Pay エンドポイント（dev環境など）を指定してください。 0.x の間は破壊的変更が入る可能性があります。1.0.0 は公開ホスト開通後にリリースします。

Getting Started

npm install @miraipay/js

1. MIRAI Pay 開発者コンソールから API キーを取得

/[orgId]/pay/developers/api-keys から公開キー（pk_test_mp_... または pk_live_mp_...）を発行します。 このキーはブラウザに埋め込む前提で安全に設計されていますが、決済実行など秘匿API全般は呼び出せません （サーバーサイドの操作には @miraipay/node のシークレットキーを使ってください）。

2. MiraiPay インスタンスを作成

import { initMiraiPay, getCardToken } from "@miraipay/js"

const main = async () => {
    const miraipay = await initMiraiPay({
        publicKey: "pk_test_mp_xxxxxxxxxxxxxxxx",

        // api.miraikei.com が未開通の間は明示的に指定する
        baseUrl: "https://your-dev-endpoint.example.com/api/v1/pay",

        // Optional. 対象ワークスペース(org_unit)ID。ベースワークスペース(「ビジネス」)
        // 発行キーで既定(base)以外のワークスペースを明示したい場合のみ指定する。
        // ワークスペース発行キーはサーバー側で既にそのワークスペースに固定されているため省略可能。
        workspaceId: "{{org_unit id}}",
    })

    // fincode 決済UIフォームをマウント
    const ui = miraipay.ui({ layout: "vertical" })
    ui.create("payment", { layout: "vertical" })
    ui.mount("payment-form", "400")

    const onSubmit = async (e) => {
        e.preventDefault()

        const response = await getCardToken({ miraipay, ui, number: "4" })
        const tokens = response.list // expect 4 tokens

        // トークンをサーバーへ送信し、@miraipay/node で決済処理する
    }
}

Utility Functions

決済UIフォームの操作をラップしつつ、便利なユーティリティ関数を提供します。

executePayment

UIコンポーネントに入力されているカード情報をもとに決済実行JS（payments()）を呼び出します。 Promiseを返し、解決時には決済オブジェクト（PaymentObject）を返します。

import { executePayment } from "@miraipay/js"

(async () => {
    const payment = await executePayment({
        miraipay: miraipay, // initMiraiPay の戻り値
        ui: ui, // MiraiPay UI インスタンス（MiraiPayUI）。UIコンポーネントの入力値をそのまま使える。

        id: "<Order ID>", // order id of payment (string)
        payType: "Card", // payment type (Card | Applepay | Konbini | Paypay | Directdebit | Virtualaccount)
        accessId: "<Access ID>", // access id of payment (string)
    })
})()

getCardToken

UIコンポーネントに入力されているカード情報をもとにカードトークンを取得します。 Promiseを返し、解決時にはトークン情報を含むデータを返します。

import { getCardToken } from "@miraipay/js"

(async () => {
    const res = await getCardToken({
        miraipay: miraipay,
        ui: ui,
        number: "4", // how many tokens you want to get (string, default: "1")
    })
    const tokens = res.list // there are 4 tokens in this array.
})()

registerCard

UIコンポーネントに入力されているカード情報をもとにカードを登録します。 Promiseを返し、解決時には登録されたカードオブジェクト（CardObject）を返します。

import { registerCard } from "@miraipay/js"

(async () => {
    const card = await registerCard({
        miraipay: miraipay,
        ui: ui,
        customerId: "<Customer ID>", // customer id to register the card (string)
        useDefault: true, // use the card as default card (boolean)
    })
})()

License

UNLICENSED — MIRAIKEI Inc. の許諾なく使用・複製・再配布はできません。詳細は LICENSE を参照してください。