Houn

記事内に広告を含む場合があります

詳しく見る
キャッシュレス決済

公開日:2023.10.19

更新日:2024.06.19

PayPal決済ボタンの作りかた【2024年版】

決済ボタンのサンプル画像
↑画像でのサンプル

PayPal(ペイパル)で、ウェブサイトに設置して使う決済ボタンの作りかたを解説します。

決済内容を設定すればHTMLコードが自動作成されますので、サイトに貼り付けだけ出来れば大丈夫、知識は不要です。

PayPalボタンのHTMLコード
コードの貼り付けができればOK
コストは
  • 決済手数料3.6%+40円
  • 売上入金時の振込手数料250円(5万円以上は無料)

で、ほかはすべて無料で使えます。

【追記・重要】既存のボタン機能は廃止。代替機能ではプログラミング知識が必要

じつは当記事で解説している決済ボタンの作りかたは、2023年11月に廃止されております。

当記事は以前からPayPalに備わっていた「今すぐ購入」「カートに入れる」という種類のボタン作成方法を解説した記事ですが、現在は当機能が廃止されており(*)、代替で「スマートボタン」という新機能が用意されています。
*アカウントによっては旧ボタンが使える場合もありますが、非推奨とのことです

ただこちらの「スマートボタン」はプログラミング知識が必要、さらに解説も英語なので、技術者でないと作成が難しいです。

公式の解説ページ「Integrate PayPal Checkout」

↑動画による解説

推奨の代替サービスSquareについて

ITエンジニア

大丈夫!
僕はプログラムが書けるから、解説見ながらできそうだよ。

というかたでない限りは、別のサービスを利用が良いでしょう。

筆者はSquare(スクエア)が推奨です。

Square公式サイト(※掲載されている機器の購入は不要です)

Squareは、Twitter創業者のジャック・ドーシー氏が設立した決済サービスで2013年に日本上陸。

三井住友カードと業務提携しており、安心して使えるサービスです。

店頭決済で有名ですがPayPal同様のオンライン決済機能が揃っており、もちろん決済機器は不要なので無料で始められます

Squareで使える決済機能
決済ボタン作成は「オンラインチェックアウト」機能を活用
\アカウント作成で利用可/ Square公式サイト 無料・5分で完了

決済ボタンの作成方法(関連記事)

Squareでは専門知識なしで、簡単にボタンの作成が可能。

作成方法は以下の記事で解説しています。

サンプルも掲載してますので、ご参考ください。

Square・PayPalの比較

SquarePayPal
固定費や違約金なしなし
決済手数料3.6%3.6%+40円
売上の入金毎週自動入金
(みずほ・三井住友銀行は翌営業日)
金額に関わらず手数料無料
手動で振込申請
(自動振替設定も可)
5万円未満だと振込手数料250円
電話サポート土日も営業
通話料無料

混み合っているときは折り返してくれる
土日休み
携帯電話からは有料

Square・PayPalの各種条件を比較してみました。

両社とも月額固定費や違約金などは無料のため、かかるお金は決済手数料のみです。

海外販売ならPayPalが強いですが、あなたのビジネスが国内向けであればSquareを推奨します。

\アカウント作成はこちら/ Square公式サイト 無料・5分で完了

関連記事:Squareで決済ボタンを作成する方法

Squareアカウント作成後、どうやって決済ボタンを作成するか?についても当サイトで解説しています。

あわせてご参考ください↓

あなたのサイトがWordPressで作られているのであれば、以下がより分かりやすいです(プラグイン不要)↓

アカウントを作成に必要なのは
  • 口座情報(売上入金用)
  • 運転免許証などの身分証

でネット完結、無料です。

使い心地を試してみてください。

\アカウント作成はこちら/ Square公式サイト 無料・5分で完了

(PayPalボタン廃止に伴う追記部分は以上になります)

【実施前に確認】支払い側もPayPalアカウントが必要

PayPalは販売側だけでなく支払い側、つまりあなたの顧客もPayPalアカウント登録が必要になります。

決済画面でPayPalアカウントのログインもしくは登録を求められ、直接カードで支払うことができません。

PayPalの決済画面。選択肢がログインもしくは新規登録のみ

詳しくは以下の記事で解説しています↓

【本題】決済ボタンの作成ページはどこか?

ここから記事の本題、PayPalで決済ボタンを作成していきましょう。

まずは作成ページの開きかたから解説します。

画面構成が変更され、どこから作成ページを開くか分かりづらくなりました。

PayPal管理画面トップページ
  1. アカウント名
  2. アカウント設定

をクリック。

ウェブペイメント画面
  1. ウェブペイメント
  2. PayPal決済ボタン-更新

をクリック。

PayPalボタンの種類一覧画面

こちらがボタン作成画面です。

用途に合わせてボタンの種類を選択できるようになっています。

決済ボタン作成の手順

ボタンの種類一覧から選択

それでは、決済ボタンを作成していきましょう。

本記事で解説するのは単発商品のボタンなので

  • 「今すぐ購入」ひとつの商品を購入用。すぐに決済画面に移るボタン
  • 「カートに入れる」複数の商品を販売用

あなたの用途に合うほうをクリックすると、以下の作成画面が開きます。

今すぐ購入ボタン新規作成画面

*本記事では「今すぐ購入」ボタン作成画面で解説していきますが、「カートに入れる」ボタンでも作成画面は同様です。

それでは、ひとつずつ入力項目を解説していきます。

製品情報

