MpToken.js（ESモジュール）

概要

MpToken.js は、クレジットカード情報をトークン化（MPクレカトークン）するためのJavaScriptライブラリです。 Vanilla JavaScript や従来型のWebアプリケーション開発で利用できます。

MPクレカトークンとは

カード番号などの機密情報を、一時的な文字列（トークン）に変換することです。トークン化により、加盟店様のシステムでカード情報を直接扱う必要がなくなり、PCI DSSの準拠範囲を削減できます。

インストール

npm

npm install @mul-pay/mptoken-js

CDN（scriptタグ）

従来のscriptタグを使用する場合は、Multipayment オブジェクトがグローバルに利用可能になります。

環境	FQDN	URL
テスト環境	`stg.static.mul-pay.jp`	`https://stg.static.mul-pay.jp`
本番環境	`static.mul-pay.jp`	`https://static.mul-pay.jp`

テスト環境
本番環境

<script src="https://stg.static.mul-pay.jp/payment/js/mp-token.js"></script>

<script src="https://static.mul-pay.jp/payment/js/mp-token.js"></script>

トークン化方式

MpToken.js では2つのトークン化方式を提供しています。

方式	メソッド	特徴
getToken方式	`Multipayment.getToken()`	シンプル、既存フォームと連携しやすい
Elements方式	`elements.create()` + iframe	より安全、カード情報がサイトを通過しない

getToken方式

処理フロー

Multipayment.init(apiKey)

Multipayment オブジェクトを初期化するメソッドです。

引数	型	説明
`apiKey`	string	ショップID

Multipayment.init('tshop00000001');

npmパッケージを利用する場合

npmパッケージを利用する場合は、Multipayment.init() ではなく loadMulpay() を使用してください。

Multipayment.getToken(card, callback)

MPクレカトークンを取得するメソッドです。トークン取得後、result オブジェクトを引数としてコールバック関数を呼び出します。

引数	型	説明
`card`	object	カード情報オブジェクト
`callback`	function	トークン取得後に呼び出すコールバック関数 ※無名関数は使用不可 ※許可文字種: `a-zA-Z0-9` `_` `.`

card オブジェクト

項目	必須	型	説明
`cardno`	✓	string	カード番号（ハイフンなし/半角数字）
`expire`	✓	string	有効期限（`YYMM` または `YYYYMM` 形式）
`securitycode`		string	セキュリティコード（3〜4桁）未設定の場合、セキュリティコードなしで決済
`holdername`		string	カード名義人 3Dセキュア認証利用時は必須設定を推奨利用可能記号: `,` `.` `-` `/`
`tokennumber`		string	MPクレカトークン発行数（1〜10）デフォルト: `"1"`

result オブジェクト

項目	型	説明
`resultCode`	string	処理結果コード（`"000"` で成功）複数エラー時は最初の1つが設定されます
`tokenObject.token`	string / string[]	MPクレカトークン `tokennumber` 指定時は配列
`tokenObject.toBeExpiredAt`	string	トークン有効期限（`yyyy-mm-dd-HH-MM-SS` 形式）
`tokenObject.maskedCardNo`	string	マスク済みカード番号（例: `411111******1111`）
`tokenObject.isSecurityCodeSet`	boolean	セキュリティコード設定フラグ

result オブジェクトサンプル

{
  "resultCode": "000",
  "tokenObject": {
    "token": "a33c8bec609ffc75726249d8d82286d529bd1deb973119cf497eeb54610ab9d2",
    "toBeExpiredAt": "2016-09-26-17-56-38",
    "maskedCardNo": "411111******1111",
    "isSecurityCodeSet": true
  }
}

サンプルコード（getToken方式）

