数多くのオンラインビジネスの構築と成長を支援してきた私たちは、よりスムーズなエクスペリエンスのためにチェックアウトを最適化することが、Eコマースサイトにとって最優先事項の1つであることを知っています。
そのため、ワンクリックのチェックアウトを作成することをお勧めします。
ワンクリックオプションでチェックアウトの摩擦を減らすことで、便利なショッピング体験を提供し、カスタマーエクスペリエンスを向上させ、コンバージョンを高めることができます。ユーザーがより早く取引を完了できるため、再来店の可能性も高まります。
この投稿では、WordPressでワンクリック購入手続きを作成し、売上を伸ばす方法を学びます。
![Create a One-Click Checkout Create a One-Click Checkout](https://www.wpbeginner.com/wp-content/uploads/2024/03/create-a-one-click-checkout-og-1.png)
なぜWordPressでワンクリック購入手続きが必要なのか?
長い購入手続きページは、購入を検討している訪問者を遠ざけてしまいます。購入手続きの項目をクリックし、不必要な情報や繰り返しの多い情報を入力しなければならないため、購入手続きが長引きます。
購入手続きが長引けば長引くほど、カスタマイザーがどこかでドロップアウトする可能性は高くなる。
平均カート放棄率は70.19%で、買い物客の22%が、長すぎたり複雑すぎたりするチェックアウトプロセスが放棄の理由であると回答している。
そこで、ワンクリックチェックアウトプロセスの登場です。購入ボタンを追加するだけの簡単な作業で、リピーターのお客様は合理化されたチェックアウトプロセスを楽しむことができます。
ワンクリック・チェックアウトは、顧客が購入のたびに配送先、請求先、支払い情報を入力することなく、ボタンをクリックするだけでオンラインで商品を購入できるようにする。
オートコンプリート機能と似ていますが、購入手続きページに行かなくてもサイトが自動的に処理を行うため、ユーザーがフィールドに入力する必要がない点が異なります。
訪問者はワンクリックで素早く購入を完了できるため、コンバージョン率の向上やカート放棄率の減少につながります。オンラインショップ、サービス業、会員制サイトなど、どのようなタイプのウェブサイトであっても、シンプルで簡単に売上を伸ばすことができます。
そこで、WordPressでワンクリック購入手続きを追加する5つの方法を取り上げます:
- Create a One-Click Checkout Using WPForms (Easy + Free Option)
- Create a One-Click Checkout Using WP Simple Pay (Multiple Payment Methods)
- Create a One-Click Checkout Using Easy Digital Downloads (Digital Products)
- Create a One-Click Checkout Using FunnelKit (eCommerce Stores)
- Create a One-Click Checkout Using WooCommerce (Free)
方法1:WPFormsを使用してWordPressでワンクリックチェックアウトを作成する(簡単+無料オプション)
WPFormsを使用すると、簡単に購入者のためのワンクリックのチェックアウト手続きを作成することができます。WPFormsはコードなしですべてのタイプのフォームを簡単に作成できるフォームビルダーです。
![WPForms](https://www.wpbeginner.com/wp-content/uploads/2020/04/wpforms-site-3.png)
ドラッグアンドドロップビルダーを使えば、Stripeの決済機能を使って簡単に支払いを集めることができるので、支払いフォーム、ユーザー登録フォーム、経費承認フォームなどを作成できます。また、2,000種類以上のテンプレートから選択できるため、どのようなフォームタイプでも見つけることができます。
新規: このチュートリアルではStripeとの統合のみを使用するので、WPForms Liteを使用することができます。しかし、あなたがより高度な機能をしたい場合は、プロバージョンをインストールすることをお勧めします。
まず、WPFormsプラグインをダウンロードして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。
有効化した後、WordPress管理ダッシュボードからWPForms ” 設定ページに移動します。次に、支払いタブに移動します。
Stripeの下にある’Connect with Stripe’ボタンを押してください。
![WPForms payments settings WPForms payments settings](https://www.wpbeginner.com/wp-content/uploads/2024/03/WPForms-payments-settings.png)
Stripe接続ウィザードにリダイレクトされ、既存のアカウントに接続するか、新規アカウントを作成します。
Stripe接続ウィザードの手順に従ってください。
![WPForms Stripe connection WPForms Stripe connection](https://www.wpbeginner.com/wp-content/uploads/2024/03/WPForms-Stripe-connection.png)
手順を完了すると、WordPressダッシュボードに戻ります。
StripeアカウントがWPFormsに接続されたことを示す緑のチェックマークが表示されるはずです。
![WPForms connection status confirmed WPForms connection status confirmed](https://www.wpbeginner.com/wp-content/uploads/2024/03/WPForms-connection-status-confirmed.png)
これで、サイト上での支払い受付を開始し、購入手続きフォームを作成する準備が整いました。
WPForms ” 新規追加 に進みます。ここからフォームに名前をつけることができます。
![Name your form in WPForms Name your form in WPForms](https://www.wpbeginner.com/wp-content/uploads/2024/03/Name-your-form-in-WPForms.png)
そして、あなたのニーズに合った支払いフォームのテンプレートを選びましょう。
このチュートリアルでは、Stripe Payment Formテンプレートを使用します。テンプレートの下にある’Use Template’をクリックします。
![Use template in WPForms Use template in WPForms](https://www.wpbeginner.com/wp-content/uploads/2024/03/Use-template-in-WPForms.png)
ドラッグ&ドロップのフォームエディターで、フォームを簡単にカスタマイズできます。
フィールドを追加したいときはいつでも、左側の「フィールドの追加」パネルから右側にドラッグ・アンド・ドロップするだけです。フィールドを編集するには、要素をクリックし、’フィールドオプション’で調整することができます。
![one-click-checkout form drag and drop editor one-click-checkout form drag and drop editor](https://www.wpbeginner.com/wp-content/uploads/2024/03/one-click-checkout-form-drag-and-drop-editor.png)
例えば、卸売りフォームを作成する場合、複数選択フィールドをラジオボタンで編集することができます。
次に要素をクリックし、「フィールド・オプション」でさまざまな商品を追加することができます。
![one-click checkout form field options one-click checkout form field options](https://www.wpbeginner.com/wp-content/uploads/2024/03/one-click-checkout-form-field-options.png)
Stripe Linkを有効化する必要があります。Stripe Linkは、すべてのカスタマイ詳細を安全に保存し、購入者があなたのサイトでその情報を再利用できるようにするワンクリックチェックアウトソリューションです。レベル1のPCI準拠サーバーを使用しているため、カスタマイザーのデータは暗号化され安全です。
Stripe Link購入手続きを有効化するには、StripeのSettings ” Payments ページにアクセスしてください。次に、支払い方法タブを開きます。
![Stripe payment methods Stripe payment methods](https://www.wpbeginner.com/wp-content/uploads/2024/03/Stripe-payment-methods.png)
ここから、Select Platformで’WPForms LLC’メニューを選択します。
StripeアカウントからWPFormsに利用可能な支払い方法をすべて接続します。
![Select platform in Stripe settings Select platform in Stripe settings](https://www.wpbeginner.com/wp-content/uploads/2024/03/Select-platform-in-Stripe-settings.png)
ページを下にスクロールすると、WPFormsのさまざまな支払い方法と設定が表示されます。
エクスプレスチェックアウトのリンクオプションが有効化されていることを確認してください。
![Stripe Link express checkout active Stripe Link express checkout active](https://www.wpbeginner.com/wp-content/uploads/2024/03/Stripe-Link-express-checkout-active.png)
その後、WordPressに戻って購入手続きの作成を完了します。Payments ” Stripeタブに移動します。
次に「ワンタイムペイメントを有効化」オプションをオンにし、Stripeをフォーム上で有効化します。
![Enable one time payments WPForms Enable one time payments WPForms](https://www.wpbeginner.com/wp-content/uploads/2024/03/Enable-one-time-payments-WPForms.png)
それが終わったら、『保存』ボタンを押す。
次に『埋め込み』をクリックする。
![embed WPForms embed WPForms](https://www.wpbeginner.com/wp-content/uploads/2024/03/embed-WPForms.png)
ポップアップメッセージが表示されるはずです。ここで、このフォームを既存のページに埋め込むか、新しいページを作成するかを選択できます。
すでに購入手続きページがあると仮定して、「既存のページを選択」ボタンを押します。
![select existing page to embed WPForms select existing page to embed WPForms](https://www.wpbeginner.com/wp-content/uploads/2024/03/select-existing-page-to-embed-WPForms.png)
フォームが自動的に選択したページに埋め込まれるはずです。
そこから上の「公開する」または「更新する」ボタンを押すだけだ。
![Publish one-click checkout page wpforms Publish one-click checkout page wpforms](https://www.wpbeginner.com/wp-content/uploads/2024/03/Publish-one-click-checkout-page-wpforms.jpeg)
購入手続きフォームをプレビューし、Stripeアカウントへの支払いが完了していることを確認してください。
有効化した後、Stripeに保存されているクレジットカード情報が事前に入力されます。
![stripe-link-checkout-wpforms stripe-link-checkout-wpforms](https://www.wpbeginner.com/wp-content/uploads/2024/03/stripe-link-checkout.gif)
Stripeアカウントをお持ちのカスタマイザーは、Linkを利用する際にワンタイムパスコードの入力を求められますのでご注意ください。
方法2:WP Simple Pay(複数の支払い方法)を使ってWordPressでワンクリックチェックアウトを作成する
![WP Simple Pay website WP Simple Pay website](https://www.wpbeginner.com/wp-content/uploads/2018/11/wpsimplepay.png)
WP Simple Payは、WordPressで1回払いや定期的な支払いを受け入れるためのもう一つの素晴らしいオプションです。ワンクリック購入手続きで様々な支払い方法を提供したい場合は、こちらの方が良いでしょう。
WP Simple Payは、デビット、クレジット、ACHデビット、Google Pay、Apple Pay、Venmoなど、13種類以上の支払い方法を提供しています。また、Klarnaを使用することで、顧客に「Buy Now Pay Later」のオプションを提供することができます。
WP Simple Pay プラグインをインストールし、有効化します。有効化すると、セットアップウィザードが表示され、サイト上で支払いを受け付けるプロセスを案内します。
![WP Simple Pay setup wizard WP Simple Pay setup wizard](https://www.wpbeginner.com/wp-content/uploads/2023/10/WP-Simple-Pay-setup-wizard-1-1.png)
手順をすべて守ってください。
Stripeアカウントとの接続も求められます。Stripeアカウントをお持ちでない場合は、アカウントを作成してください。
![connect-stripe-to-wpsimplepay](https://www.wpbeginner.com/wp-content/uploads/2024/03/connect-stripe-to-wpsimplepay.png)
セットアップ・ウィザードが完了すると、セットアップが完了したことを確認する成功ページが表示されます。
次に、WP Simple Pay ” 設定ページにアクセスします。Stripeタブで、Stripeアカウントが接続され、’Live Mode’になっていることを確認します。
![Stripe payment live mode Stripe payment live mode](https://www.wpbeginner.com/wp-content/uploads/2024/03/Stripe-payment-live-mode.png)
支払いフォームを作成する前に、Stripeリンクが有効化されていることを確認する必要があります。
これを行うには、設定 ” 一般タブに移動します。次に、「詳細設定」タブで「新規支払いエクスペリエンス」ボックスをチェックします。
![Use new payment experience Use new payment experience](https://www.wpbeginner.com/wp-content/uploads/2024/03/Use-new-payment-experience.png)
ここから、購入手続きのカスタマイザーを始める準備ができました。
WP Simple Pay ” Add Newにアクセスすると、利用可能なテンプレートのライブラリが表示されます。
あなたのニーズに合ったテンプレートを選ぶことができますが、このチュートリアルでは支払いフォームテンプレートを使用します。テンプレート名の下にある「テンプレートを使用する」を選択します。
![Use payment form template Use payment form template](https://www.wpbeginner.com/wp-content/uploads/2024/03/Use-payment-form-template.png)
次に、フォームビルダーが表示されます。Generalタブで必要な情報を入力します。
フォームにタイトルと説明を付けます。また、スパム投稿を防ぐために、CAPTCHAとEメール認証オプションをチェックすることもできます。
![general tab wp simple pay general tab wp simple pay](https://www.wpbeginner.com/wp-content/uploads/2024/03/general-tab-wp-simple-pay.png)
そこから「支払い」タブに移動し、価格設定と通貨オプションの調整を開始します。
また、価格設定を1回限りまたはサブスクリプションオプションに設定することもできます。
![payment tab wp simple pay payment tab wp simple pay](https://www.wpbeginner.com/wp-content/uploads/2024/03/payment-tab-wp-simple-pay.png)
その下には、幅広い支払い方法が用意されている。
承諾するオプションのチェックボックスをクリックします。
![payment methods wp simple pay payment methods wp simple pay](https://www.wpbeginner.com/wp-content/uploads/2024/03/payment-methods-wp-simple-pay.png)
フォームフィールド]タブでは、ドロップダウンメニューから必要なフィールドを選択し、[フィールドを追加]をクリックして追加することができます。また、既存のフィールドを編集することもできます。
Stripe Linkを有効化するには、メールアドレスのドロップダウンメニューを展開します。次に、’Offer Saved Payment Methods’の下のチェックボックスをクリックしてください。
![offer saved payment methods wp simple pay offer saved payment methods wp simple pay](https://www.wpbeginner.com/wp-content/uploads/2024/03/offer-saved-payment-methods-wp-simple-pay.png)
次にStripeアカウントにアクセスします。設定 ” ペイメントページに 移動します。
支払い方法」タブで、「プラットフォームの選択」ドロップダウンメニューから「WP Simple Pay」を選択します。
![Select Platform in Stripe as WP Simple Pay Select Platform in Stripe as WP Simple Pay](https://www.wpbeginner.com/wp-content/uploads/2024/03/Select-Platform-in-Stripe-as-WP-Simple-Pay.png)
その後、WordPressに戻り、支払いフォームのカスタマイザーを終了します。
完成したら、『公開する』を押してください。
![publish one click checkout form in WP Simple Pay publish one click checkout form in WP Simple Pay](https://www.wpbeginner.com/wp-content/uploads/2024/03/publish-one-click-checkout-form-in-WP-Simple-Pay.png)
これで、好きなページに移動して、新しく作成したフォームを追加できる。
アイコンをクリックし、WP Simple Payブロックを追加します。
![add WP Simple Pay block add WP Simple Pay block](https://www.wpbeginner.com/wp-content/uploads/2024/03/add-WP-Simple-Pay-block.png)
次に、先ほど作成した支払いフォームを選択すると、ページに表示されるはずです。
上部にある『公開する』または『更新する』ボタンをクリックしてください」。
![publish checkout form publish checkout form](https://www.wpbeginner.com/wp-content/uploads/2024/03/publish-checkout-form.png)
これでWP Simple Payを使ったワンクリック購入手続きは完了です。
フォームをプレビューして動作することを確認してください。
![payment form preview wp simple pay payment form preview wp simple pay](https://www.wpbeginner.com/wp-content/uploads/2024/03/payment-form-preview-wp-simple-pay.png)
方法3:Easy Digital Downloads(デジタル製品)を使ってWordPressでワンクリックチェックアウトを作成する
もしあなたがデジタル製品を販売しているなら、WordPressでワンクリック購入手続きを作成するのにEasy Digital Downloadsより優れたプラグインはありません。
50,000人以上のユーザーを持つこのプラグインは、eBook、PDF、音声ファイル、オンラインコース、テンプレートなどのデジタル製品を簡単に管理し、販売することができます。
![The Easy Digital Downloads website The Easy Digital Downloads website](https://www.wpbeginner.com/wp-content/uploads/2021/11/edd.png)
始めるには、Easy Digital Downloadsをインストールして有効化する必要があります。有効化すると、プラグインが自動的に購入手続きとお買い物カゴのページを作成します。
とはいえ、EDDで今すぐ購入ボタンを追加することで、ワンクリックの購入手続きを追加することができます。今すぐ購入ボタンは、自動的にお買い物カゴへの追加と購入手続きを回避し、カスタマイザーを直接支払いに送ります。
このチュートリアルでは、すでにEDDでデジタル製品を作成していると仮定します。しかし、まだお持ちでない方は、WordPressでデジタルダウンロードを販売する方法についての初心者ガイドをお読みください。
まず、WordPress管理画面のDownloads ” Settingsページにアクセスします。
Payments ” Stripeタブの下にある’Connect with Stripe’をクリックします。
![edd connect stripe edd connect stripe](https://www.wpbeginner.com/wp-content/uploads/2024/03/edd-connect-stripe.png)
Stripe Connectウィザードが表示されます。
既存のStripeアカウントに接続するか、新規アカウントを作成するだけです。
![Connect EDD with Stripe Connect EDD with Stripe](https://www.wpbeginner.com/wp-content/uploads/2024/03/Connect-EDD-with-Stripe.png)
接続が完了すると、WordPressに戻ります。
GeneralタブでStripeが支払いオプションの1つであることが確認できるはずです。
![active gateways stripe active gateways stripe](https://www.wpbeginner.com/wp-content/uploads/2024/03/active-gateways-stripe.png)
さらに、Stripeアカウントにアクセスする必要があります。その後、設定 ” ペイメントページに 移動します。
支払い方法]タブで、[プラットフォームの選択]ドロップダウンメニューから[Easy Digital Downloads]オプションを選択してください。
![select platform easy digital downloads select platform easy digital downloads](https://www.wpbeginner.com/wp-content/uploads/2024/03/select-platform-easy-digital-downloads.png)
そうすることで、誰かがデジタル製品を購入するたびにStripeリンクが有効化され、クレジットカード情報がフィールドに自動入力されます。
次に、ダウンロード ” ダウンロードページに移動します。そして、今すぐ購入ボタンを追加したいデジタル製品を見つけて、「編集」をクリックします。
![edit digital downloads edit digital downloads](https://www.wpbeginner.com/wp-content/uploads/2024/03/edit-digital-downloads.png)
ブロックエディターに入ったら、上部の黒いサイドパネル・ウィジェットをクリックする。
パネル内を下にスクロールし、ボタンオプションの設定まで進みます。そこから、ドロップダウンメニューから「今すぐ購入」を選択します。
![buy now button in EDD buy now button in EDD](https://www.wpbeginner.com/wp-content/uploads/2024/03/buy-now-button-in-EDD.png)
そして「公開する」または「更新する」ボタンを押す。
商品ページの下に’購入手続き’ボタンが表示されているはずです。その後、メールを入力すると、Stripeが請求先と支払い情報を自動入力します。
![checkout button in EDD checkout button in EDD](https://www.wpbeginner.com/wp-content/uploads/2024/03/checkout-button-in-EDD.png)
方法4:FunnelKitを使用してWordPressでワンクリックチェックアウトを作成する(eコマースストア)。
eコマースストアの場合、FunnelKit Funnel Builderはエクスプレス購入手続きの設定に最適です。
![FunnelKit Funnel Builder FunnelKit Funnel Builder](https://www.wpbeginner.com/wp-content/uploads/2023/11/funnelkit-funnel-builder.png)
この人気の高いセールスファネルビルダーは、平均注文金額を上げ、カート放棄率を減らし、より多くのリードを獲得するための高コンバージョンセールスファネルを簡単に作成できます。
リードキャプチャページや注文バンプの作成から、購入手続きやスライド式サイドカートの作成まで、あらゆることが可能です。すべてにおいて、コードを書く必要がありません。
この方法では、WooCommerce用に商品ページを設定する必要があります。まだ設定されていない場合は、ステップバイステップのWooCommerceチュートリアルをご覧ください。
FunnelKit Automationプラグインをインストールし、有効化してください。有効化したら、FunnelKit ” カートにアクセスしてください。Enable Cart’オプションをオンにします。Express Checkout’タブで、’Connect with Stripe’をクリックしてください。
![connect with stripe funnelkit automations connect with stripe funnelkit automations](https://www.wpbeginner.com/wp-content/uploads/2024/03/connect-with-stripe-funnelkit-automations.png)
その後、Stripe Connectウィザードが表示されます。
StripeアカウントをFunnelKitに接続するか、新規アカウントを作成する手順に従ってください。
![funnelkit stripe connection funnelkit stripe connection](https://www.wpbeginner.com/wp-content/uploads/2024/03/funnelkit-stripe-connection.png)
StripeアカウントがFunnelKitに接続されると、WordPressに戻ります。
クレジットカード(Stripe)」オプションを有効化し、「Save and Continue(保存して続行)」をクリックします。
![activate payment method funnelkit activate payment method funnelkit](https://www.wpbeginner.com/wp-content/uploads/2024/03/activate-payment-method-funnelkit-.png)
次に、Webhookを設定し、個別クリックで自動的に支払いを処理できるようにします。
Setup Webhook Now」をクリックします。
![setup webhook funnelkit setup webhook funnelkit](https://www.wpbeginner.com/wp-content/uploads/2024/03/setup-webhook-funnelkit.png)
ここから、Google PayとApple Payのエクスプレス購入手続きを有効化する必要がある。
そして「確認」ボタンを押す。
![enable express checkout funnelkit enable express checkout funnelkit](https://www.wpbeginner.com/wp-content/uploads/2024/03/enable-express-checkout-funnelkit.png)
Stripeのセットアップに成功したという確認メッセージが表示されます。
お支払いの受付を開始する準備ができている場合は、ご自由に「ライブ」モードを選択してください。そうでなければ、今は「テスト」オプションを選択してください。その後、’Save and Review Settings’をクリックしてください。
![stripe successfully setup funnelkit stripe successfully setup funnelkit](https://www.wpbeginner.com/wp-content/uploads/2024/03/stripe-successfully-setup-funnelkit.png)
次に、FunnelKit ” カートに戻ります。次に、Express Checkoutタブの下にある’Enable Express Checkout on Cart’オプションをオンにします。
その後、「保存」ボタンを押して変更を保存する。
![enable express checkout on cart enable express checkout on cart](https://www.wpbeginner.com/wp-content/uploads/2024/03/enable-express-checkout-on-cart.png)
これが有効化されれば問題ない。
ライブの商品ページで、その動きをご覧ください。
![live product page one click checkout live product page one click checkout](https://www.wpbeginner.com/wp-content/uploads/2024/03/live-product-page-one-click-checkout-.png)
カスタマイザーが「今すぐ支払う」設定を選択すると、ウィンドウがポップアップ表示されます。
Google PayやApple Payのアカウントに保存されている支払い情報はすべて自動的に表示される。
![payment details one click checkout preview payment details one click checkout preview](https://www.wpbeginner.com/wp-content/uploads/2024/03/payment-details-one-click-checkout-preview.png)
方法5:WordPressでWooCommerceを使ってワンクリック購入手続きを作成する(無料)
あなたのWooCommerceストアにワンクリックチェックアウトを追加するための無料の方法が必要な場合は、Direct Checkout for WooCommerceプラグインをダウンロードすることができます。
![Direct Checkout for WooCommerce Direct Checkout for WooCommerce](https://www.wpbeginner.com/wp-content/uploads/2024/03/Direct-Checkout-for-WooCommerce.png)
あなたのストアにワンクリック購入ボタンを追加する無料のプラグインです。
有効化した後、WooCommerce ” 設定ページに移動します。次に、Payments ” Express Checkoutに移動します。
ここから、「エクスプレス・チェックアウトを有効化する」というチェックボックスをクリックします。
このプラグインは幅広いカスタマイザーを提供します。ワンクリックチェックアウトボタンをどこに外観させるか、ボタンの色や表示されるテキストをカスタマイズすることができます。
![enable express checkout in woocommerce enable express checkout in woocommerce](https://www.wpbeginner.com/wp-content/uploads/2024/03/enable-express-checkout-in-woocommerce.png)
これで準備はすべて整った。
商品ページやストアフロントに移動するだけで、ワンクリックチェックアウトボタンが表示されます。
![express checkout live preview express checkout live preview](https://www.wpbeginner.com/wp-content/uploads/2024/03/express-checkout-live-preview-.png)
この記事がWordPressでワンクリック決済を作成する方法を学ぶのにお役に立てば幸いです。また、あなたのストアに最適なWooCommerceプラグインのリストや、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.
ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。