【最新版】PayPal & Stripe Add-onのカード決済&PayPal決済で完了画面リダイレクトやその他のカスタマイズ

2020年12月16日ContactForm7カスタマイズ

contactform7 paypal&Stripe Add-on カード決済

PayPal & Stripe Add-onがバージョンアップして、大幅に機能が改善されたため、カスタマイズ記事も新しく書き直しました。

ContactForm7で連絡先情報を入力してお支払い方法を選択でき、Stripeシステムを使ってのカード決済(or GooglePay)、またはPayPal支払いにページ遷移して決済できるプラグインです。

最新バージョンならカスタマイズ無しでも問題なく使用できます。

古い記事でカスタマイズしていた人は、PayPal & Stripe Add-on バージョン1.7に更新する前に必ず古いカスタマイズを削除し、新しくカスタマイズし直してください。

削除箇所は以下参照

導入のための設定方法、ContactForm7との連携方法は別記事で解説しています。

このブログの運営者さやは、プログラマ―ではなく精神保健福祉士です(笑)。
WordPress及びプログラミング歴は2年ほどで、知識はすべてサイトを作りながらネットで学んだ独学であり、学業でも学習プログラムでも本でも学んでいません。
自分で〇〇診断サイトを作れるくらいの技術はあり、プログラムの内容が正しいかどうかはなるべくしっかりネットで確認していますが、あくまでググりプログラマ―なので、ご自身の責任と知識の元で参考にしてください。

PayPal&Stripe Add-onの問題点とカスタマイズ箇所

PayPal&Stripe Add-onは、ContactForm7で作ったフォームからクレジットカード決済やPayPalの決済画面に移行できるプラグインです。

ポップアップ以外で決済を簡単に導入できる方法としてこれ1択!

見た目も大手インターネットショッピングサイトと劣らず、決済できます。

ウェブサービスのStripeでのクレジットカード決済導入にはベストなプラグインになります!

PayPal&Strip Add-onで出来ること

  • 1フォームにつき1つの金額を設定して、決済できる
  • ContactForm7でユーザーがお支払い方法を選択し、PayPalかクレジットカード決済を選択した場合には決済画面に移行する
  • それ以外の選択肢(銀行振込など)のときは移行しない
  • ContactForm7送信後に決済に進むとき、ユーザーのメールアドレス情報をContactForm7から決済プラットフォームに渡せる
  • 決済終了後に自分のサイトにリダイレクトできる(Stripeではリダイレクト先ページをフォーム毎に作れる)
  • 決済画面の言語は日本語にでき、通貨も日本円にできる
PayPal&Stripe Add-onの問題点

  • フォームで金額の選択をすることや、複数の商品の決済をすることはできない(プロ版で5つまで対応可)
  • 税の計算はできないため、税込みで金額を表示する(プロ版で対応可?)
  • 定期支払いはできない(有料アドオンで対応可)
  • ContactForm7内に決済情報の入力は組み込めないので、決済の際は外部サイトに画面遷移する
  • 設定画面などが日本語に対応していない

