QRコード(クイックレスポンスコード)は、ユーザーが携帯電話でスキャンできるバーコードのタイプです。QRコードを使ってStripeの支払いフォームを表示すれば、カスタマイザーが簡単に商品やサービスを購入できます。
現在、多くのWordPressユーザーがサイトにQRコードを追加し、オンライン決済を受け入れることが難しいと感じています。そんなあなたのために、私たちは様々なプラグインをテストし、使ってみました。
経験上、最も簡単な方法は、WPFormsを使用してStripeの支払いフォームを作成し、Google Chromeのブラウザー設定またはShortcodes Ultimateプラグインを使用してフォーム用のQRコードを作成することです。
この投稿では、WordPressでStripeのQRコード決済を追加する方法をご紹介します。
なぜ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サイトのアカウントエリアにあります。
キーを入力し、「Verify Key」ボタンをクリックするだけです。
それが完了したら、WPForms ” Addonsのページに行き、Stripeアドオンをインストールする必要があります。
先に進み、’Install Addon’ボタンをクリックすると、WPFormsが自動的にインストールして有効化します。
ここから、WordPressの管理画面からWPForms ” Settingsに向かい、’Payments’タブに行くことができます。
次に’Connect with Stripe’ボタンをクリックし、画面の指示に従ってアカウントとWPFormsを接続します。
Stripeを接続したら、WPForms ” Add Newで新規フォームを作成します。
WPFormsにはたくさんのフォームテンプレートが用意されています。シンプルなお問い合わせフォーム、注文フォーム、Stripe支払いフォームを選択し、カスタマイズすることができます。
このチュートリアルでは、’Stripe Payment Form’テンプレートを使用します。
次に、ドラッグアンドドロップフォームビルダーを使ってフォームをカスタマイズします。初期設定では、テンプレートにさまざまなフォームフィールドが表示されます。
しかし、WPFormsでは、ドロップダウン、チェックボックス、メール、電話、住所、サイトなど、より多くのフォームフィールドをテンプレートに追加することができます。
テンプレート上のフォームフィールドをクリックして、さらにカスタマイズすることもできます。
例えば、デモフォームの各項目のテキストを変更し、項目ラベルの後に価格を表示するオプションを有効化しました。
フォームの編集が終わったら、’Payments’タブに切り替え、左のメニューから’Stripe’を選択するだけです。
ここから、’Enable Stripe payments’オプションが有効化されていることを確認します。
次に、「設定」タブに切り替えます。ここでは、通知と確認の設定を変更するオプションが表示されます。
例えば、ユーザーがフォームを送信したらどのようなアクションを実行するかを選択できます。WPFormsではメッセージやページを表示したり、ユーザーをURLにリダイレクトすることもできます。
これでサイトにStripe決済フォームを表示する準備が整いました。
保存」ボタンをクリックして変更を保存し、上部の「埋め込み」ボタンをクリックするだけです。
次にWPFormsはポップアップを表示し、既存のページを選択するか、フォームを埋め込むための新しいページを作成します。
このチュートリアルでは「既存のページを選択する」オプションを選択します。
次に、新しいページの名前を入力する必要があります。
それが完了したら、「Let’s Go」ボタンをクリックするだけだ。
その後、WordPressコンテンツエディターにStripe支払いフォームのプレビューが表示されます。
さっそくページを公開し、サイトを訪れてその動きを見てみよう。
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コードを作成」オプションを選択するだけです。
その後、Google ChromeがStripe支払いフォームページ用のQRコードを生成します。
QRコードを画像としてダウンロードすることができます。
次に、サイト上の任意の場所に画像を配置するだけです。
例えば、商品ページにQRコードを表示することで、カスタマイザーがQRコードを素早く読み取り、フォームを開いて購入することができます。
2.WordPressプラグインを使ってStripe決済QRコードを作成する
Shortcodes UltimateのようなWordPressプラグインを使えば、サイトにQRコードを追加することができます。これは無料のプラグインで、QRコードを含む50種類以上のショートコードを作成することができます。さらに詳しくは、Shortcodes Ultimateのレビューをご覧ください。
まず、Shortcodes Ultimateプラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。
有効化すると、ショートコードアルティメイトのウェルカム画面が表示されます。
次に、QRコードを追加するためにページや投稿を編集する必要があります。
コンテンツエディターに入ったら、ショートコードブロックを追加するだけです。
その後、「ショートコードを挿入」オプションが表示されるはずです。
二重カギカッコのアイコンをクリックするだけで、QRコードを追加できます。
次に、プラグインはあなたのサイトにさまざまなショートコードオプションを表示します。
QRコード」オプションを設定してください。
その後、QRコードの詳細を入力するオプションが表示されます。
データフィールドには、先ほど作成したStripe支払いフォームのURLを入力します。
そのほかに、コードのタイトルを入力するオプションがあり、これはaltテキストの役割を果たします。また、QRコードのサイズを調整することもできます。
下にスクロールすると、QRコードをカスタマイズするためのオプションが表示されます。例えば、原色や背景色などを変更することができます。
完了したら、「ショートコードを挿入」ボタンをクリックするだけです。
このプラグインでは、ブログ投稿日やランディングページでコードのライブプレビューを見ることもできます。
ページを公開して、Stripe支払いフォームのQRコードを実際に見てみましょう。
この投稿が、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.
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!