ペイディのあと払い ウィジェット表示設定

ペイディのあと払いウィジェットを表示するための入力サンプルをご用意しました。商品ページの価格表示の近くに、ペイディの分割払いの月々の価格を自動表示できます。注意事項をご一読いただき、ページ下部の「 入力サンプル 」をご活用ください。

表示イメージ


ＰＣサイト　カスタムテンプレート

サンプルイメージ：レスポンシブ対応テーマの「 E-ホワイト 」

カスタムテンプレートのサンプル記述は、価格表示の下にウィジェットが表示できます。


ＰＣサイト　ベーシックテンプレート

サンプルイメージ：ベーシックテンプレート（シンプル）の「 カラー・ホワイト 」

ベーシックテンプレートのサンプル記述は、カートボタン下側に、ウィジェットが表示できます。


スマートフォンサイト


サンプルイメージ：スマートフォンサイトのテンプレート「 S-ホワイト 」

■注意事項


入力サンプル

現在利用中のデザインテンプレートのウィジェットの入力サンプルを管理画面へ設定してください。
スマートフォンサイトを運用している場合は、合わせてスマートフォンサイト用の入力サンプルを管理画面から設定してください。
３回払い、６回払い、１２回払いの契約内容の違いによって、入力するサンプルは異なります。

■ＰＣサイト カスタムテンプレート用

すべての商品ページにウィジェットを一括で表示するには、以下の手順でscriptタグを設定します。

【 手順 】
  1. 管理画面メニュー「 デザイン設定 ＞ テーマ ＞ HTMLのカスタマイズ 」にアクセスします。
  2. 「 商品ページ ＞ メイン紹介文 」の「 HTMLを編集 」ボタンをクリックします。
  3. 既に入力されているHTMLソースの一番下に、以下のscriptタグをすべてコピーして追加します。
  4. 「 保存する 」ボタンをクリックします。
  5. 管理画面の左上「 お店ページの更新へ 」ボタンをクリックします。
  6. 「 注意事項に同意する 」にチェックを入れて「　編集中のテーマでお店を更新　」ボタンをクリックします。
    　更新が完了すると、商品ページに反映されています。