Multipayment.init('tshop00000001');	 // ショップID
Multipayment.getToken(
{
    cardno: '4111111111111111',   // カード番号
    expire: '201501',             // カード有効期限
    securitycode: '111',          // セキュリティコード
    holdername: 'SOME HOLDER',    // カード名義人
    tokennumber: '5'              // MPクレカトークン発行数
}, someCallbackFunction         // MPクレカトークン取得後に実行するコールバック関数
);

// MPクレカトークン取得後に呼び出すコールバック関数を定義する
function someCallbackFunction ( result ){
// 処理結果コードが'000'以外の時はエラーのためダイアログを表示する
if( result.resultCode != '000' ){
    window.alert('購入処理中にエラーが発生しました')
} else {
// 予め購入フォームに用意したtokenフィールドに値を設定
document.getElementById('token').value = result.tokenObject.token
// フォームをsubmitして購入処理を進める
document.getElementById('purchaseform').submit()
}
}

Elements方式（iframe）

Elements方式では、カード情報入力フォームをiframeで生成するため、より安全にトークン化を行えます。カード情報が加盟店様サイトを一切通過しません。

事前にショップ管理画面にて認証情報を登録する必要があります。登録された「公開鍵」と「APIキー」は、組み込み時に設定します。 1.ショップ管理画面の「都度決済」＞「クレジットカード」＞「設定」ページを開く 2.「MPクレカトークン認証情報」メニューに進み、「登録」ボタンを押して認証情報を発行

処理フロー

loadMulpay(apiKey, publicKey, merchantIds, permitToSendFingerprint, productionMode)

npmパッケージを利用して MpToken.js を読み込む際に使用する関数です。

引数	必須	型	説明
`apiKey`	✓	string	APIキー
`publicKey`	✓	string	公開鍵
`merchantIds`		object	Google PayのMerchant情報
`permitToSendFingerprint`		boolean	フィンガープリント送信許可デフォルト: `true`
`productionMode`		boolean	本番環境フラグデフォルト: `false`（テスト環境）

import { loadMulpay } from "@mul-pay/mptoken-js";

const apiKey = "API_KEY"
const publicKey = "PUB_KEY"
const merchantIds = {
  googlePayMerchantId: "01234567890123456789"
}
const mulpay = await loadMulpay(apiKey, publicKey, merchantIds, true, false);

mulpay.createElements()

Elements オブジェクトを返すメソッドです。

const elements = mulpay.createElements();

elements.create(type, options)

指定された type の入力フォーム要素を生成します。

引数	必須	型	説明
`type`	✓	string	`cardNumber` / `cardExpiry` / `cardCvc`
`options`		object	スタイル、placeholder等のオプション

options で指定可能なCSSプロパティ

プロパティ	型	説明
`backgroundColor`	string	背景色
`color`	string	テキスト色
`caretColor`	string	キャレット色
`fontFamily`	string	フォントファミリー（Webフォント不可）
`fontSize`	string	フォントサイズ
`fontSmoothing`	string	フォントスムージング
`fontStyle`	string	フォントスタイル
`fontVariant`	string	フォントバリアント
`fontWeight`	string / number	フォントの太さ
`iconColor`	string	アイコンの色
`lineHeight`	string	行の高さ
`letterSpacing`	string	文字間隔
`textAlign`	string	テキストの配置
`padding`	string	パディング
`textDecoration`	string	テキストの装飾
`textShadow`	string	テキストの影
`textTransform`	string	テキストの変形

状態別スタイル: base, complete, empty, invalid, focus 疑似クラス・疑似要素: :hover, :focus, ::placeholder, ::selection, :-webkit-autofill, :disabled, ::-ms-clear

element.mount(domElement)

生成した要素を指定のDOM要素にマウントします。

const cardInputStyle = {
base: {
    fontFamily: "'Noto Sans Japanese', sans-serif",
    caretColor: "#198FCC",
    lineHeight: "28px",
    "::placeholder": {
    color: "rgba(0, 0, 0, 0.54)",
    },
},
invalid: {
    color: "#9e2146",
},
};

