Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでStripe QRコード決済を追加する方法

QRコード(クイックレスポンスコード)は、ユーザーが携帯電話でスキャンできるバーコードのタイプです。QRコードを使ってStripeの支払いフォームを表示すれば、カスタマイザーが簡単に商品やサービスを購入できます。

現在、多くのWordPressユーザーがサイトにQRコードを追加し、オンライン決済を受け入れることが難しいと感じています。そんなあなたのために、私たちは様々なプラグインをテストし、使ってみました。

経験上、最も簡単な方法は、WPFormsを使用してStripeの支払いフォームを作成し、Google Chromeのブラウザー設定またはShortcodes Ultimateプラグインを使用してフォーム用のQRコードを作成することです。

この投稿では、WordPressでStripeのQRコード決済を追加する方法をご紹介します。

How to add Stripe payment QR code payment in WordPress

なぜWordPressにStripe QRコード決済を追加するのか?

Stripeは、WordPressサイトやeコマースストアでのオンライン決済を可能にする人気の決済ゲートウェイです。これにより、カスタマイザーはクレジットカードを使って簡単に支払いを行うことができます。

一番の利点は、カスタマイザーが面倒な登録手続きをする必要がないことだ。サイト上でクレジットカードを入力するだけで購入できるのだ。

Stripe QRコード決済をサイトに追加すると、カスタマイザーは柔軟に素早く購入を完了できます。カスタマイザーはコードをスキャンするだけで決済リンクを開くことができます。

これにより、購入手続きは非常にシンプルかつ迅速になります。あなたのオンラインストアで商品やサービスを簡単に購入することができます。その結果、コンバージョンが向上し、お買い物カゴの放棄が減少します。

それでは、WordPressサイトにStripe QRコード決済を追加する方法を見てみましょう。

WordPressでStripe決済フォームを作成する

まず、サイト上にStripeの支払いフォームを追加し、カスタマイザーからのオンライン支払いを受け付ける必要があります。

それにはWPFormsを使うのが一番です。WPFormsはWordPress用の最高のお問い合わせフォームプラグインで、とても使いやすく、Stripeとも簡単に統合できます。多くのフォームテンプレートがあり、ドラッグアンドドロップビルダーを使ってカスタマイズすることができます。

このチュートリアルでは、Stripeアドオンが含まれているため、WPForms Proライセンスが必要です。無料で使えるWPForms Lite版もあります。Stripeの支払いを受け付けることができますが、フォームからの支払いには3%の手数料がかかります。

まずはWPFormsプラグインをダウンロードしてインストールしてください。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドを参照してください。

有効化した後、WordPressダッシュボードからWPForms ” 設定に移動し、ライセンスキーを入力することができます。キーはWPFormsサイトのアカウントエリアにあります。

Adding a license key to the WPForms form builder plugin

キーを入力し、「Verify Key」ボタンをクリックするだけです。

それが完了したら、WPForms ” Addonsのページに行き、Stripeアドオンをインストールする必要があります。

Installing the Stripe addon

先に進み、’Install Addon’ボタンをクリックすると、WPFormsが自動的にインストールして有効化します。

ここから、WordPressの管理画面からWPForms ” Settingsに向かい、’Payments’タブに行くことができます。

次に’Connect with Stripe’ボタンをクリックし、画面の指示に従ってアカウントとWPFormsを接続します。

Click the connect with Stripe button

Stripeを接続したら、WPForms ” Add Newで新規フォームを作成します。

WPFormsにはたくさんのフォームテンプレートが用意されています。シンプルなお問い合わせフォーム、注文フォーム、Stripe支払いフォームを選択し、カスタマイズすることができます。

Stripe payment form

このチュートリアルでは、’Stripe Payment Form’テンプレートを使用します。

次に、ドラッグアンドドロップフォームビルダーを使ってフォームをカスタマイズします。初期設定では、テンプレートにさまざまなフォームフィールドが表示されます。

しかし、WPFormsでは、ドロップダウン、チェックボックス、メール、電話、住所、サイトなど、より多くのフォームフィールドをテンプレートに追加することができます。

Customize Stripe payment form

テンプレート上のフォームフィールドをクリックして、さらにカスタマイズすることもできます。

例えば、デモフォームの各項目のテキストを変更し、項目ラベルの後に価格を表示するオプションを有効化しました。

Customize form field in stripe payment form

フォームの編集が終わったら、’Payments’タブに切り替え、左のメニューから’Stripe’を選択するだけです。

ここから、’Enable Stripe payments’オプションが有効化されていることを確認します。

Enable Stripe payments

次に、「設定」タブに切り替えます。ここでは、通知と確認の設定を変更するオプションが表示されます。

例えば、ユーザーがフォームを送信したらどのようなアクションを実行するかを選択できます。WPFormsではメッセージやページを表示したり、ユーザーをURLにリダイレクトすることもできます。

Confirmation settings form

これでサイトにStripe決済フォームを表示する準備が整いました。

保存」ボタンをクリックして変更を保存し、上部の「埋め込み」ボタンをクリックするだけです。