■３回払い用（１回、３回払いが選択可能）
<script>
let Outdata = document.getElementsByClassName("itemOutline")[0].innerHTML;
var hanpuflg = Outdata.indexOf("icon_hanpu.gif");
var regularflg = Outdata.indexOf("icon_regular.gif");
//頒布会/定期/非表示フラグありのいずれかは場合は実行しない
if (hanpuflg < 0 && regularflg < 0 && document.getElementById("paidydispoff") === null) {
let product_price = document.getElementsByClassName('selling_price')[0].textContent.slice(1);
let paidy_div = document.getElementsByClassName('price')[0];
paidy_div.insertAdjacentHTML('afterend', '<div class="_paidy-promotional-messaging" data-amount="' + product_price + '" data-alignment="start" data-font-size="12px"></div>');
} </script>
<script>
//itemPrcがある場合みの動作する（リストボックス変更時に金額が変わる場合且つ、非表示フラグ未使用時のみ対応）
const paidyfig = document.querySelector('._paidy-promotional-messaging');
if (document.getElementById("itemPrc") != null && paidyfig .classList.length > 0) {
const priceSelector = document.querySelector("#pi_cart > table.spec");
// ウィジェット本体
const widget = document.querySelector("._paidy-promotional-messaging");
// 商品のバリエーションが選択された場合の処理
priceSelector.addEventListener("change", function (event) {
let Amount_change;
let nullcheck = document.querySelector("#itemPrc > span.selling_price");
if (nullcheck == null) {
//nullの場合は0を入れる
Amount_change = 0;
} else {
Amount_change = document.querySelector("#itemPrc > span.selling_price").innerHTML.slice(1);
if (!Amount_change) {
// blank だった場合の処理
Amount_change = 0;
}
}
switch (Amount_change) {
case 0:
//該当しない場合は0を入れて表示を消す
widget.setAttribute("data-amount", 0);　　
break;
default:
widget.setAttribute("data-amount", Amount_change);　　
break;
}
// ウィジェットのリフレッシュ
_paidy && _paidy("pm:refresh");
});
}; </script>
<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
■６回払い用（１回、３回、６回払いが選択可能）
<script>
let Outdata = document.getElementsByClassName("itemOutline")[0].innerHTML;
var hanpuflg = Outdata.indexOf("icon_hanpu.gif");
var regularflg = Outdata.indexOf("icon_regular.gif");
//頒布会/定期/非表示フラグありのいずれかは場合は実行しない
if (hanpuflg < 0 && regularflg < 0 && document.getElementById("paidydispoff") === null) {
let product_price = document.getElementsByClassName('selling_price')[0].textContent.slice(1);
let paidy_div = document.getElementsByClassName('price')[0];
paidy_div.insertAdjacentHTML('afterend', '<div class="_paidy-promotional-messaging" data-amount="' + product_price + '" data-alignment="start" data-font-size="12px" data-6-pay-enabled></div>');
} </script>
<script>
//itemPrcがある場合みの動作する（リストボックス変更時に金額が変わる場合且つ、非表示フラグ未使用時のみ対応）
const paidyfig = document.querySelector('._paidy-promotional-messaging');
if (document.getElementById("itemPrc") != null && paidyfig .classList.length > 0) {
const priceSelector = document.querySelector("#pi_cart > table.spec");
// ウィジェット本体
const widget = document.querySelector("._paidy-promotional-messaging");
// 商品のバリエーションが選択された場合の処理
priceSelector.addEventListener("change", function (event) {
let Amount_change;
let nullcheck = document.querySelector("#itemPrc > span.selling_price");
if (nullcheck == null) {
//nullの場合は0を入れる
Amount_change = 0;
} else {
Amount_change = document.querySelector("#itemPrc > span.selling_price").innerHTML.slice(1);
if (!Amount_change) {
// blank だった場合の処理
Amount_change = 0;
}
}
switch (Amount_change) {
case 0:
//該当しない場合は0を入れて表示を消す
widget.setAttribute("data-amount", 0);　　
break;
default:
widget.setAttribute("data-amount", Amount_change);　　
break;
}
// ウィジェットのリフレッシュ
_paidy && _paidy("pm:refresh");
});
}; </script>
<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
■１２回払い用（１回、３回、６回、１２回払いが選択可能）
<script>
let Outdata = document.getElementsByClassName("itemOutline")[0].innerHTML;
var hanpuflg = Outdata.indexOf("icon_hanpu.gif");
var regularflg = Outdata.indexOf("icon_regular.gif");
//頒布会/定期/非表示フラグありのいずれかは場合は実行しない
if (hanpuflg < 0 && regularflg < 0 && document.getElementById("paidydispoff") === null) {
let product_price = document.getElementsByClassName('selling_price')[0].textContent.slice(1);
let paidy_div = document.getElementsByClassName('price')[0];
paidy_div.insertAdjacentHTML('afterend', '<div class="_paidy-promotional-messaging" data-amount="' + product_price + '" data-alignment="start" data-font-size="12px" data-6-pay-enabled data-12-pay-enabled></div>');
} </script>
<script>
//itemPrcがある場合みの動作する（リストボックス変更時に金額が変わる場合且つ、非表示フラグ未使用時のみ対応）
const paidyfig = document.querySelector('._paidy-promotional-messaging');
if (document.getElementById("itemPrc") != null && paidyfig .classList.length > 0) {
const priceSelector = document.querySelector("#pi_cart > table.spec");
// ウィジェット本体
const widget = document.querySelector("._paidy-promotional-messaging");
// 商品のバリエーションが選択された場合の処理
priceSelector.addEventListener("change", function (event) {
let Amount_change;
let nullcheck = document.querySelector("#itemPrc > span.selling_price");
if (nullcheck == null) {
//nullの場合は0を入れる
Amount_change = 0;
} else {
Amount_change = document.querySelector("#itemPrc > span.selling_price").innerHTML.slice(1);
if (!Amount_change) {
// blank だった場合の処理
Amount_change = 0;
}
}
switch (Amount_change) {
case 0:
//該当しない場合は0を入れて表示を消す
widget.setAttribute("data-amount", 0);　　
break;
default:
widget.setAttribute("data-amount", Amount_change);　　
break;
}
// ウィジェットのリフレッシュ
_paidy && _paidy("pm:refresh");
});
}; </script>
<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>