const cardNumberInputElement = elements.create('cardNumber', { style: cardInputStyle, placeholder: 'hogehoge'} );
const cardNumberWrapperElement = document.getElementById('any-wrapper-id1');
cardNumberInputElement.mount(cardNumberWrapperElement);

mulpay.getTokenThroughIframe(element, holdername, options)

Elements で生成したフォームからMPクレカトークンを取得します。

引数	必須	型	説明
`element`	✓	Element	`elements.create()` で生成した要素
`holdername`		string	カード名義人
`options`		object	`tokenNumber` 等のオプション

サンプルコード（Elements方式）

htmlサンプルコード

<!doctype html>
<html>
<head>
    <title>MPクレカトークン生成フォーム(iframe)</title>
    <script src="./useMpToken.js"></script>
</head>
<body>
    <h1>MPクレカトークン生成フォーム(iframe)</h1>
<form action="#" method="post">
<label for="cardNumber">カード番号:</label>
<div id="any-wrapper-id1"></div>
<br /><br />

<label for="expiry">有効期限:</label>
<div id="any-wrapper-id2"></div>
<br /><br />

<label for="cvc">セキュリティコード:</label>
<div id="any-wrapper-id3"></div>
<br /><br />

<label for="name">名義人:</label>
<input type="text" id="name-input-id" />
<br />
<br />

<input type="button" id="submit-button" value="決済する" />
</form>
<div id="result"></div>
</body>
</html>

JavaScriptサンプルコード(useMpToken.js)

import { loadMulpay } from "@mul-pay/mptoken-js";

window.addEventListener("load", async () => {
    const apiKey = "API_KEY"
    const publicKey = "PUB_KEY"
    const merchantIds = {
      googlePayMerchantId: "01234567890123456789"
    }
    // Multipaymentオブジェクトを初期化する
    const mulpay = await loadMulpay(apiKey, publicKey, merchantIds, true, false);

    // カード情報入力フォーム(カード番号)のスタイルを設定する
    const cardInputStyle = {
    base: {
        fontFamily: "'Noto Sans Japanese', sans-serif",
        "::placeholder": {
        color: "rgba(0, 0, 0, 0.54)",
    },
        caretColor: "#198FCC",
        lineHeight: "28px",
    },
    invalid: {
        color: "#9e2146",
    },
    };
    // カード情報入力フォーム(有効期限)のスタイルを設定する
    const expiryInputStyle = {
    base: {
        fontFamily: "'Noto Sans Japanese', sans-serif",
        "::placeholder": {
        color: "rgba(0, 0, 0, 0.54)",
        },
        caretColor: "#198FCC",
    lineHeight: "28px",
    },
    invalid: {
        color: "#9e2146",
    },
    };
    // カード情報入力フォーム(セキュリティコード)のスタイルを設定する
    const cvcInputStyle = {
    base: {
        fontFamily: "'Noto Sans Japanese', sans-serif",
        "::placeholder": {
        color: "rgba(0, 0, 0, 0.54)",
        },
        caretColor: "#198FCC",
        lineHeight: "28px",
    },
    invalid: {
        color: "#9e2146",
    },
    };

    // カード情報入力フォームのタイプを設定する
    const cardElementType = {
    type: "cardNumber",
    options: { style: cardInputStyle, placeholder: "hogehoge" },
    };
    const expiryInputType = {
    type: "cardExpiry",
    options: { style: expiryInputStyle },
    };
    const cvcInputType = {
    type: "cardCvc",
    options: { style: cvcInputStyle },
    };

    // カード情報入力フォームのラッパー要素を取得する
    const elements = mulpay.createElements();

    // カード情報入力フォームを作成する
    const cardNumberInputElement = elements.create('cardNumber', { style: cardInputStyle, placeholder: 'hogehoge'} );
    const expiryInputElement = elements.create('cardExpiry',{ style: expiryInputStyle });
    const cvcInputElement = elements.create('cardCvc', { style: cvcInputStyle });

    // カード情報入力フォームのラッパー要素を取得する
    const cardNumberWrapperElement = document.getElementById('any-wrapper-id1');
    const cardExpiryWrapperElement = document.getElementById('any-wrapper-id2');
    const cardCvcWrapperElement = document.getElementById('any-wrapper-id3');

    // カード情報入力フォームをラッパー要素にマウントする
    cardNumberInputElement.mount(cardNumberWrapperElement);
    expiryInputElement.mount(cardExpiryWrapperElement);
    cvcInputElement.mount(cardCvcWrapperElement);

    // カード情報入力フォームのラッパー要素を配列に格納する
    const mulPayFormElements = [
    cardNumberInputElement,
    expiryInputElement,
    cvcInputElement,
    ];
    // 名義人入力フォームを取得する
    const nameInputElement = document.getElementById("name-input-id");

    const btn = document.getElementById("submit-button");
    // 決済ボタンをクリックした時の処理を定義する
    btn.addEventListener("click", (e) => {
    // buttonを非活性にする
    btn.setAttribute("disabled", "true");

    const options = {
        tokenNumber: 2,
    };

    // mulpayオブジェクトのgetTokenThroughIframeメソッドを呼び出します。
    // このメソッドは、第一引数にフォーム要素、第二引数に名前の入力要素の値、第三引数にオプションを取ります。
    mulpay
        .getTokenThroughIframe(
        mulPayFormElements[0],
        nameInputElement.value,
        options
    )
        // getTokenThroughIframeメソッドはPromiseを返すため、thenメソッドを使用して非同期処理の結果を取得します。
        .then((response) => {
        const resultElement = document.getElementById("result");
        resultElement.innerHTML = JSON.stringify(response);
        btn.setAttribute("disabled", "false");
        cleanup();
    });
    });

    const cleanup = () => {
    mulPayFormElements.forEach(function (element) {
        // カード情報入力フォームをアンマウントする
        element.clear();
    });
    };
});

