Diviの価格表にシンプルなストライプ支払いボタンを追加する方法

Stripeは、特に技術に精通した開発者の場合、オンラインビジネス向けの非常に柔軟な支払い処理ソリューションです。 ただし、開発者ではなく、Stripeを使用していくつかの製品をオンラインで販売したい場合は、それを行う簡単な方法があります。 実際、いくつかのコードスニペット（または単純なプラグイン）を使用すると、Stripe支払いボタンをWebサイトにすばやく追加できます。

このチュートリアルでは、WordPressプラグインのStripe Paymentsを使用して、DiviWebサイトにStripe支払いボタンを追加する方法を紹介します。 Diviのレイアウトに合わせてボタンのスタイルを設定する方法も紹介します。

始めましょう！

スニークピーク

これは、このチュートリアルで作成するStripe支払いボタンの概要です。

入門

このユースケースチュートリアルでは、次のものが必要になります。

• Diviテーマ（インストール済みでアクティブ）
• ストライプアカウント
• WPSimplyPayによるWordPressプラグインのStripePayments（インストール済みでアクティブ）
• また、DiviBuilder内で無料で利用できるデジタル製品の価格設定ページレイアウトを使用します

プラグインについて

WPによるWordPressのStripePayments Simply Payは、シンプルなショートコード埋め込みを使用して、Stripeでクレジットカード支払いの収集を開始できるプラグインです。 実際にはプラグインを使わずに手動でチェックアウトフォームや支払いボタンを作成できますが、このプラグインは物事を簡単にし、いくつかの便利な機能（支払い確認や支払い失敗ページなど）を提供するので、長期的にはもっと役立つと思いました。 このチュートリアルでは、無料のLiteバージョンのプラグインを使用します。 プラグインのプロバージョンでは、カスタムフィールド、カスタム金額、サブスクリプション機能などのサポートに加えて、フォームのスタイルをより細かく制御できます。

プラグインを使用したStripeフォームの設定

プラグインをインストールしてアクティブにしたら、 Simple Pay Lite > Settingsに移動します。 次に、[Stripe Keys]タブで、StripeアカウントのAPIキーを入力する必要があります。 このチュートリアルでは、テストキーのみを使用しますが、実際のお金の収集を開始する場合は、Stripeアカウントを確認してアクティブ化し、いくつかのライブAPIキーを生成する必要があります。

Stripeアカウントにサインインし、[開発者]> [ APIキー]をクリックすると、APIキーを見つけることができます。

公開鍵と秘密鍵の両方をプラグイン設定にコピーする必要があります。

次に、[一般]タブにジャンプします。 そこで、支払い成功ページと支払い失敗ページを指定することができます。 プラグインがすでにそれらのページを作成していることに気付くでしょう。 ただし、ページコンテンツはショートコードによって生成されるため、実際には、これらのショートコードを任意のDiviレイアウトの任意のDiviモジュールに追加して、それらのページのカスタムバージョンを作成できます。 今のところ、これらのデフォルトページをそのままにして、セットアップを続行します。

支払いボタンのスタイルを「なし（テーマから継承）」に設定します。 これは、デフォルトの青いストライプボタンのスタイルを設定するために使用されるcssを削除するだけです。 これにより、独自のカスタムCSSを追加してDiviのボタンのスタイルを設定するときに、作業が少しすっきりします。

次に、変更を保存します。

[支払い確認]タブで、使用可能なテンプレートタグを使用して、支払い確認ページのショートコードで表示されるメッセージと情報をカスタマイズできます。 ただし、このチュートリアルでは、デフォルトのメッセージを残しておきます。

ストライプ支払いフォームの作成

支払いフォームは、実際には、ユーザーがページを離れることなく購入を完了することができるポップアップ支払いフォームを生成するStripe支払いボタンです。 したがって、販売している製品またはサービスごとに新しい支払いフォームを作成する必要があります。 このユースケースでは、3つの模擬製品に対して3つの支払いフォームを作成します。

新しい支払いフォームを作成するには、WordPressダッシュボードに移動し、Simple Pay Lite> AddNewに移動します。

支払いフォームにタイトルを付けます（このタイトルはフロントエンドに表示されません）。

次に、[支払いオプション]タブで、1回限りの金額を入力します。

次に、[ページ上のフォームの表示]タブをクリックし、デフォルトの支払いボタンのテキストを[今すぐ購入]（または必要なもの）に変更します。 支払いボタン処理テキストを選択することもできます。

[チェックアウトオーバーレイ表示]タブで、以下を更新します。

会社名
アイテム説明
ロゴ/画像のURL
Remember Meを有効にする：はい

これらのオプションは、この特定の製品のチェックアウトフォームポップアップに表示される内容を決定します。