■ＰＣサイト ベーシックテンプレート用

すべての商品ページにウィジェットを一括で表示するには、以下の手順でscriptタグを設定します。

【 手順 】
  1. 管理画面メニュー「 デザイン設定 ＞ トップページ ＞ ヘッダとSEOの設定 」にアクセスします。
  2. 「 フッタの設定 」を「 標準 」から「 HTMLカスタマイズ（ベーシックテンプレート用/上級者向け） 」に切り替えます。
  3. 「 フッタHTML編集 」欄の既に入力されいているＨＴＭＬソースの一番下に、以下のscriptタグをすべてコピーして追加します。
  4. 画面の最下部にある「 設定を保存する 」ボタンをクリックします。
  5. 管理画面の左上「 お店ページの更新へ 」ボタンをクリックします。
  6. 「 更新を開始 」ボタンをクリックします。更新が完了すると、商品ページに反映されています。


ベーシックテンプレートの「 フッタHTML編集 」の入力欄に、あらかじめ入力されているＵＲＬはサンプル記述です。
「 標準 」から「 HTMLカスタマイズ（ベーシックテンプレート用/上級者向け） 」へ初めて切り替える場合は、記述を見直してください。
＞＞詳しくは、オンラインサポート「202」で検索

■３回払い用（１回、３回払いが選択可能）
<script>
let Outdata = document.getElementsByClassName("layoutp3")[0].innerHTML;
var hanpuflg = Outdata.indexOf("icon_hanpu.gif");
var regularflg = Outdata.indexOf("icon_regular.gif");
if (hanpuflg < 0 && regularflg < 0 && document.getElementById("paidydispoff") === null) {
let product_price = document.getElementsByClassName("price no2")[0].textContent.substring(0, document.getElementsByClassName("price no2")[0].textContent.indexOf("円")).slice(1);
let paidy_div = document.getElementsByClassName('layoutp3')[1];
paidy_div.insertAdjacentHTML('afterend', '<div class="_paidy-promotional-messaging" data-amount="' + product_price + '" data-alignment="start" data-font-size="12px"></div>');
} </script>
<script>
//itemPrc1タグがある場合みの動作する（リストボックス変更時に金額が変わる場合且つ、非表示フラグ未使用時のみ対応）
const paidyfig = document.querySelector('._paidy-promotional-messaging');
if(document.getElementById("itemPrc1") != null && paidyfig .classList.length > 0){
const priceSelector = document.querySelector("#pi_cart > form.shopping_form > table > tbody > tr > td:nth-child(2) > div.layoutp3 > table:nth-child(1) > tbody");
// ウィジェット本体
const widget = document.querySelector("._paidy-promotional-messaging");
// 商品のバリエーションが選択された場合の処理
priceSelector.addEventListener("change", function (event) {
let Amount_change;
let nullcheck = document.getElementById("itemPrc1");
console.log( "nullcheck :" + nullcheck);
if ( nullcheck == null){
Amount_change = 0;
}else{
Amount_change = document.getElementById("itemPrc1").textContent.substring(0, document.getElementById("itemPrc1").textContent.indexOf("円")).slice(0);
if (!Amount_change) {
// blank だった場合の処理
Amount_change = 0;
}
}
console.log(Amount_change);
switch(Amount_change){
case 0:
//該当しない場合は0を入れて表示を消す
widget.setAttribute("data-amount",0);
break;
default:
widget.setAttribute("data-amount",Amount_change);
break;
}
// ウィジェットのリフレッシュ
_paidy && _paidy("pm:refresh");
});
};
</script>
<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
■６回払い用（１回、３回、６回払いが選択可能）
<script>
let Outdata = document.getElementsByClassName("layoutp3")[0].innerHTML;
var hanpuflg = Outdata.indexOf("icon_hanpu.gif");
var regularflg = Outdata.indexOf("icon_regular.gif");
if (hanpuflg < 0 && regularflg < 0 && document.getElementById("paidydispoff") === null) {
let product_price = document.getElementsByClassName("price no2")[0].textContent.substring(0, document.getElementsByClassName("price no2")[0].textContent.indexOf("円")).slice(1);
let paidy_div = document.getElementsByClassName('layoutp3')[1];
paidy_div.insertAdjacentHTML('afterend', '<div class="_paidy-promotional-messaging" data-amount="' + product_price + '" data-alignment="start" data-font-size="12px" data-6-pay-enabled></div>');
} </script>
<script>
//itemPrc1タグがある場合みの動作する（リストボックス変更時に金額が変わる場合且つ、非表示フラグ未使用時のみ対応）
const paidyfig = document.querySelector('._paidy-promotional-messaging');
if(document.getElementById("itemPrc1") != null && paidyfig .classList.length > 0){
const priceSelector = document.querySelector("#pi_cart > form.shopping_form > table > tbody > tr > td:nth-child(2) > div.layoutp3 > table:nth-child(1) > tbody");
// ウィジェット本体
const widget = document.querySelector("._paidy-promotional-messaging");
// 商品のバリエーションが選択された場合の処理
priceSelector.addEventListener("change", function (event) {
let Amount_change;
let nullcheck = document.getElementById("itemPrc1");
console.log( "nullcheck :" + nullcheck);
if ( nullcheck == null){
Amount_change = 0;
}else{
Amount_change = document.getElementById("itemPrc1").textContent.substring(0, document.getElementById("itemPrc1").textContent.indexOf("円")).slice(0);
if (!Amount_change) {
// blank だった場合の処理
Amount_change = 0;
}
}
console.log(Amount_change);
switch(Amount_change){
case 0:
//該当しない場合は0を入れて表示を消す
widget.setAttribute("data-amount",0);
break;
default:
widget.setAttribute("data-amount",Amount_change);
break;
}
// ウィジェットのリフレッシュ
_paidy && _paidy("pm:refresh");
});
};
</script>
<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
■１２回払い用（１回、３回、６回、１２回払いが選択可能）
<script>
let Outdata = document.getElementsByClassName("layoutp3")[0].innerHTML;
var hanpuflg = Outdata.indexOf("icon_hanpu.gif");
var regularflg = Outdata.indexOf("icon_regular.gif");
if (hanpuflg < 0 && regularflg < 0 && document.getElementById("paidydispoff") === null) {
let product_price = document.getElementsByClassName("price no2")[0].textContent.substring(0, document.getElementsByClassName("price no2")[0].textContent.indexOf("円")).slice(1);
let paidy_div = document.getElementsByClassName('layoutp3')[1];
paidy_div.insertAdjacentHTML('afterend', '<div class="_paidy-promotional-messaging" data-amount="' + product_price + '" data-alignment="start" data-font-size="12px" data-6-pay-enabled data-12-pay-enabled></div>');
} </script>
<script>
//itemPrc1タグがある場合みの動作する（リストボックス変更時に金額が変わる場合且つ、非表示フラグ未使用時のみ対応）
const paidyfig = document.querySelector('._paidy-promotional-messaging');
if(document.getElementById("itemPrc1") != null && paidyfig .classList.length > 0){
const priceSelector = document.querySelector("#pi_cart > form.shopping_form > table > tbody > tr > td:nth-child(2) > div.layoutp3 > table:nth-child(1) > tbody");
// ウィジェット本体
const widget = document.querySelector("._paidy-promotional-messaging");
// 商品のバリエーションが選択された場合の処理
priceSelector.addEventListener("change", function (event) {
let Amount_change;
let nullcheck = document.getElementById("itemPrc1");
console.log( "nullcheck :" + nullcheck);
if ( nullcheck == null){
Amount_change = 0;
}else{
Amount_change = document.getElementById("itemPrc1").textContent.substring(0, document.getElementById("itemPrc1").textContent.indexOf("円")).slice(0);
if (!Amount_change) {
// blank だった場合の処理
Amount_change = 0;
}
}
console.log(Amount_change);
switch(Amount_change){
case 0:
//該当しない場合は0を入れて表示を消す
widget.setAttribute("data-amount",0);
break;
default:
widget.setAttribute("data-amount",Amount_change);
break;
}
// ウィジェットのリフレッシュ
_paidy && _paidy("pm:refresh");
});
};
</script>
<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>