Google Pay対応

MpToken.js では Google Pay トークンを取得する機能も提供しています。カード情報は当サービスではなく Google Pay によってトークン化されます。

処理フロー

mulpay.createPaymentRequest(argsForGoogle)

Google Payの支払い情報を作成するメソッドです。

項目	必須	型	説明
`merchantName`	✓	string	加盟店名
`currency`	✓	string	通貨（例: `"JPY"`）
`country`		string	国（例: `"JP"`）
`total`	✓	string	金額

mulpay.checkAvailability()

Google Payの利用可否をチェックするメソッドです。トークン取得前に必ず実行してください。

返り値:

項目	型	説明
`googlePayAvailable`	boolean	`true` で利用可能

mulpay.fetchEncryptedTokenObject(paymentRequest)

Google Payのトークンを取得するメソッドです。

引数	型	説明
`paymentRequest`	object	`createPaymentRequest()` の返り値

サンプルコード（Google Pay）

htmlサンプルコード

<!doctype html>
<html>
<head>
    <title>Google Pay の利用サンプル</title>
    <script async src="https://pay.google.com/gp/p/js/pay.js"></script>
    <script type="module" src='./useMpToken.js'></script>
</head>
<body>
    <h1>Google Pay</h1>
    <!-- Google Payボタンを表示するためのラッパー要素 -->
    <div id="google-pay-button-wrapper" style="display: none">
    <!-- Google Payボタン -->
    <button id="google-pay-btn">Let's get token</button>
    </div>
    <!-- トークン取得結果を表示するための要素 -->
    <div id="result"></div>
</body>
</html>

JavaScriptサンプルコード(useMpToken.js)

import { loadMulpay } from "@mul-pay/mptoken-js"; // Multipaymentオブジェクトを初期化するためのメソッドをインポートする