Save and embed your form

次にWPFormsはポップアップを表示し、既存のページを選択するか、フォームを埋め込むための新しいページを作成します。

このチュートリアルでは「既存のページを選択する」オプションを選択します。

Embed a form in page

次に、新しいページの名前を入力する必要があります。

それが完了したら、「Let’s Go」ボタンをクリックするだけだ。

Enter name for your new page

その後、WordPressコンテンツエディターにStripe支払いフォームのプレビューが表示されます。

さっそくページを公開し、サイトを訪れてその動きを見てみよう。

Stripe payment form preview

QRコードを作成するために必要なので、支払いフォームページへのリンクをコピーしてください。

別の方法 WP Simple Payを使ってStripeの支払いフォームを作成することもできます。WP Simple PayはWordPressに最適なStripe決済プラグインで、お買い物カゴを設置せずにオンライン決済を行うことができます。

WP Simple PayはWPFormsよりもわかりやすい設定です。クレジットカードでの支払いを受け付ける基本的なフォームを作成したい場合に最適です。

しかし、より多くのカスタマイザー設定やフォームテンプレートをお探しの場合は、WPFormsを使用することをお勧めします。

詳細については、WordPressでStripeを使用して支払いを受け付ける方法の詳細ガイドを参照してください。

WordPressでStripe決済用のQRコードを追加する

Stripe決済フォームの準備ができましたら、QRコードを作成してサイト上の任意の場所に表示することができます。

サイトにQRコードを追加する方法は2つあります。Google Chromeブラウザーの機能を使うか、WordPressのQRコードプラグインを使うかです。

1.Google Chromeを使ってQRコードを作成する

グーグル・クロームのブラウザーなら、QRコードを使ってウェブページを共有できる。

まず、Stripeの支払いフォームページを新しいタブまたはウィンドウで開きます。

次に、サイトのアドレスバーの右上にある共有アイコンをクリックします。ここから、「QRコードを作成」オプションを選択するだけです。

Click the share icon in chrome

その後、Google ChromeがStripe支払いフォームページ用のQRコードを生成します。

QRコードを画像としてダウンロードすることができます。

Download the QR code

次に、サイト上の任意の場所に画像を配置するだけです。

例えば、商品ページにQRコードを表示することで、カスタマイザーがQRコードを素早く読み取り、フォームを開いて購入することができます。

Add QR code to product page

2.WordPressプラグインを使ってStripe決済QRコードを作成する

Shortcodes UltimateのようなWordPressプラグインを使えば、サイトにQRコードを追加することができます。これは無料のプラグインで、QRコードを含む50種類以上のショートコードを作成することができます。さらに詳しくは、Shortcodes Ultimateのレビューをご覧ください。

まず、Shortcodes Ultimateプラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。

有効化すると、ショートコードアルティメイトのウェルカム画面が表示されます。

Shortcode ultimate welcome screen

次に、QRコードを追加するためにページや投稿を編集する必要があります。

コンテンツエディターに入ったら、ショートコードブロックを追加するだけです。

How to add a shortcode block to WordPress

その後、「ショートコードを挿入」オプションが表示されるはずです。

二重カギカッコのアイコンをクリックするだけで、QRコードを追加できます。

Click the select shortcode icon

次に、プラグインはあなたのサイトにさまざまなショートコードオプションを表示します。

QRコード」オプションを設定してください。

Select QR code shortcode

その後、QRコードの詳細を入力するオプションが表示されます。

データフィールドには、先ほど作成したStripe支払いフォームのURLを入力します。

そのほかに、コードのタイトルを入力するオプションがあり、これはaltテキストの役割を果たします。また、QRコードのサイズを調整することもできます。

Enter QR code details

下にスクロールすると、QRコードをカスタマイズするためのオプションが表示されます。例えば、原色や背景色などを変更することができます。

完了したら、「ショートコードを挿入」ボタンをクリックするだけです。

Click insert shortcode

このプラグインでは、ブログ投稿日やランディングページでコードのライブプレビューを見ることもできます。

ページを公開して、Stripe支払いフォームのQRコードを実際に見てみましょう。

QR code live preview

この投稿が、WordPressでStripe QRコード決済を追加する方法のお役に立てば幸いです。WordPressで定期的な支払いを受け入れる方法や、WordPressのベストクーポンプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

3件のコメント返信を残す

  1. Ralph

    Paying with QR code is more and more popular. I think it is becuase of its ease of use. It’s just faster than old methods and we want to save more and more time.

    I have a question – Scaning QR code with phone from laptop screen is easy, but is it also such a easy thing with smartphones themselves? I mean, i scroll website on my phone and see QR code, my phone do not recognize QR code like that, only with photo app. Is it normal or it’s just my phone and having qr code for mobile users is just as good as for desktop users?

    • WPBeginner Support

      It would depend on the phone, if you have not done so already you would want to try taking a screenshot with your phone.

      管理者

      • Ralph

        Oh, I did not think of that… Thank you for your suggestion, this should do the trick!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。