トークンを作成する

manecoではクレジットカード情報をトークン化するライブラリを提供しています。

ManecoCheckout

最も簡単にクレジットカード情報をトークン化することができるライブラリです。
manecoの用意した画面にカード情報を入力していただきます。

Maneco.js

様々なカスタマイズ要件に対応することができるライブラリです。
加盟店様の用意した画面にカード情報を入力していただきます。

ManecoCheckoutの使い方

デモ

「カード情報登録」ボタンをクリックしてください。
カード情報入力画面が表示されますので、以下のカード情報を入力し、「登録する」ボタンをクリックしてください。

  • ・ カード番号:4242 4242 4242 4242
  • ・ カード名義人:TARO MANECO
  • ・ 有効期限:09/17
  • ・ セキュリティコード:123

トークンの作成後、ボタンには「入力済」と表示されます。

導入方法

HTML上に

<form>
    <script src="https://maneco.paygent.co.jp/js/ManecoCheckout.js" id="ManecoCheckout" auth-key="test_public_oG5q8p20VgAzmXGcet84Cw0k" disp-card-name="true" disp-card-cvc="true" charset="UTF-8"></script>
</form>

と記述することにより、トークンを作成することができます。
UTF-8での動作を前提としているため、charset="UTF-8"を指定してください。

フォーム送信と同時に作成されたトークンを加盟店様サーバで受け取ることができます。
作成されたトークンは<input type="hidden" name="ManecoTokenId">にセットされています。

指定できるパラメタ

パラメタ名
説明
デフォルト値
id(必須)
"ManecoCheckout"を固定で指定する
auth-key(必須)
基本設定のAPIキー欄の公開鍵を指定する
なし
disp-card-name
カード名義人の入力欄を表示させる場合は"true"を指定する
disp-card-cvc
セキュリティコードの入力欄を表示させる場合は"true"を指定する
callback
ManecoCheckoutから実行される関数名を指定する
title-text
カード情報入力フォームのタイトルの文言
"カード情報の登録"
open-button-text
カード情報入力フォームを開くボタンの文言
"カード情報登録"
send-button-text
カード情報入力を確定させるボタンの文言
"登録する"

Maneco.jsの使い方

導入方法

HTML上に

<script type="text/javascript" src="https://maneco.paygent.co.jp/js/Maneco.js" charset="UTF-8"></script>

と記述することにより、利用することができます。
UTF-8での動作を前提としているため、charset="UTF-8"を指定してください。

HTML上にJavaScriptで

var maneco = new Maneco();
maneco.createToken(
    "test_public_oG5q8p20VgAzmXGcet84Cw0k", {
    "number": "4242424242424242",
    "expire_year": "17",
    "expire_month": "09",
    "cvc": "123",
    "name": "TARO MANECO"
}, responseHandler);

と記述することにより、トークンを作成することができます。

HTML上にJavaScriptで

var responseHandler = function(response) {
    var form = document.form;
    if (response.token_id) {
        // 入力されたカード情報はフォーム情報から削除
        form.number.removeAttribute('name');
        form.expire_year.removeAttribute('name');
        form.expire_month.removeAttribute('name');
        form.cvc.removeAttribute('name');
        form.name.removeAttribute('name');

        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'token_id';
        input.value = response.token_id;
        form.appendChild(input);
        form.submit();
    } else {
        // エラー処理をここに記述
    }
});

と記述することにより、作成されたトークンを加盟店様サーバで受け取ることができます。

指定できるパラメタ

引数名
プロパティ名
説明
第1引数
基本設定のAPIキー欄の公開鍵を指定する
第2引数
number
カード番号
expire_year
有効期限(年)
expire_month
有効期限(月)
cvc
セキュリティコード
name
カード名義
第3引数
Maneco.jsから実行される関数名を指定する