// Google Payのトークンを取得するための引数を設定する
const argsForGoogle = {
    merchantName: "merchant name", // 購入者を設定する
    currency: "JPY", // 通貨を設定する
    country: "JP", // 国を設定する
    total: "1000", // 金額を設定する
};

window.addEventListener("load", async () => {
    const apiKey = "ec9946c42bbbef17658f0bea238f8dacac8d91ab15071fdf4d7b8cce70ce1ed4"; // apiKeyを設定する
    const publicKey = "pub_key"; // 公開鍵を設定する
    const ids = {
    googlePayMerchantId: "google_merchant_id",
    }; // Google PayのmerchantIdを設定する

    const mulpay = await loadMulpay(apiKey, publicKey, ids); // Multipaymentオブジェクトを初期化する
    // Google Payの支払い情報を作成する
    const paymentRequestForGoogle = mulpay.createPaymentRequest(argsForGoogle);
    // Google Payが利用可能かどうかをチェックする
    const { googlePayAvailable } = await mulpay.checkAvailability();
    // Google Payが利用可能な場合、Google Payボタンを表示する
    const togglePayButton = (googlePayAvailable) => {
    if (googlePayAvailable) {
        document.getElementById("google-pay-button-wrapper").style.display =
        "block";
    }
    };
    togglePayButton(googlePayAvailable);

    /**
    * Google Payボタンをクリックした時の処理
    * Google Payのトークンを取得する
    */
    const onClickForGoogle = async (e) => {
    const encryptedTokenObject = await mulpay.fetchEncryptedTokenObject(
        paymentRequestForGoogle
    ); // Google Payのトークンを取得する
    };
    const btn = document.getElementById("google-pay-btn"); // Google Payボタンを取得する
    btn.addEventListener("click", onClickForGoogle); // Google Payボタンをクリックした時の処理を登録する
});

概要​

インストール​

npm​

CDN（scriptタグ）​

トークン化方式​

getToken方式​

処理フロー​

Multipayment.init(apiKey)​

Multipayment.getToken(card, callback)​

card オブジェクト​

result オブジェクト​

result オブジェクトサンプル​

サンプルコード（getToken方式）​

Elements方式（iframe）​

処理フロー​

loadMulpay(apiKey, publicKey, merchantIds, permitToSendFingerprint, productionMode)​

mulpay.createElements()​

elements.create(type, options)​

options で指定可能なCSSプロパティ​

element.mount(domElement)​

mulpay.getTokenThroughIframe(element, holdername, options)​

サンプルコード（Elements方式）​

htmlサンプルコード​

JavaScriptサンプルコード(useMpToken.js)​

Google Pay対応​

処理フロー​

mulpay.createPaymentRequest(argsForGoogle)​

mulpay.checkAvailability()​

mulpay.fetchEncryptedTokenObject(paymentRequest)​

サンプルコード（Google Pay）​

htmlサンプルコード​

JavaScriptサンプルコード(useMpToken.js)​

概要

インストール

npm

CDN（scriptタグ）

トークン化方式

getToken方式

処理フロー

Multipayment.init(apiKey)

Multipayment.getToken(card, callback)

card オブジェクト

result オブジェクト

result オブジェクトサンプル

サンプルコード（getToken方式）

Elements方式（iframe）

処理フロー

loadMulpay(apiKey, publicKey, merchantIds, permitToSendFingerprint, productionMode)

mulpay.createElements()

elements.create(type, options)

options で指定可能なCSSプロパティ

element.mount(domElement)

mulpay.getTokenThroughIframe(element, holdername, options)

サンプルコード（Elements方式）

htmlサンプルコード

JavaScriptサンプルコード(useMpToken.js)

Google Pay対応

処理フロー

mulpay.createPaymentRequest(argsForGoogle)

mulpay.checkAvailability()

mulpay.fetchEncryptedTokenObject(paymentRequest)

サンプルコード（Google Pay）

htmlサンプルコード

JavaScriptサンプルコード(useMpToken.js)