この記事で出来る!PayPal&Stripe Add-onのカスタマイズ

  1. PayPal決済もStripe決済にも移行しない場合には完了画面にリダイレクトする
    (例:https://home.com/フォームURL/received/にリダイレクトする)
  2. WebサービスのPayPal決済で、配送先を非表示にする
    (PayPalの内容確認画面で、金額と配送先が自動的に出力されるので配送先を非表示にする)
  3. 決済完了後、フォーム毎に違うページにリダイレクトさせる
    (例:https://home.com/フォームURL/thanks/にリダイレクトできるようにする

今回のカスタマイズに関しては、決済という重要な部分のカスタマイズな上、プラグインの仕様を勝手に変える無理やりカスタマイズなのでハイリスクです。

プラグインを更新すると互換性がなくなる可能性があるため
このカスタマイズを適用した後は、プラグインを更新しないでください。

更新後、時間のあるときにさやが互換性の確認をして、カスタマイズの調整後、この記事を更新します。

その辺を自己責任で管理できる方のみ参考になさってください。

Stripeのアカウント取得や審査、プラグインのインストールや設定に関しては難しくないので、割愛します。

コードの意味がわかる方、プラグインの管理が可能で、仕組みがある程度わかる方のみ使用可能なカスタマイズです。

更新時の調整記録

2020年12月16日更新 ver 1.7 プラグインの更新に伴った変更点
…古いカスタマイズをすべて削除して新しいカスタマイズを追加

PayPalとStripeのテストモードでの動作確認方法

カスタマイズ後は必ずテストモードで決済が成功したかどうか確認してから公開してください。

カスタマイズで動作確認をする際にいちいち決済はできないので、フォームの設定で必ずどちらもsandbox modeをonにして動作確認しましょう。

PayPalでは、sandbox版(テスト環境)のPayPalで受け取る側のbusinessテストアカウントと支払う側のpersonalテストアカウントを作って動作確認できます。

使い方は下記記事で確認してください。

PayPal テスト環境 Sandboxの使い方

Stripeでは、テストカードで決済できます。

StripeのVISAテストカード

カード番号:4242 4242 4242 4242
CVS:なんでもOK 期限:なんでもOK

支払いが正常に完了したかどうかの確認は、

Stripeではダッシュボードでテストデータを表示をオンにするだけ

PayPalでは、sandbox版のPayPalにbusinessテストアカウントでログインします。

リダイレクトのカスタマイズ:redirect_method.js

プラグインファイルのiQueryの関数を書き換えたいので、プラグインのJSファイルに手を加えたオリジナルファイルを用意し、そちらを読み込ませるようにします。

まずはプラグインファイルからredirect_method.jsをダウンロードします。

contacf-form-7-paypal-add-on>assets>js>redirect_method.js

コピーして新しいファイルを作成してファイル名をcustomize_redirect_medhod.jsにし、そのファイルをカスタマイズして、使用している子テーマにアップロードします。

子テーマ>jsを作成(既にある人はその中に)>customize_redirect_method.js

アップロードしたら、プラグインで読み込んでいるredirect_medhod.jsの読み込みを削除し、作成した自分のredirect_medhod.jsを読み込む記述をfunctions.phpに追加します。

//redirect_method.jsのカスタマイズ
add_action( 'wp_enqueue_scripts', 'replace_cf7pp_scripts', 9);
function replace_cf7pp_scripts() {
//プラグインが読み込んでいるJSを削除
  wp_dequeue_script( 'cf7pp-redirect_method' );
//カスタマイズしたJSを読み込む
  wp_enqueue_script('cf7pp-redirect_method',get_stylesheet_directory_uri(). '/js/customize_redirect_method.js', array('jquery'),null);
}

これで、子テーマにあるcustomize_redirect_medhod.jsをカスタマイズすれば、変更が反映されます。

プラグインの更新があった際に、redirect_method.jsに変更があっても作成した自分のファイルが読み込まれているので変更されないので、更新時には必ず変更点を反映させたファイルを作り直し、動作確認を行いましょう。

①PayPal決済・Stripe決済以外では完了画面にリダイレクト

プラグインのデフォルト機能では、PayPal決済の終了後やStripe決済の終了後には完了画面にリダイレクトできますが、それ以外を選択した場合には完了画面にリダイレクトできません。

銀行振込などの他のオプションを使う場合、ContactForm7を送信した後に送信完了メッセージが表示されるのみになってしまい、わかりづらいです。

他プラグインやfunctions.phpへの記述などでリダイレクトしてしまうと、PayPal&Stripe Add-onの機能と干渉が起こって決済画面に進まなくなってしまいます。

なので、customize_redirect_medhod.jsのコード内にリダイレクトを追記します。

//gateway chooserから始まる部分でリダイレクトが振り分けられているので、そこに追加します。

redirect_method.js
		// gateway chooser
		if (cf7pp_gateway != null) {
			// paypal
			if (cf7pp_result_paypal > -1 && cf7pp_gateway == 'paypal') {
				window.location.href = cf7pp_path_paypal;
			}

			// stripe
			if (cf7pp_result_stripe > -1 && cf7pp_gateway == 'stripe') {
				window.location.href = cf7pp_path_stripe;
			}
			//★カスタマイズ striptでもpaypalでもなかったらreceivedページにリダイレクト
			if(cf7pp_result_stripe > -1 && cf7pp_gateway == 'stripe' || cf7pp_result_paypal > -1 && cf7pp_gateway == 'paypal'){
			}else{
					var current_url = location.href; //現在のページのURLを取得
					var received = current_url + "received/"; //子ページのスラッグを追加
					window.location.href = received; //子ページにリダイレクト
			}
			//★ここまで
		} else {
			// no gateway chooser
			if (cf7pp_result_paypal > -1) {
				window.location.href = cf7pp_path_paypal;
			}

			// stripe
			if (cf7pp_result_stripe > -1) {
				window.location.href = cf7pp_path_stripe;
			}
		}
	}

1つ目のif文がPayPalの場合、2つ目のif文がStripeの場合なので、そのあとにどちらでもない場合のコードを追加します。

★~★の部分を追加してください。

cf7pp_result_stripe > -1 && cf7pp_gateway == 'stripeの部分で決済方法にStripeが選択されていることを確認しています。PayPalも同様です。

なので、if文でStripeかPayPalが選択されている場合は空にし、elseでそれ以外の場合にリダイレクトさせているコードです。

完了画面のページはは、フォームを置いたページの子ページとして作成しましょう。

子ページのスラッグを共通でreceivedなどにしておけば、複数のフォームを使用している場合に上記のコードでフォーム毎に違う完了画面に移行できます。

★完了ページのスラッグ例
https://saya-to.com/your-form-url/received/

thanksなど別のスラッグを使用する場合は書き換えてください。

PayPalとStripeのリダイレクトをカスタマイズ

PayPal & Stripe Add-onでは、いくつかの段階を踏んで決済に必要な情報を作り、各サービスへ渡しています。

PayPal/Stripe決済に進む際の仕組み

  1. ContactForm7が送信されるとき(フック:wpcf7_before_send_mail)、金額やフォームID、メールアドレス、プラグイン設定の内容などを渡す
  2. ContactForm7から送信されたデータから【|paypal】【 |stripe】の値を探し、決済方法を振り分けて遷移先URLを決める
  3. ContactForm7が送信された後、ページが再読み込みされるタイミングでPayPalまたはStripeに渡す情報を各システムに適した形に変換して作る
  4. PayPalまたはStripeの2で決まった決算ページのURLにリダイレクト

3の段階で決済完了後のリダイレクト先が決まるので、ContactForm7送信後にページが読み込まれた際に割り込んでカスタマイズコードを読み込ませます。

まず、PayPal決済に渡す情報を作っているファイルredirect_paypal.phpredirect_stripe.phpをプラグインからダウンロードしてコピーし、カスタマイズ版customize_redirect_paypal.phpcustomize_redirect_stripe.phpを作ります。

contact-form-7-paypal-add-onincludes>redirect_paypal.phpredirect_stripe.php

コピーして名前をcustomize_redirect_paypal.phpcustomize_redirect_stripe.phpにしたら、子テーマの中にアップロードします。

themeslightning_child_sampleinccustomize_redirect_paypal.phpredirect_stripe.phpincがなければ作るか、子テーマ内に直接アップロードして読み込みの際のパスを変更してください。

用意ができたら下記コードをfunctions.phpに書き込みます。

//PayPalとStripeのリダイレクトをカスタマイズ
add_action('template_redirect','customize_cf7pp_redirect_method', 9);
function customize_cf7pp_redirect_method() {
	// for paypal
  //PayPalへのリダイレクトのための情報がセットされていたら
	if (isset($_GET['cf7pp_paypal_redirect'])) {

		// get the id from the cf7pp_before_send_mail function theme redirect
    //送信されてきたデータからフォームがあるページのIDを取得
		$post_id 	= sanitize_text_field($_GET['cf7pp_paypal_redirect']);

    //★カスタマイズ用のファイルを読み込み
    require_once get_stylesheet_directory() . '/inc/customize_redirect_paypal.php';

    //★customize_redirect_paypal.phpに書かれたfunctionを実行
		customize_cf7pp_paypal_redirect($post_id);
		exit;

  }
	// for stripe
  //Stripeへのリダイレクトのための情報がセットされていたら
	if (isset($_GET['cf7pp_stripe_redirect'])) {

		// get the id from the cf7pp_before_send_mail function theme redirect
    //送信されてきたデータからフォームがあるページのIDを取得
		$post_id 	= sanitize_text_field($_GET['cf7pp_stripe_redirect']);

		if (isset($_GET['return'])) {
			$return_url 	= sanitize_text_field($_GET['return']);
		} else {
			$return_url = '';
		}

		// long contact form 7 form id
		if (isset($_GET['fid'])) {
			$fid 	= sanitize_text_field($_GET['fid']);
		} else {
			$fid = '';
		}

    //★カスタマイズ用のファイルを読み込み
    require_once get_stylesheet_directory() . '/inc/customize_redirect_stripe.php';

    //★customize_redirect_paypal.phpに書かれたfunctionを実行
		customize_cf7pp_stripe_redirect($post_id,$fid,$return_url);
		exit;

	}
}

上記はredirect_method.phpに記述してある部分を、フックでカスタマイズしています。

redirect_paypal.phpに書いてあるcf7pp_stripe_redirectという関数を実行する前に、カスタマイズしたcustomize_redirect_paypal.phpを読み込み、customize_cf7pp_stripe_redirectを実行します。

フックの数字で、プラグインのファイルよりも優先順位が高くなっているため、先にカスタマイズ版の関数が実行されて決済画面に移行するようになっています。

リダイレクトのための設定

  • 個別のリダイレクト先は、全てフォームが設置してある固定ページを親として、子ページとして作成します。子ページのスラッグはすべて統一「/thanks/」や「/received/」などにしておきます
  • Contact Form 7 – PayPal & Stripe SettingsotherPayPal Return URL:stripe Return URL:に統一したスラッグを入力します

※今までに別のカスタマイズやプラグインで、ContactForm7送信後のリダイレクト設定などをしていた場合は解除しましょう。

②PayPal決済完了後のリダイレクト先を書き換える

有料版では可能なようですが、無料版ではサイト内でPayPal決済をしたらすべて同じページにリダイレクトしか出来ません。

PayPalでは、どうしても元フォームのURLを取ってこれなかったので、フォームのURLはフォームIDで条件分岐していちいち手作業で記述することにしました。

作成したカスタマイズバージョンのファイルに、カスタマイズコードを追加します。下記部分を探してから追加してください。

customize_redirect_paypal.php
~~~~~省略~~~~~

	if ($options['language'] == "18") {
		$language = "tr_TR";
	} //Turkish

	if ($options['language'] == "19") {
		$language = "th_TH";
	} //Thai
	// ★カスタマイズ リダイレクト先を書き換える
	if(isset($options['return'])){
	      $site_url = get_home_url(); //サイトのホームURL

	      if($post_id == "871"){ //フォームIDが871だったら
	        $slug = "/contactform7-paypal-and-stripe-add-on-sample-1/"; //このページ(スラッグ)
	      }
	      elseif($post_id == "866"){
	        $slug = "/contactform7-paypal-and-stripe-add-on-sample-2/";
	      }
	      elseif($post_id == "xxx"){ //ここから
	        $slug = "/contactform7-paypal-and-stripe-add-on-sample-2/";
	      } //ここを振り分けたい数だけ追加
	      else{
					// $slug = "/thanks/"; //それ以外のフォームだったら、
	      }
	      $return = $site_url .$slug . $options['return'] ."/"; //設定したスラッグと連結
				if(!empty($slug)){ $options['return'] 	= $return; } //スラッグが設定されていたらリダイレクト先を置き換える
		}
	//★ここまでがリダイレクトカスタマイズ
	$array = array(
		'business'			=> $account,
		'currency_code'		=> $currency,
		'charset'			=> get_bloginfo('charset'),
		'rm'				=> '1', 				// return method for return url, use 1 for GET
		'return'			=> $options['return'],
		'cancel_return'		=> $options['cancel'],
		'cbt'				=> get_bloginfo('name'),
		'bn'				=> 'WPPlugin_SP',
		'lc'				=> $language,
		'item_number'		=> $id,
		'item_name'			=> $name,
		'amount'			=> $price,
		'cmd'				=> '_xclick',
		'no_shipping' => '1',//カスタマイズ 配送先を非表示にする
	);

$arrayの直前に追加します。

$options['return']がPayPal&Stripe Add-onの設定画面で設定したPayPalのリダイレクト先です。

$options['return']がセットされていることを確かめて、セットされていたらサイトURLと指定したスラッグとリダイレクト先スラッグを連結して、そこにリダイレクトします。

$post_idの値と$slugの中身は自分のフォームのもので書き換えて使用してください。

※フォームIDはContactForm7のフォームのショートコードに書かれているものです。ページIDとは違うので注意してください。

$options['return']に置き換える中身は何でもよいので、好きなようにPHPで作れます。

③PayPalの決済画面で配送先を非表示にする

PayPal&Stripe Add-onのPayPal決済では、エキスプレスチェックアウトという機能を使って、API決済を行っているようです。

URLのクエリで設定を渡す仕組みのようなので、そこでPayPalの設定項目を指定します。

no_shippingというオプションを1に設定すると、配送はしないので表示しないという設定にできます。

他にもカスタマイズできる項目があるので、もしオプションがあれば同じ個所でカスタマイズできます。

参考元:Customize the PayPal Checkout Flow – PayPal Developer

作成したカスタマイズ版のファイルをカスタマイズしてください。

customize_redirect_paypal.php
	$array = array(
		'business'			=> $account,
		'currency_code'		=> $currency,
		'charset'			=> get_bloginfo('charset'),
		'rm'				=> '1', 				// return method for return url, use 1 for GET
		'return'			=> $options['return'],
		'cancel_return'		=> $options['cancel'],
		'cbt'				=> get_bloginfo('name'),
		'bn'				=> 'WPPlugin_SP',
		'lc'				=> $language,
		'item_number'		=> $id,
		'item_name'			=> $name,
		'amount'			=> $price,
		'cmd'				=> '_xclick',
		'no_shipping' => '1',//カスタマイズ 配送先を非表示にする
	);

ファイルの最後の方にあるのが、PayPalのオプション設定です。

最終行の記述で、配送先が非表示になります。

④Stripe決済完了後のリダイレクト先を書き換える

PayPal同様、リダイレクト先をカスタマイズします。

Stripeではシステムが色々と違っていて、$_COOKIE['cf7pp_stripe_return']に元フォームのURLが保存されています。

それと設定したスラッグを連結するだけでOKなので簡単です。

作成したファイルで下記部分を探して、カスタマイズコードを追加してください。

customize_redirect_stripe.php
~~~~~省略~~~~~

if ($options['currency'] == "24") { $currency = "TRY"; }
	if ($options['currency'] == "25") { $currency = "USD"; }


	$cancel_url = $return_url;

	// return url
	if (!empty($stripe_return)) {
	// ★ここからカスタマイズで書き換え
		//元のページのURLと設定したスラッグを連結
		$success_url = $return_url.$stripe_return."/";
	// ★ここまで
	} else {
		$success_url = $return_url;
	}
	if (filter_var($success_url, FILTER_VALIDATE_URL) === FALSE) {
		exit;
	}

	if (filter_var($cancel_url, FILTER_VALIDATE_URL) === FALSE) {
		echo "Website admin: Success or Return URL is not valid.";
		exit;
	}

~~~~~省略~~~~~

これだけで、どのフォームからもフォームの子ページにあるthanksページなどにリダイレクトできます。

プラグイン更新時は注意してください!

プラグインの更新があると一気にただ更新して放置する方もいるかもしれませんが、こういうカスタマイズをしていると不具合はバンバン起きるので、更新作業はしないでください。

更新があった際はこちらの記事で動作確認後の調整箇所をお知らせするので、それを確認するまでは更新せずに放置しましょう。