ペイパル(PayPal)で支払いページごとにデザインをカスタマイズする方法。

ペイパルの決済ボタンを使って支払いページを作ると初期設定では白背景にヘッダーにはアカウントの名前が表示されます。(詳細は前回記事:ペイパル(paypal)で事前に参加費用を支払ってもらう方法。ボタンの作り方。をご覧ください。

・支払いページ初期設定の場合

paypal_変更1

デザイン自体を遷移前のページ(ボタンを設置するページ)に合わせたい場合や、アカウントの名前を表示したくない場合、ヘッダーにイベント情報や販売する商品の情報を表示したい場合など、この支払いページを編集したい場合は多いと思います。

今回はその方法を紹介。また支払いページごとにデザインを設定する方法も合わせて紹介します。


スポンサーリンク

支払いページのページスタイルを作成する

まずは支払いページのページスタイルを作成します。

1.「アカウント設定」 → 「プロフィール設定」

paypal_ボタン作成1

2.「販売ツール」 → 「支払いページのカスタマイズ」

paypal_ページデザイン1

3.ページスタイルを新規登録する

paypalページデザイン4

次のページでは支払いページのページスタイルを選択することができます。

この画面でページスタイルは「PayPal」がメインに設定(初期設定)されているため、アカウントの名前がそのまま表示されています。

このページで「登録」ボタンをクリックして新規ページスタイルを作成できます。

paypal_ページデザイン2

入力項目は以下の7つ。そのうち重要なのは赤文字の3つになります。それぞれ名前から想像できると思うので赤文字以外は省略します。

・ページスタイル名

ページスタイルの管理に使います。

上の3.でページスタイルを選択するときに表示される名称です。また、この後に紹介する支払いページごとにページスタイルを指定するときにも使用します。

・ロゴ画像のURL

カートエリアの上部(画面全体では左寄り)に表示される画像です。

画像サイズは横190px × 縦60pxとなります。

paypal_logo

・ヘッダー画像のURL

画面上部のヘッダー画像に表示される画像です。

画像サイズは横750px × 縦90pxとなります。

paypal_header

ペイパルの支払いページの構成は2種類あり、どちらが使われるかを明確に指定することができません(調べ不足だったらすみません)

この支払いページの構成によりロゴが表示されるかヘッダーが表示されるか分かれるため、ロゴ画像とヘッダー画像は両方設定する必要があります。

・カートエリアの階調色

・ヘッダーの背景色

・ヘッダーの境界色

・背景色

入力が終わったら画面下部の「保存」ボタンをクリックして完了です。

paypal_ページデザイン3

作成時に入力した「ページスタイル名」のページスタイルが選択可能になっています。(ここではpage_change_test)

ここで”メインとして設定“することにより、個別にページスタイルを設定していないときに使用されるページスタイルとなります。

再度決済ボタンを押して支払いページに遷移するとデザインが変わっています。

(下記はロゴが表示されたケース)

paypal_ボタン編集3

個別にページスタイルを設定する

次に個別にページスタイルを指定する方法を紹介します。

作成したページスタイルを「メインとして設定」することにより、デフォルトのアカウント名の表示から変更することはできますが一括で全ての支払いページのページスタイルが変更されます。これでは支払いページを複数使用している場合、ヘッダーやロゴに商品名、イベント名などを表示することができません。

支払いページごとにページスタイルを指定する場合、ボタンを編集して個別にページスタイルを設定する必要があります。

1.「アカウント設定」 → 「プロフィール設定」 → 「販売ツール」 → 「PayPalボタン」

paypal_ボタン編集

2.「操作」 → 「ボタンの編集」

paypal_ボタン編集1

この画面では作成したボタンがすべて表示されます。

修正したい商品名を選んで右側の「操作」 → 「ボタンの編集」の順にクリックします。

3.ステップ3:高度な機能をカスタマイズする(オプション)

paypal_ボタン編集2

ボタンの編集をクリックすると、最初にボタンを作成したときの画面に遷移します。

ボタン作成時は「ステップ1:ボタンタイプを選択して支払いの詳細を入力する」を使用しましたが、ページスタイルを設定するときは「ステップ3:高度な機能をカスタマイズする(オプション)」を使用します。

一番下に「高度な変数を追加する」という項目があります。ここに以下を入力します。

page_style=指定するページスタイル名

(例:page_style=page_change_test)

指定するページスタイルは上の方で作成したページスタイル名です。ここで設定することにより指定したページスタイルが適用されます。設定しない場合はメインとして設定されたページスタイルが適用されます。

個別にページスタイルを適用したい方は1度試してみてください。

※この記事は2016年6月時点のサービスを利用しています。ペイパルの変更により方法は変わる可能性があります。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク