【簡単!】Stripe Payments プラグインでWordPressに決済機能を追加!

・Wordpressサイトで資料を販売したい!!!
・簡単に決済機能を追加してサイトからの売り上げを上げたい!
・決済機能を付けたいけどセキュリティが不安だなぁ~と悩むことがあるかと思います。

そんな時に役に立つのがStripeプラグイン!
こちらを使用して簡単にサイト内にクレジット決済機能を追加する方法を解説。

本記事の内容

  • Stripe登録
  • 基本的な使用方法
  • 決済ボタンを表示する方法
  • 自動返信メールの設定など

スポンサードサーチ

まずはStripeに登録

WordPressにクレジット決済機能を実装する前に事前にStripeに登録しテスト用コード取得並びに本番用コードを取得する必要があります。

登録がまだの方はこちらから
https://stripe.com/jp

登録手順などについてはネット上を検索すればかなりの数記事が出るので参考にしながら登録を行ってもらえれば問題ないですが分かりづらい方は下記記事を参考にすると分かり易いかもしれません
https://manual.event-form.jp/event/stripe_account

登録完了後、テスト用にAPIキーが発行されます
公開可能キー hogehoge
シークレットキー ●●●●●●●●

まずはテストAPIをメモしてください
※WordpressでのStripe Paymentsプラグイン設定の際に必要になります。

Stripe Paymentsプラグインの基本的な使用方法

プラグイン有効化後、Stripeタブが出てきますのでまずは販売商品や資料などを登録しましょう!

商品登録は「Add New Products」から登録

  • タイトル:商品名や資料の名前
  • Short Description:決済画面でタイトルの下に表示される文
  • Price&Currency:商品価格と通貨(国を選択)
  • 商品に個数がある場合はStock:に個数記載
  • Download URL:ダウンロードファイルのURLを記載
  • TAX%:消費税を記載

その他

  • クレジット決済の際、住所入力させる場合はCollect Addressにチェックを入れると住所入力欄が表示されます
  • Product Thumbnailに設定したサムネイル画像が商品ダウンロード決済の際に決済画面上部に表示される
  • 決済完了後にサンキューページに遷移させる場合はURLを記載する

商品登録が終わったら確認してみましょう。
テーマによって感じは違いますが大体下記の様になります

購入ボタンをクリックすると決済情報入力画面がポップアップで出てきます。

ボタンだけ表示させる場合のコード

通常の商品ページで問題ないなら上記の様に制作して終わりですが、テーブルの中にボタンを入れるとか、ボタンだけ表示させて同様の処理が出来ないかと思われる初心者の方は多いような気がします。

ボタンだけ表示させる場合にはあらかじめ用意されているコードを使って表示させましょう。

ショートコード
[accept_stripe_payment class="btn" name="ダウンロード資料名" price="価格" currency="JPY"
description="製品サブタイトル" button_text="購入する" billing_address="1"←住所入力させる場合は1
url="ダウンロードさせるファイルまでのパス" item_logo="ここで設定した画像が決済画面上部に表示されます"]

上記のコードを書くと下記のようなボタンが表示されます。あとはお好みでCSSを調整すればOKです。

決済ボタンをクリックすると下記のフォームが表示

決済画面がポップアップで出てきます。
住所を適当に入力して決済情報入力へ進みます

テスト環境では下記の番号を使えます

クレジットカード番号 カードの種類
4111111111111111 Visa
4242424242424242 Visa
4012888888881881 Visa
5555555555554444 MasterCard
5105105105105100 MasterCard
378282246310005 American Express
371449635398431 American Express
30569309025904 Diner’s Club
38520000023237 Diner’s Club
3530111333300000 JCB
3566002020360505 JCB

購入完了後お客様へ自動返信メールを送信する際の設定

Stripe Paymentsの設定→Email設定に移ります。

決済完了後、Stripeを通じてレシートを送信する場合はSend Receipt Email From Stripeにチェック

決済完了後、購入完了メールを送る場合はSend Emails to Buyer After Purchaseにチェック

自動返信メールの記載サンプル

{customer_name} 様

この度は製品を購入頂きまして誠に有難うございます。
購入情報は下記の通りです。

購入製品:{item_name}
合計金額:{purchase_amt_curr}
ダウンロードはこちらから
<a href="{item_url}" download="{item_url}">Download</a> ← item_urlは設定されている場合のみ有効です

上記の様にすると購入後、自動でメールが送信されます。

メールでは下記の様に表示されます

この度は製品を購入頂きまして誠に有難うございます。
購入情報は下記の通りです。

購入製品:サンプル商品
合計金額:¥4,400
ダウンロードはこちら
Download

 

これで一通り商品登録から決済設定、購入後のメール送信まで完了しました。
Stripeを使用すれば簡単に決済機能を実装出来るのでサイトにクレジット決済を検討している方は参考にしてみてください。