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

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

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

2021/02/01更新情報あり

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

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

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

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

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

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

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

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

更新時の調整記録

2021年05月17日更新 ver1.9.3 プラグイン更新に伴った変更点

customize_redirect_stripe.phpをプラグイン更新後のファイルでカスタマイズし直してください。

2021年03月11日更新 ver1.8.3 プラグイン更新に伴った変更点なし

2021年02月09日更新 ver1.8.2 プラグイン更新に伴った変更点

customize_redirect_method.jscustomize_redirect_stripe.php、functions.phpに追加したコード、３か所でカスタマイズ内容を作業し直してください。記事内の赤いボックスでカスタマイズし直し部分を表示しているのでご確認ください。

2021年02月01日更新 ver1.8.1 プラグインの更新に伴った変更点

customize_redirect_method.jscustomize_redirect_paypal.phpcustomize_redirect_stripe.php、functions.phpに追加したコード、全てでカスタマイズ内容を作業し直してください。記事内の赤いボックスでカスタマイズし直し部分を表示しているのでご確認ください。

この更新でエラーが出る場合はコチラを確認してください！

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

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

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

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

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

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

PayPal テスト環境 Sandboxの使い方

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

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

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では、いくつかの段階を踏んで決済に必要な情報を作り、各サービスへ渡しています。

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

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

contact-form-7-paypal-add-on＞includes>redirect_paypal.phpredirect_stripe.php

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

themes＞lightning_child_sample＞inc＞customize_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']);

		if (isset($_GET['cf7pp_p'])) {
			$payment_id 	= sanitize_text_field($_GET['cf7pp_p']);
		} else {
			$payment_id = '';
		}

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

    //customize_redirect_paypal.phpに書かれたfunctionを実行
		customize_cf7pp_paypal_redirect($post_id,$payment_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['cf7pp_return'])) {
			$return_url 	= sanitize_text_field($_GET['cf7pp_return']);
		} else {
			$return_url = '';
		}

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

		if (isset($_GET['cf7pp_p'])) {
			$payment_id 	= sanitize_text_field($_GET['cf7pp_p']);
		} else {
			$payment_id = '';
		}

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

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

	}
}

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

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

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

この更新でエラーが出る場合はコチラを確認してください！

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

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

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

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

customize_redirect_paypal.php

<?php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly


function customize_cf7pp_paypal_redirect($post_id,$payment_id) {
//cf7pp_paypal_redirect→★customize_★cf7pp_paypal_redirectにする

まずファイルの冒頭にあるfunction名をカスタマイズバージョンに書き換えます。

それから、ファイルの中でカスタマイズ箇所を探してリダイレクト先を書き換えます。

～～～～～省略～～～～～

	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だったら
	        $slug = "/contactform7-paypal-and-stripe-add-on-sample-1/"; //このページ(スラッグ)
	      }
	      elseif($post_id == "866"){
	        $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',
		'invoice'			=> $payment_id,
		'notify_url'		=> cf7pp_get_paypal_notify_url(),
		'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というオプションを１に設定すると、配送はしないので表示しないという設定にできます。

参考元：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

<?php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly


function customize_cf7pp_stripe_redirect($post_id,$fid,$return_url,$payment_id) {
//cf7pp_stripe_redirect→★customize_★cf7pp_pstripe_redirectにする

まずファイルの冒頭にあるfunction名をカスタマイズバージョンに書き換えます。

それから、ファイルの中でカスタマイズ箇所を探してリダイレクト先を書き換えます。

～～～～～省略～～～～～

	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) {
		echo "Website admin: Success or Return URL is not valid.";
		exit;
	}
	
	if (filter_var($cancel_url, FILTER_VALIDATE_URL) === FALSE) {
		echo "Website admin: Success or Return URL is not valid.";
		exit;
	}

～～～～～省略～～～～～

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

ver1.8.1→ver1.8.2の書き換え

	$checkout_session = \Stripe\Checkout\Session::create([
	  'submit_type' 				=> 'pay',
	  'payment_method_types' 		=> ['card'],
	  'customer_email' 				=> $email,
	  'line_items' 					=> $line_items,
	  'mode' 						=> 'payment',
	  'success_url' 				=> $success_url.'?cf7pp_stripe_success=true&★cf7pp_fid='.$fid.'&id={CHECKOUT_SESSION_ID}',
	  'cancel_url' 					=> $cancel_url,
	  'client_reference_id'			=> $payment_id
	]);

★が ver1.8.1では fid なので　cf7pp_fid に書き換えてください。

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

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

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

謎のエラー修正方法

カスタマイズの過程でStripe決済に妙なエラーが発生しました。

Fatal error: Uncaught (Status 400) (Request req_cJgf7VTLx9ePEH) You passed an empty string for 'client_reference_id'. We assume empty values are an attempt to unset a parameter; however 'client_reference_id' cannot be unset. You should remove 'client_reference_id' from your request or supply a non-empty value. thrown in /home/moniko/moniko-life.com/public_html/wp-content/plugins/contact-form-7-paypal-add-on/includes/stripe_library/lib/Exception/ApiErrorException.php on line 38

カスタマイズのせいなのか、更新のせいなのかが不明です…。

今回追加された、支払いの記録をカスタム投稿として保存する機能で、保存出来たらカスタム投稿のIDをStripeに渡す機能がついたのですが、それが上手くいかないとこのエラーが出るみたいです。

この記事のカスタマイズを適用した人は、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']);

		if (isset($_GET['p'])) {
			$payment_id 	= sanitize_text_field($_GET['p']);
		} else {
			$payment_id = '';
		}

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

    //customize_redirect_paypal.phpに書かれたfunctionを実行
		customize_cf7pp_paypal_redirect($post_id,$payment_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 = '';
		}

		// エラーが出るのでコメントアウト
		// if (isset($_GET['p'])) {
		// 	$payment_id 	= sanitize_text_field($_GET['p']);
		// } else {
		// 	$payment_id = '';
		// }

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

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

	}
}