WordPressで口数に応じた寄付金額をクレジットカード決済する方法

必要なプラグイン

• Contact form 7 （WEBフォームを作成するために使用）
• Contact Form 7 Cost Calculator – Price Calculator Free（口数の計算するために使用）
• HT PAY.JP for kintone（ネットでクレカ決済するために使用）

利用するサービス

• Pay.jp

口数が変更された合計金額が連動して変更するようにする

口数の変更に応じて合計金額が連動して変わるようにするには、「Contact Form 7 Cost Calculator – Price Calculator Free」プラグインの機能を使います。
「Contact Form 7 Cost Calculator – Price Calculator Free」は、Contact form 7で作成したフォームの入力内容に応じてリアルタイムで価格やコストを計算し、表示してくれます。

「Contact Form 7 Cost Calculator – Price Calculator Free」を設定する

「Contact Form 7 Cost Calculator – Price Calculator Free」を有効にすると以下のボタンが追加されます。

• checkboxes price：チェックボックスで金額をフォームに表示できます。
• radio buttons price：ラジオボタンで金額をフォームに表示できます。
• drop-down menu price：ドロップダウンで金額をフォームに表示できます。
• Number Format：数値入力ができるフォームが表示されます。
• Calculator：金額の合計に使う部品になります。フォームの入力内容に連動した計算結果が表示されます。

メモ

「なぜ Contact Form 7 Cost Calculator プラグインで上記の機能が追加で提供されているのか」
Contact form 7 には元からチェックボックス、ラジオボタン、ドロップダウンメニュー、数値のフォームを準備する機能が既にあるのですが、Contact Form 7 Cost Calculator プラグインで追加されているのは、以下のようなフォームを実現するためだと思います。

「3,000円の寄付をする」とフォームでは表示をしていますが、実際の裏で持っている値は3000という数値を持っています。
このように Contact Form 7 Cost Calculator プラグインで追加された checkboxes price のフォームの部品を使うと表示する文字と合計金額のために使う値とを分けてることができます。
※ Contact form 7 にも表示と値を分ける機能はありますが、Contact form 7の部品の方を使うと合計金額が計算されません。
パイプを使って送信先を選択可能に

フォームを作成する

フォームタブに以下のように記載する。

[radio_custom donation-type default:0 "3000|3,000円の寄付をする" "5000|5,000円の寄付をする" "5000|5,000円の寄付をする"]

　　　　　　　　口数
    [number* count min:1 "1"]

　　　　　　　　合計金額
    [calculated* total "donation-type * count"]


[submit "送信"]

寄付のタイプの設定

[radio_custom donation-type default:0 "3000|3,000円の寄付をする" "5000|5,000円の寄付をする" "5000|5,000円の寄付をする"]

Contact Form 7 Cost Calculatorプラグインで追加された radio buttons price を使って寄付の種類を作成しています。
donation-type フォームの部品の名前です。英数字で書きます。「寄付のタイプ」を英語にしました。
default:0 にするとフォームが表示された時に1番目にチェックが入った状態になります。default:1 にすると2番目にチェックが入った状態になります。
"3000|3,000円の寄付をする" のように |（縦棒：パイプ）を使うことでフォームに表示させる文字と計算で使う値（金額）を別で管理することができます。

口数の設定

[number* count min:1 "1"]

口数を入力するフォームです。
こちらは Contact Form 7 Cost Calculator プラグインで追加された Number Format の機能は使っていません。Contact form 7 の数値機能を使っています。特に意味はないので好きな方を使ってください。

count フォームの部品の名前です。口数なのでcount という名前にしました。
min:1最小値を設定してます。0やマイナス表示にならないようにしています。
"1" 初期値を設定しています。

合計金額の設定

[calculated* total "donation-type * count"]

合計を表示するフォームです。
total フォームの部品の名前です。合計金額なのでtotalという名前にしました。
"donation-type * count" 計算式を書いています。上記で設定した寄付のタイプのアルファベット名と口数のアルファベット名を掛け算しています。他にも足し算や割り算など使える記号があります。

以上で合計金額の計算ができるようにはなりました。

クレジットカードでネット決済ができるようにする

HT PAY.JP for kintone プラグインを使って、Pay.jp サービスを使ってクレジットカードの決済ができるようにします。
Pay.jp は NPO プランがあります。是非活用してください。
PAY.JP NPOとはなんですか？

公開鍵、秘密鍵を設定する

HT PAY.JP for kintone プラグインをインストールすると お問い合わせメニューの下に HT PAY.JP for kintone のメニューが追加されます。

WordPressの PAY.JP for kintone Settings の画面に Pay.jp のAPI設定ページにある「テスト秘密鍵」「テスト公開鍵」「本番秘密鍵」「本番公開鍵」を設定します。

Pay.jp タブの設定をする

1. Enableをクリック
2. 本番利用する場合は、Enable Live に。テストで試す場合は、Enable Liveのチェックは無し。
3. Select amount of CF7 mailtag に total を設定

クレジットカード情報を入力する画面を表示するボタンを設置する

送信ボタンの上に [ht_payjp_kintone] を追記します。

すると、カード情報を入力するボタンが表示されます。
これでHPからクレジットカードの決済ができるようになりました。