■スマートフォンサイト用

スマートフォンサイトのすべての商品ページにウィジェットを一括で表示するには、以下の手順でscriptタグを設定します。

【 手順 】
  1. 管理画面メニュー「 スマートフォンサイト設定 ＞ 各種設定 ＞ ヘッダ・フッタ設定 」にアクセスします。
  2. 「 フッタ設定 ＞ 共通フッタ 」の「 編集 」ボタンをクリックします。
  3. 既に入力しているHTMLソースがある場合は、一番下に、以下のscriptタグをすべてコピーして追加します。
  4. 画面下部の「 閉じる 」ボタンをクリックします。
  5. 右上の「 お店ページに反映する 」ボタンをクリックします。更新が完了すると、商品ページに反映されています。


レスポンシブ対応テーマを利用中で、スマートフォンサイトはカートのみ使用している場合は設定不要です。

■３回払い用（１回、３回払いが選択可能）
<script>
let Outdata = document.getElementById("pi_name").innerHTML;
var hanpuflg = Outdata.indexOf(">頒布会<");
var regularflg = Outdata.indexOf(">定期購入<");
if (hanpuflg < 0 && regularflg < 0 && document.getElementById("paidydispoff") === null) {
let product_price = document.getElementsByClassName("productprice")[0].innerText.substring(2, document.getElementsByClassName("productprice")[0].innerText.indexOf("円")).slice(1);
let paidy_div = document.getElementsByClassName('productprice')[0];
paidy_div.insertAdjacentHTML('afterend', '<div class="_paidy-promotional-messaging" data-amount="' + product_price + '" data-alignment="start" data-font-size="12px"></div>');
} </script>
<script>
//variationPriceがある場合みの動作する（リストボックス変更時に金額が変わる場合且つ、非表示フラグ未使用時のみ対応）
const paidyfig = document.querySelector('._paidy-promotional-messaging');
if(document.getElementById("variationPrice") != null && paidyfig .classList.length > 0){
const priceSelector = document.querySelector("#pi_cart > form > table:nth-child(2)");
// ウィジェット本体
const widget = document.querySelector("._paidy-promotional-messaging");
// 商品のバリエーションが選択された場合の処理
priceSelector.addEventListener("change", function (event) {
let Amount_change;
let nullcheck = document.getElementById("variationPrice");
console.log( "nullcheck :" + nullcheck);
if ( nullcheck == null){
Amount_change = 0;
}else{
Amount_change = document.getElementById("variationPrice").textContent.substring(0, document.getElementById("variationPrice").textContent.indexOf("円")).slice(0);
if (!Amount_change) {
// blank だった場合の処理
Amount_change = 0;
}
}
console.log(Amount_change);
switch(Amount_change){
case 0:
//該当しない場合は0を入れて表示を消す
widget.setAttribute("data-amount",0);
break;
default:
widget.setAttribute("data-amount",Amount_change);
break;
}
// ウィジェットのリフレッシュ
_paidy && _paidy("pm:refresh");
});
};
</script>
<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
■６回払い用（１回、３回、６回払いが選択可能）
<script>
let Outdata = document.getElementById("pi_name").innerHTML;
var hanpuflg = Outdata.indexOf(">頒布会<");
var regularflg = Outdata.indexOf(">定期購入<");
if (hanpuflg < 0 && regularflg < 0 && document.getElementById("paidydispoff") === null) {
let product_price = document.getElementsByClassName("productprice")[0].innerText.substring(2, document.getElementsByClassName("productprice")[0].innerText.indexOf("円")).slice(1);
let paidy_div = document.getElementsByClassName('productprice')[0];
paidy_div.insertAdjacentHTML('afterend', '<div class="_paidy-promotional-messaging" data-amount="' + product_price + '" data-alignment="start" data-font-size="12px" data-6-pay-enabled></div>');
} </script>
<script>
//variationPriceがある場合みの動作する（リストボックス変更時に金額が変わる場合且つ、非表示フラグ未使用時のみ対応）
const paidyfig = document.querySelector('._paidy-promotional-messaging');
if(document.getElementById("variationPrice") != null && paidyfig .classList.length > 0){
const priceSelector = document.querySelector("#pi_cart > form > table:nth-child(2)");
// ウィジェット本体
const widget = document.querySelector("._paidy-promotional-messaging");
// 商品のバリエーションが選択された場合の処理
priceSelector.addEventListener("change", function (event) {
let Amount_change;
let nullcheck = document.getElementById("variationPrice");
console.log( "nullcheck :" + nullcheck);
if ( nullcheck == null){
Amount_change = 0;
}else{
Amount_change = document.getElementById("variationPrice").textContent.substring(0, document.getElementById("variationPrice").textContent.indexOf("円")).slice(0);
if (!Amount_change) {
// blank だった場合の処理
Amount_change = 0;
}
}
console.log(Amount_change);
switch(Amount_change){
case 0:
//該当しない場合は0を入れて表示を消す
widget.setAttribute("data-amount",0);
break;
default:
widget.setAttribute("data-amount",Amount_change);
break;
}
// ウィジェットのリフレッシュ
_paidy && _paidy("pm:refresh");
});
};
</script>
<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>
■１２回払い用（１回、３回、６回、１２回払いが選択可能）
<script>
let Outdata = document.getElementById("pi_name").innerHTML;
var hanpuflg = Outdata.indexOf(">頒布会<");
var regularflg = Outdata.indexOf(">定期購入<");
if (hanpuflg < 0 && regularflg < 0 && document.getElementById("paidydispoff") === null) {
let product_price = document.getElementsByClassName("productprice")[0].innerText.substring(2, document.getElementsByClassName("productprice")[0].innerText.indexOf("円")).slice(1);
let paidy_div = document.getElementsByClassName('productprice')[0];
paidy_div.insertAdjacentHTML('afterend', '<div class="_paidy-promotional-messaging" data-amount="' + product_price + '" data-alignment="start" data-font-size="12px" data-6-pay-enabled data-12-pay-enabled></div>');
} </script>
<script>
//variationPriceがある場合みの動作する（リストボックス変更時に金額が変わる場合且つ、非表示フラグ未使用時のみ対応）
const paidyfig = document.querySelector('._paidy-promotional-messaging');
if(document.getElementById("variationPrice") != null && paidyfig .classList.length > 0){
const priceSelector = document.querySelector("#pi_cart > form > table:nth-child(2)");
// ウィジェット本体
const widget = document.querySelector("._paidy-promotional-messaging");
// 商品のバリエーションが選択された場合の処理
priceSelector.addEventListener("change", function (event) {
let Amount_change;
let nullcheck = document.getElementById("variationPrice");
console.log( "nullcheck :" + nullcheck);
if ( nullcheck == null){
Amount_change = 0;
}else{
Amount_change = document.getElementById("variationPrice").textContent.substring(0, document.getElementById("variationPrice").textContent.indexOf("円")).slice(0);
if (!Amount_change) {
// blank だった場合の処理
Amount_change = 0;
}
}
console.log(Amount_change);
switch(Amount_change){
case 0:
//該当しない場合は0を入れて表示を消す
widget.setAttribute("data-amount",0);
break;
default:
widget.setAttribute("data-amount",Amount_change);
break;
}
// ウィジェットのリフレッシュ
_paidy && _paidy("pm:refresh");
});
};
</script>
<script src="https://cdn.paidy.com/promotional-messaging/general/paidy-upsell-widget.js" defer="defer"></script>