Stripeカード決済後の自動返信メールをContactForm7で実装する方法

自分のサービスを売り出すときに、カード決済の導入は必須かと思います。
今の時代、銀行振り込みしか対応していないというのはあまりユーザーには優しくありません。

カード決済を導入することにより圧倒的に成約率も高まります。

個人でカード決済システムを導入できるのは、

• Paypal
• Stripe
• SPIKE

この３つが有名どころです。

で、ただカード決済を導入すると言っても、譲れないポイントがいくつかあります。

• 自動返信メールの導入ができる
• 最低でもVISA、MASTERに対応していること
• 出金申請からの振り込みサイクルが早い
• お客さんが決済しやすいフローになっているか

この観点から比較したところ、
Stripeだけがすべての条件に合致しました。

こういった点からStripeの導入を決めたのですが、
普通にやると自動返信の導入が難しかったので、より簡単な方法をご紹介していきますね。

今回紹介する方法ではコンタクトフォーム7から自動返信を送ることができます。

自動返信の都合上、2回メールアドレスを入れてもらう必要があるのですが、それでも他の決済方法よりはユーザーにやさしい仕様になっています。

ポップアップで出てきた画面より決済成功すると、自動返信が送ることができます。

アカウント登録などもなくユーザーにやさしい決済になりますよ。

まず最初に行った自動返信の導入

「Stripe 自動返信 WordPress」というキーワードでググったら、こちらの記事で丁寧に導入方法が解説されていました。

参考
WordPressでカード決済！Stripeの使い方【自動返信メール対応】CrossPiece

非常に丁寧に解説されているのですが、この方法は上級者向けだと思います。

1. PHPファイルを作成
2. FTPソフトなどでアップロード
3. 決済ページにコード貼り付け

と、手順的にはそこまで難しくはないのですが、僕は何度やってもうまくいきませんでした。

PHPは日ごろいじりませんが、ある程度理解はしているのでできるはずなのですが・・・
何度トライしても全く上手くいかず2時間程度格闘してお手上げ状態になりました。

なにがダメだったのか・・・1日空けてトライすればできていたかもしれませんが。

プラグインで自動返信を実装するために準備するもの

と調べていたところ、なんとありました！

ですが無料のプラグインではありません。
有料のプラグインです。

「Stripe Integration for Contact Form CF7」

という有料プラグインで、コンタクトフォーム7とStripeを連携するためのプラグインになります。
価格は14ドルです。（2018/5/8時点）

envatomarketという海外の信頼のおけるサイトで販売されています。

有料はちょっと・・・

という方もおられるとは思いますが、14ドル程度であればカード決済を導入することができれば、すぐに回収できる費用なので特に問題ないと思います。

Stripe Integration for Contact Form CF7の購入方法

「Buy Now」を押して、envato marketのアカウントを作成し、クレジットカードかPaypalで決済しましょう。

決済後、右上のアカウントボタンより「Downloads」を選択します。

そして、「All fliles＆documentation」をクリックしプラグインをダウンロードします。
ちなみに下の「Installable WordPress file only」でもプラグインはダウンロードできます。

各プラグインをインストールする

自動返信を実装するために3つプラグインが必要になります。

• Stripe Integration for Contact Form CF7
• Contact Form 7

この２つは当然必要です。

もうひとつが、「Redux Framework」という無料の公式プラグインです。

まず、これらをそれぞれインストール＆有効化を行いましょう。

Stripe Integration for Contact Form CF7の設定をする

左のメニューから「お問い合わせ」⇒「Stripe」をクリックします。

一般設定

Generalのタブの設定です。

1. Enable＝Contact Form7と連携をONにするかどうかです。必ずチェックを入れておきましょう。
2. Company Name＝商品名でOKです。
3. Logo＝変更しなくても大丈夫。画像を変更したい場合のみ設定してください。
4. Stripe Public Key＝Stripeの公開キーです。テスト時にはtestトークンを、本番時にはliveトークンを入力しておきましょう。
5. Stripe Private Key＝Stripeのシークレットキーです。同上。

Public KeyとPrivate Keyの調べ方

■決済本番用キー

Stripeのダッシュボードから「APIキー」をクリックし、右側に表示されているトークンをコピーしましょう。

pk(sk)_live_~~~~~~になっていればOK。

■決済テスト用キー

「テストデータを表示する」をクリックすれば、キーもテストモードになります。

pk(sk)_test_~~~~~~になっていればOK。

決済オプション設定

Payment optionsのタブの設定です。