完了したら、支払いフォームを確認して公開/更新します。

最終的には、Diviページレイアウトに貼り付けるために、[支払いフォームの編集]ページの右上にある支払いフォームのショートコードをコピーする必要があります。

ただし、今のところ、同じプロセスを続行して、それぞれ独自のアイテムの説明、ロゴ/画像、および金額を含む2つの支払いフォームを作成できます。

すべての支払いフォームが作成されたら、Simple Pay Lite>支払いフォームに移動して、支払いフォームにアクセスできます。 そこで、ショートコードに簡単にアクセスできます。

Diviページレイアウトへのストライプ支払いボタンの追加

ストライプ支払いフォームのショートコードの準備ができていないので、Diviページレイアウトを稼働させる必要があります。 これを行うには、新しいページを作成し、ページにタイトルを付け、クリックしてDiviBuilderを使用します。

次に、「既成のレイアウトを選択」オプションを選択します。

Digital Product Layoutパックを開き、クリックしてDigital ProductPricingページを使用します。

レイアウトがページに読み込まれたら、ページを公開し、クリックしてフロントエンドでビルドします。

別のタブで、支払いフォームのページに戻り、価格表に追加するショートコードを取得します。

次に、価格設定ページのレイアウトに戻り、レイアウト内の価格設定テーブルの1つの価格設定テーブル設定を開きます。

ボタンのテキストを取り出し（ショートコードがボタンとして機能するため、必要ありません）、コンテンツボックスのコンテンツの下にショートコードを貼り付けます。

ボタンの下に「テストモード」というテキストが強調表示された、スタイルが設定されていないボタンが表示されます。 デフォルトの青いボタンの代わりにボタンのテーマスタイルを使用するオプションを選択したため、ボタンはスタイルなしになっています。 テストモードのテキストは、ライブストライプ支払いフォームを使用していないことを思い出させるためにあります。 ライブAPIキーが使用されると、テストモードのテキストは明らかに消えます。

次に、残りの2つの価格表に他の2つの支払いフォームのショートコードをコピーして貼り付ける同じプロセスを続行します。

ボタンの1つをテストして、支払いフォームのオーバーレイが正しく機能していることを確認します。 このように見えるはずです…

残念ながら、このバージョンのプラグインでは、表示されているデフォルトのスタイルを超えて支払いフォームのオーバーレイをカスタマイズすることはできません。 しかし、機能はそこにあり、多くの場合、その余分なスタイリングは必要ありません。 ただし、これらのボタンのスタイルを設定することはできます。

レイアウトに合わせてストライプ支払いボタンをスタイリングする

Stripe支払いボタンのスタイルを設定するために、ページ設定にカスタムCSSを追加します。 まず、ボタンのスタイルを設定するために使用するセレクターを把握する必要があります。 これは、ブラウザ開発ツールを使用して見つけることができます。 [ストライプ]ボタンを右クリックして、[検査]を選択します。 HTMLコードでは、ボタンにcssクラス「simpay-payment-btn」があることがわかります。

これは、ボタンのスタイルをターゲットにするために必要なセレクターです。

Stripe支払いボタンのスタイルを事前に作成されたレイアウトで使用されているボタンと一致させたい場合は、ページですでにスタイル設定されているDiviボタンの1つを調べて、必要なCSSコードを取得できます。

次に、ページ設定を開き、[詳細設定]タブに次のカスタムCSSを追加します。

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

それでおしまい！ 最終結果を確認してみましょう。

支払い確認ページと支払い失敗ページのカスタマイズ

プラグインはショートコードを使用して支払い確認と支払い失敗ページのコンテンツを生成するため、そのショートコードを任意のDiviレイアウトに追加し、Diviの組み込み設定を使用してテキストのスタイルを設定できることを忘れないでください。

これは、カスタムCSSに頼ることなく、これらのページのスタイルをWebサイトと一致させるのに役立ちます。

最終的な考え

Stripeは、オンライン支払いを収集するための非常に便利なソリューションです。 また、Simple Payments for WordPressプラグインを使用すると、基本的なStripeCheckout機能をDiviサイトで数分で稼働させることができます。 また、Diviの既成のレイアウトを利用する場合は、作成済みのCSSコードをコピーして貼り付けるだけで、レイアウトに合わせてStripe支払いボタンを追加およびスタイル設定できます。 その結果、訪問者がページを離れることなく、訪問者から支払いを収集できる、完全に機能する安全な支払い処理ツールが実現します。

WordPressWebサイトでStripe支払いを受け入れる他の方法を自由に探索してください。

このチュートリアルがお役に立てば幸いです。コメントでお返事をお待ちしております。

乾杯！