製品情報
  1. 販売する商品の名前です
  2. 販売価格。通貨が初期状態ではUSD(アメリカドル)になっているので、日本円にするなら「JPY」を選択します
  3. 任意ですが、商品の在庫を追跡管理(このあと解説します)する場合に必要です

ボタンの外観をカスタマイズする

ボタンの外観をカスタマイズする

ボタンのデザイン変更や、商品のバリエーション選択などを設定できます。

なお、設定変更すると右側の「ボタンのプレビュー」がリアルタイムで切り替わるので、確認しながらカスタマイズ可能です。

このうち

  • ボタンのサイズ
  • ボタンのテキストを選択
  • 国と言語(日本で販売するなら「日本-日本語」を選択)
  • 対応しているカードのロゴを表示(カードブランド表示の有無)

については、さほど説明は不要かと思いますので、それ以降について解説します。

カスタムボタンの画像を使用する

カスタムボタンの画像を使用する

自分で作成した画像をボタンにできます。

ただ、画像をPayPalに直接アップロードではなく、どこかにアップロードした画像URLを貼り付ける方法です。

少し面倒なので、こだわりがなければ不要です。

商品の説明および料金設定(任意)-ドロップダウンメニューを追加

商品の説明および料金設定

商品に対して色やサイズなどバリエーションを追加、顧客が選択できるようにします。

さらにバリエーションごとに価格を設定も可能です。

カスタムリクエスト用のメッセージボックスを追加

カスタムリクエスト用のメッセージボックスを追加

顧客が自由に書き込める備考欄がボタンに追加されます。

追跡オプション

追跡オプション

最上部「PayPalでボタンを保存」は固定で操作ができませんので、以降の「在庫の追跡」から解説していきます。

在庫の追跡・損益の追跡

在庫・損益の追跡

「在庫の追跡」にチェックを入れると、その下の項目「追跡に関する設定」で、在庫数や通知メールを送信する数量の設定。

また「損益の追跡」にチェックを入れることで、管理画面から商品ごとの損益を確認できるようになります。

売り切れた商品を買い手が購入できるようにしますか?

売り切れた商品を買い手が購入できるようにしますか?

こちらは分かりやすいですね。

在庫がゼロになったときも購入できるようにするか?「売り切れ」として購入不可にするか?の設定です。

オプションの設定

オプションの設定アコーディオンボタン

「オプションの設定」をクリックすると、商品に特定の消費税や送料、購入後に表示させるページの指定などができます。

消費税、配送料を設定する

消費税、配送料を設定する

商品に適用する消費税、また配送する商品の場合は送料を設定できます。

チェックアウトページのカスタマイズ

チェックアウトページのカスタマイズ

チェックアウト(決済手続き)ページのカスタマイズができます。

ひとつずつ見ていきましょう。

顧客の配送先住所の情報をリクエストしないでください
顧客の配送先住所の情報をリクエストしないでください

チェックを入れると、決済画面から商品配送先の住所入力欄がなくなります。

デジタルデータなど、配送を必要としない商品の場合にはチェックを入れましょう。

復帰URL・支払いがキャンセルされた後のURL
復帰URL・支払いがキャンセルされた後のURL

復帰URLなら「お買い上げありがとうございました」
支払いがキャンセルされた後のURLであれば「購入手続きが完了しておりません」
といった具合に、あなたがサイトに用意したページのURLに飛ばすことができます。

もちろん、オプション設定なので空欄でも大丈夫です。

詳細な変数
詳細な変数

「変数」と呼ばれる、PayPalのプログラムを追加して細かな設定をする項目ですが、高度な設定につき本記事では割愛します。

操作自体はPayPalで用意されているプログラム文字を、1行ずつ貼り付けるだけです。

変数一覧は以下のページ(英語)から確認できますので、必要に合わせて活用してみてください。

HTML Variables for PayPal Payments Standard

ボタンをウェブサイトに設置する

設定項目は以上です。

「ボタンを保存して作成」ボタン

完了したらページ最下部「ボタンを保存して作成」をクリックします。

生成されたPayPalボタンコード

ボタンをあなたのウェブサイトに設置するためのコードが出来上がりますので「コードをコピーします」をクリック。

あとは貼り付けるだけで完了です!

WordPressで作られたサイトであれば「カスタムHTMLブロック」の利用が良いですね。

WordPressでカスタムHTMLブロックを選択
カスタムHTMLブロックを選択
コピーしたボタンのコードを貼り付け
コピーしたボタンのコードを貼り付け

保存したボタンを確認・編集する

作成したボタンはPayPalに保存され、内容や貼り付けコードの再確認や編集、複製ができます。

「PayPalボタンを作成する」画面

ボタン作成画面の右上「保存したボタンを表示する」をクリック。

保存済みボタン一覧画面

作成・保存済みボタン一覧画面が開きますので

  1. ボタン名横の「開く」
  2. おこないたい操作

をクリックします。

サイトに設置したボタンに変更を加える場合は、貼り直しが必要

サイトに設置済みの決済ボタンに対して、価格など商品内容を変更したい場合。

ボタンを編集

「ボタンを編集」から変更を加えて再保存するわけですが、サイトに設置済みのボタンには変更が適用されません。

コードが新しくなりますので、再度貼り付けが必要になります。

まとめと関連記事

以上で、PayPalで決済ボタンを作成しサイトに設置、あなたの商品をオンライン販売できるようになります。

あとは実際に商品を販売して売れたあと、売上金を引き出すのに手動で操作の必要があります。

引き出しかたについて以下の記事で作成しましたので、あわせて参考にしてみてください。