iframeタグの利用

リンクタイプ Plusの決済画面をiframeで加盟店様サイトに埋め込むことができます。
追加のオプション契約は不要です。

事前確認が必要です

iframeでの埋め込みには制約事項があります。導入前に必ず内容を確認してください。

許可されるドメイン

iframeによる埋め込みは、実行パラメータ「ショップドメイン」に指定されたドメインのみ許可されます。

「ショップドメイン」の詳細は以下のページを参照してください。

• 決済機能：決済機能 共通パラメータ 実行パラメータ仕様
• カード編集機能：カード編集機能 実行パラメータ仕様

決済事業者画面に遷移する決済手段

以下の決済手段は、決済事業者側でiframe埋め込みを許可していない場合があるため、決済事業者画面は別タブで開きます。

決済手段	決済識別子
d払い	docomo
au PAY（auかんたん決済）	au
ソフトバンクまとめて支払い	sb
エポスかんたん決済	epospay
FamiPay決済	famipay
メルペイ決済	merpay
楽天ペイ	rakutenid
楽天ペイV2	rakutenpayv2
PayPay	paypay
au PAY（ネット支払い）	aupay
ネット銀聯	unionpay
AEON Pay	aeonpay
Alipay	alipay

JavaScriptの実装が必要なケース

以下のいずれかに該当する場合、リンクタイプ Plusを埋め込む加盟店様サイトに下記のJavaScriptの実装が必要です。

• 決済事業者画面に遷移する決済手段を利用する場合
• 3Dセキュア画面を新規タブで表示する設定にした場合

実装するJavascript

window.addEventListener("message", (event) => {
    var bean = event.data;
    // 決済開始用のpostMessageEventでのみ新規タブを開くようにパラメータを確認する
    if ((bean == null || bean.AccessID == null || bean.Token == null) 
        && (bean == null || bean.transId == null || bean.t == null)  ) {
        return;
    }

    // プロトコルタイプの決済開始を呼び出す
    var form = window.document.createElement("form");
    if(bean.AccessID != null && bean.Token != null){
        form.action = bean.action;
        form.method = bean.method;
        addParam(form, "AccessID", bean.AccessID);
        addParam(form, "Token", bean.Token);
    }else{
        form.action = bean.action;
        form.method = bean.method;
        addParam(form, "transId", bean.transId);
        addParam(form, "t", bean.t);
    }

    // 新規タブで開く
    var btn = window.document.createElement("input");
    btn.setAttribute("type", "button");
    btn.style.display = "none";
    form.appendChild(btn);
    form.target="_blank";
    document.body.appendChild(form);

    form.submit();
}, false);

function addParam(form, paramName, paramValue) {
    // 追加で送信するパラメータ
    var newValue = document.createElement("input");
    // 送信パラメータを非表示にする
    newValue.type = "hidden";
    // パラメータ名
    newValue.name = paramName;
    // パラメータ値
    newValue.value = paramValue;

    form.appendChild(newValue);
}

画面遷移

決済事業者画面に遷移する決済手段を選択した場合、または3Dセキュア画面を新規タブ表示に設定した場合の画面遷移を説明します。

iframe内の基本構成は各決済手段と同じですが、前述の決済手段については決済事業者の画面を新規タブで開きます。

※1：ポップアップがブロックされている環境では新規タブが自動で開きません。お客様がボタンを押下して決済事業者の画面に遷移します
※2：決済完了後、ブラウザによっては決済事業者画面が自動で閉じない場合があります

画面イメージ

iframeで埋め込んだときの画面遷移例（d払いの場合）を説明します。

ステップ1：決済手段を選択

iframe内の決済選択で「d払い」を選択します。

ステップ2：入力画面を確認

必要な情報を入力して「次へ」をクリックします。

ステップ3：決済完了待ち画面

ブラウザ環境によって、新規タブが自動で開かない場合があります。その場合はお客様がボタンを押下して遷移します。

ステップ4：決済事業者画面

注記

新規タブで表示される決済事業者の画面で決済手続きを行います。

ステップ5：決済事業者処理完了

決済手続きが完了します。ブラウザ環境によっては画面が自動で閉じない場合があります。

ステップ6：レシート画面

決済完了後にレシート画面が表示されます。