導入方法

製品名：ウェブペイメントプラス

実装概要

iframeの実装

1. ウェブサイトでコンパクト支払いフォームを表示する位置にiframeタグを入力します。

<iframe name="hss_iframe" width="570px" height="540px"></iframe>

コンパクト支払いフォームで使用可能なサイズは、幅570ピクセル、高さ540ピクセルです。

2. 以下のiframeコードでは、該当するウェブペイメントプラス変数(支払い合計金額を含む)が自動入力される非表示フォームを追加し、変数templateにTemplateDを指定します。モバイル最適化フローを表示するには、変数templateにmobileまたはmobile-iframeを渡します( レスポンシブル対応にするにはmobile-iframeを使った上で、UserAgentに合わせてiframeの幅を変更するような実装をいれてください)。

<form style="display:none" target="hss_iframe" name="form_iframe" method="post" action="https://securepayments.paypal.com/webapps/HostedSoleSolutionApp/webflow/sparta/hostedSoleSolutionProcess">
<input type="hidden" name="cmd" value="_hosted-payment">
<input type="hidden" name="subtotal" value="50">
<input type="hidden" name="currency_code" value="JPY">
<input type="hidden" name="business" value="HNZ3QZMCPBAAA">
<input type="hidden" name="paymentaction" value="sale">
<input type="hidden" name="template" value="templateD">
<input type="hidden" name="billing_address1" value="BillingAddress1">
<input type="hidden" name="billing_address2" value="BillingAddress2">
<input type="hidden" name="billing_city" value="Setagaya-ku">
<input type="hidden" name="billing_country" value="JP">
<input type="hidden" name="billing_first_name" value="BillingTaro">
<input type="hidden" name="billing_last_name" value="BillingTest">
<input type="hidden" name="billing_state" value="Tokyo">
<input type="hidden" name="billing_zip" value="123-4567">
</form>
            

businessにはPayPal管理画面に表示される「セキュアなマーチャントID」を記述します。

3. 下の例に示すように、ターゲット名がiframe名に一致していることを確認します。

<iframe name="hss_iframe" width="570px" height="540px"></iframe>
<form style="display:none" target="hss_iframe" name="form_iframe" method="post" action="https://securepayments.paypal.com/webapps/HostedSoleSolutionApp/webflow/sparta/hostedSoleSolutionProcess">
</form>

4. JavaScriptを使ってフォームを送信します。例を示します。

<script type="text/javascript">
document.form_iframe.submit();
</script>

PayPalアカウントの設定確認・変更

PayPalアカウント > アカウント設定 > プロフィール設定 > 販売ツール > ウェブペイメントプラスの設定に移動し以下の設定を確認、変更します。


  1. 「支払いの確認」ページ で「自社ウェブサイトの確認ページに表示します」を選択し「復帰URL」に決済フローの完了画面にあたるURLを設定します。

  2. URLおよびデータ転送 の「データ転送方法」の確認。デフォルトで「POST」になっていますが、POST転送に対応していない実装の場合は、「GET」に変更してください。

  3. 一般設定 の「支払いページのボタンのテキスト」の確認。クレジットカード支払い時のボタンの文言を変更したい場合は、こちらで変更します。