1. Validate Postal Code (ZIP)＝郵便番号を入力してもらうかどうか
2. Collect Billing Address＝お客さんの住所を入力してもらうかどうか
3. Collect Shippinh Address＝配送先住所を入力してもらうかどうか
4. Allow Remember me＝次回購入してもらう時を考えて入力情報を覚えるかどうかのオプション
5. Accept Bitcoins＝ビットコイン支払いを受け入れるかどうか
6. Accept Alipay＝Alipayの支払いを受け入れるかどうか
7. Send Mail＝自動返信メールを送信する条件です。決済成功時に送るはずなので、「Payment Successfull」を選択。
8. Currency＝通貨設定です。JPYを選択。
9. Return URL＝決済成功時にリダイレクトするページ指定ができます。商品購入後のサンキューページを作成しておけば、決済後にリダイレクトします。
10. Cancel URL＝決済失敗時にリダイレクトするページ指定ができます。

設定項目が多いように感じますが、7.8.9の設定をすれば最低限はOKです。

高度な設定

「Advanced settings」ではカスタムCSSとカスタムjavascriptの設定ができますが、特に設定をする必要はありません。

コンタクトフォーム7で自動返信メール設定

Stripe用のフォームを作成する

まず、コンタクトフォームの新規追加を選択します。
下記の画像のようにメールアドレスのみ残して、他の項目はすべて削除しましょう。

次に「Stripe Button」を選択しましょう。

1. Label：購入ボタンのテキストになります。「購入」「今すぐ購入する」など入力してください。
2. Item Description：日本語にするとエラーになりますので僕は使用できるカードブランドを入力してます。例：VISA/Master/AMEX
3. Amount：半角数字で商品の金額を入力しましょう。カンマを入れるとエラーになります。例：5000
4. Item currency ：日本円なので「JPY」と入力しましょう。
5. Class attribute：空欄でOK。

このように入力されていればOKです。

自動返信メールを作成する

「メール」のタブに切り替えます。

次にメール(２)を使用にチェックを入れます。

これがお客様への自動返信になりますので、商品の案内などの必要事項を記載しておきましょう。

フォームをページにセットする

画像の赤枠部分のショートコードをコピーします。

カード決済を導入したいページにビジュアルモードのままでいいので、ショートコードを貼り付けます。

これで以下のようにできていればOKです。

本番前にテスト決済をして正常に動くか確かめる

テスト決済モードになっているかを確認する

まず、WordPressの設定を確認します。

「お問い合わせ」⇒「Stripe」⇒「General(一般設定)」を選択します。

Stripe Public KeyとStripe Private Keyが

• pk_test_～～～～～～
• sk_test_～～～～～～

になっているか確認しましょう。テスト決済モードになります。

「test」部分が「live」になっていると本番モードになります。

テストカードでテスト決済する

次に実際に決済をしてみます。
以下のいずれかのカードで決済可能です。

有効期限とCVCは任意の数字（でたらめ）でOK！
（CVCはVISA、Masterは3桁、AMEXは4桁の半角数字）

サンキューページにリダイレクト設定をしている場合は、決済成功後にリダイレクトするかもチェックしましょう。
次は決済が成功しているかのチェックです。

売り上げが反映されているかを確認

Stripeの管理画面に売り上げが反映されているかを確認します。

「テストデータを表示する」に切り替え、

以下の画像のように売り上げが反映されていればOKです。

自動返信メールが届いているか確認

決済する前に入力したメールアドレス宛に自動返信が届いているかを確認しましょう。

もし、届いていない場合は上記で説明している「決済オプションの設定」を再度確認ください。

「Send Mail」の設定欄が「Payment Successfull」になっていない可能性があります。

問題なければ本番モードに切り替える

決済モードのままリリースをしてしまうと、商品が売れても実売上には反映されませんので、必ず本番モードに切り替えましょう。

• pk_live_～～～～～～
• sk_live_～～～～～～

こちらに切り替えましょう。

ちなみに「test」を「live」に変更すればいいというわけではありません。
それ以降の文字列も違いますので、必ず確認の上変更しましょう。

まとめ

いかがでしたでしょうか？

• 決済成功後にサンキューページにリダイレクトさせられる
• 商品案内などの自動送信ができる

有料のプラグインを導入することで、上記の機能を増やすことができます。

また、Stripeの強みを再度言いますが、

1. ユーザーがページ遷移無しで決済することができる
2. アカウント登録を必要とせず、カード情報の入力だけで決済可能

特にこの2点が非常に優れています。

細かいことかもしれませんが、
こういったことが成約率に大きくかかわってきますので、妥協せず決済システムを導入していきたいですね。