【古いバージョン1.6.9まで対応】Contact Form 7 – PayPal & Stripe Add-onでカード決済＆PayPal決済＆完了画面のカスタマイズ

2020年8月4日2021年1月10日ContactForm7カスタマイズ

StripeもPayPalも、プラグインや簡単なコードで１クリック決済（ポップアップ表示）はすぐ導入できるのですが、「購入」だけではなく「顧客情報などを入力してもらったうえでの決済」をする場合にはなかなか良い方法がありませんでした。

使用したContact Form 7 – PayPal & Stripe Add-onでは、コンタクトフォームでお支払い方法を選択してから決済画面へ移動することができ、一般的なウェブサービスの決済と同じ流れを取れるため、おすすめです。

ただし、いくつか問題があったので独自に修正しました。

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

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

ポップアップ以外で決済を簡単に導入できる方法としてこれ１択！ですが、多少問題点があるのでカスタマイズしました。

一番の問題点は、
設定した金額がStripeに送信されるとき、金額を＄ドルからセントに換算する設定になっているので￥円も100倍にされてしまうという致命的なエラー。

2020年9月の更新で修正されました

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

カスタマイズ②と⑥はPayPal&Stripe Add-onでStripe決済を使用する場合は必須です！

更新時の調整記録

2020年08月20日更新プラグインの更新に伴った変更点
…更新後のredirect_method.jsをダウンロードしてカスタマイズしてアップロード

2020年09月03日更新ver1.6.8～金額が100倍になる問題点が修正されました

…functions.phpに記載したカスタマイズコードを削除

2020年10月14日更新　v er1.6.9 変更点なし

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

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

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

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

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

PayPal テスト環境 Sandboxの使い方

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

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

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

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

Stripe決済で金額が100倍になるのを修正していたのを削除

このカスタマイズは不要になったため、削除してください。

functions.phpに追加した以下のコード

//Stripe決済で金額が100倍になる記述を削除
add_action('wp_ajax_cf7pp_stripe_charge', 'customize_cf7pp_stripe_charge', 9);
add_action('wp_ajax_nopriv_cf7pp_stripe_charge', 'customize_cf7pp_stripe_charge', 9);
function customize_cf7pp_stripe_charge($request) {

	// make sure using POST
	if ( isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] != 'POST' && isset($_POST['stripeToken']) ) {
		return;
	}

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


	echo json_encode($response);

	wp_die();

}

②設定とStripe決済の金額が2桁ごとにピリオドが入るのを削除

ドルの仕様が、通貨を日本円にしても変更されません。もっと日本人に優しくしてほしい。

こちらはフックがあったので、functions.phpに追加してください。

//****************************//
//PayPal＆Stripe add-onプラグイン
//****************************//
//通貨単位を書き換える
add_action('wpcf7_after_save', 'fix_price_number',12, 1);
function fix_price_number( $cf7 ){
  $post_id = sanitize_text_field($_POST['cf7pp_post']);
  $price = sanitize_text_field($_POST['cf7pp_price']);
  update_post_meta($post_id, "_cf7pp_price", $price);
}

そもそも日本円ってピリオドではなく3桁ごとのカンマを入れますよね。

カンマを入れると上手く動作しないので、いっそのこと削除しました。

頑張ればカンマも入れられるかもしれないけど、面倒なのでしません。

リダイレクトとStripe決済のカスタマイズ：redirect_method.js

ここからはJavaScriptのカスタマイズになります。

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

2020年08月のプラグイン更新後、更新されたredirect_method.jsをダウンロードしてカスタマイズしなおしてください。

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

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

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

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

//プラグインのjs読み込みを削除する
add_action( 'wp_enqueue_scripts', 'remove_cf7pp_scripts', 9);
function remove_cf7pp_scripts() {
    wp_dequeue_script( 'cf7pp-redirect_method' );
}
//カスタマイズしたjsを読み込む
add_action('wp_enqueue_scripts','customize_cf7pp_public_enqueue', 9);
function customize_cf7pp_public_enqueue() {
	wp_enqueue_script('cf7pp-redirect_method',get_theme_file_uri( '/js/redirect_method.js' ), array('jquery'),null);
}

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

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

③PayPal決済orStripe決済以外で完了画面にリダイレクト

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

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

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

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

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

redirect_method.js※これはプラグイン更新前の古いコードです

		// gateway chooser
		if (gateway != null) {
			// paypal
			if (result_paypal > -1 && gateway == 'paypal') {
				window.location.href = path;
			}

			// stripe
			if (result_stripe > -1 && gateway == 'stripe') {

				var data = {
					'action':	'cf7pp_get_form_stripe',
				};

				jQuery.ajax({
					type: "GET",
					data: data,
					dataType: "json",
					async: false,
					url: ajax_object_cf7pp.ajax_url,
					xhrFields: {
						withCredentials: true
					},
					success: function (response) {

						jQuery('#'+id_long).html(response.html);

					}
				});

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

カスタマイズ部分はファイル内の80行目辺りからです。

redirect_method.js※2020年08月更新後

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

			// stripe
			if (cf7pp_result_stripe > -1 && cf7pp_gateway == 'stripe') {

				var cf7pp_data = {
					'action':	'cf7pp_get_form_stripe',
				};

				jQuery.ajax({
					type: "GET",
					data: cf7pp_data,
					dataType: "json",
					async: false,
					url: ajax_object_cf7pp.ajax_url,
					xhrFields: {
						withCredentials: true
					},
					success: function (response) {

						jQuery('#'+cf7pp_id_long).html(response.html);

					}
				});

			}
			//カスタマイズ 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 {

カスタマイズ部分はファイルの120行目辺りからです。

上記の部分で、PayPal決済の場合とStripe決済の場合の動作を振り分けています。

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

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

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

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

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

④Stripe決済のカード情報の入力画面でトップにスクロールする

Stripe決済でクレジットカード情報の入力フォームが表示された際に、入力フォーム下のスペースが長い場合、ContactForm7を送信した際の位置でロードされてしまい、ユーザーが混乱してしまいます。

※フッターが長い場合や、フォーム下に広告を表示した場合に問題が出ます。入力フォームのみが表示されるページになっていれば問題ありません

redirect_method.js

	function cf7pp_load_stripe () {
		if (jQuery('.cf7pp_stripe').length ) {
			var stripe = Stripe(ajax_object_cf7pp.stripe_key);

			var elements = stripe.elements();

			var elementClasses = {
				base:		'cf7pp_details_input',
				focus: 		'focus',
				empty: 		'empty',
				invalid: 	'invalid',
			};

			var cardNumber = elements.create('cardNumber', {
				classes: 	elementClasses,
				placeholder:  "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022",
			});
			cardNumber.mount('#cf7pp_stripe_credit_card_number');

			var cardExpiry = elements.create('cardExpiry', {
				classes: elementClasses,
				placeholder:  "\u2022\u2022 / \u2022\u2022",
			});
			cardExpiry.mount('#cf7pp_stripe_credit_card_expiration');

			var cardCvc = elements.create('cardCvc', {
				classes: elementClasses,
				placeholder:  "\u2022\u2022\u2022",
			});
			cardCvc.mount('#cf7pp_stripe_credit_card_csv');
//カスタマイズ カード情報の入力のためにページトップに移動する
 $("html,body").animate({scrollTop:0},"300");

Stripeのカード情報入力フォームをロードしている部分です。

カスタマイズ箇所は200行～210行目辺りの、カード入力フォームの出力部分が終了した場所です。

1行追加するだけですが、スクロールのanimateの動作や位置はご自由にカスタマイズできます。

⑤Stripe決済のカード情報入力で海外のZipcode(郵便番号)を削除

Stripe決済では、セキュリティのため海外のカードを使用した場合にZipcode(郵便番号)が必須情報になっています。

日本で発行されたカードの場合は、郵便番号は必要ありません。

郵便番号をそのままにしておいても、適当な番号を入力すれば決済できるようですが、ユーザーに不信感を与え無駄な手順も増えてしまうので削除しましょう。

まずは、フォームのHTMLで郵便番号を表示させないために、CSSで非表示にします。

label[for=cf7pp_stripe_credit_card_zip],#cf7pp_stripe_credit_card_zip{
	display:none;
}

これだけでは、フォームから項目が消えただけなので、バリデーションが働いて郵便番号を入力しないと決済ができません。

先ほどのスクロールのカスタマイズの直前に、カード情報の郵便番号部分を出力するコードがあるので、コメントアウトします。

redirect_method.js

	function cf7pp_load_stripe () {
		if (jQuery('.cf7pp_stripe').length ) {
			var stripe = Stripe(ajax_object_cf7pp.stripe_key);

			var elements = stripe.elements();

			var elementClasses = {
				base:		'cf7pp_details_input',
				focus: 		'focus',
				empty: 		'empty',
				invalid: 	'invalid',
			};

			var cardNumber = elements.create('cardNumber', {
				classes: 	elementClasses,
				placeholder:  "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022",
			});
			cardNumber.mount('#cf7pp_stripe_credit_card_number');

			var cardExpiry = elements.create('cardExpiry', {
				classes: elementClasses,
				placeholder:  "\u2022\u2022 / \u2022\u2022",
			});
			cardExpiry.mount('#cf7pp_stripe_credit_card_expiration');

			var cardCvc = elements.create('cardCvc', {
				classes: elementClasses,
				placeholder:  "\u2022\u2022\u2022",
			});
			cardCvc.mount('#cf7pp_stripe_credit_card_csv');
			//カスタマイズ 郵便番号を表示しない
			// var cardPostalCode = elements.create('postalCode', {
			// 	hidePostalCode: true,
			// 	classes: elementClasses,
			// 	placeholder:  "\u2022\u2022\u2022\u2022\u2022",
			// });
			// cardPostalCode.mount('#cf7pp_stripe_credit_card_zip');

//カスタマイズ カード情報の入力のためにページトップに移動する
 $("html,body").animate({scrollTop:0},"300");

さらに、その下にバリデーションをさせる部分があるので、そちらもコメントアウトします。

redirect_method.js

			// Handle real-time validation errors from the card Element.
			cardNumber.addEventListener('change', function(event) {

				var displayError = document.getElementById('card-errors');

				if (event.error) {
					displayError.textContent = event.error.message;
				} else {
					displayError.textContent = '';
				}

			});

			cardExpiry.addEventListener('change', function(event) {

				var displayError = document.getElementById('card-errors');

				if (event.error) {
					displayError.textContent = event.error.message;
				} else {
					displayError.textContent = '';
				}

			});

			cardCvc.addEventListener('change', function(event) {

				var displayError = document.getElementById('card-errors');

				if (event.error) {
					displayError.textContent = event.error.message;
				} else {
					displayError.textContent = '';
				}
			});
			//カスタマイズ 郵便番号をバリデートしない
			// cardPostalCode.addEventListener('change', function(event) {
			//
			// 	var displayError = document.getElementById('card-errors');
			//
			// 	if (event.error) {
			// 		displayError.textContent = event.error.message;
			// 	} else {
			// 		displayError.textContent = '';
			// 	}
			//
			// });

削除ではなくコメントアウトにしているのは、PayPal＆Stripe Add-onが更新した際に、ファイルの変更部分を調べるときに自分がどこを変更したのかわからなくなると困るからです。

これで、郵便番号が必須ではなくなり、消えました。

PayPal決済のカスタマイズ：redirect.php

次にPayPal決済へとリダイレクトする際の設定をいじります。

redirect.phpで定義されている関数で、PayPalに情報が渡されます。

これも自分が作ったファイルと置き換えるため、ダウンロードしてコピーします。

contact-form-7-paypal-add-on>includes>redirect.phpcutomize_redirect.phpという名前にして、使用している子テーマにincフォルダーを作成し、アップロードしてください。

子テーマ>inc>customize_redirect.php

ファイルの用意ができたら、プラグインのファイルではなく自分が作成したファイルを使用するためのカスタマイズをします。

PayPalへのリダイレクトの流れ

redirect_methods.phpというファイルで、PayPalへリダイレクトする関数を読み込んでいます。

redirect_methods.php

// hook into contact form 7 - after send
add_action('template_redirect','cf7pp_redirect_method');
function cf7pp_redirect_method() {

	if (isset($_GET['cf7pp_redirect'])) {

		// get the id from the cf7pp_before_send_mail function theme redirect
		$post_id = $_GET['cf7pp_redirect'];

		cf7pp_redirect($post_id);
		exit;

	}
}

上記コードがプラグインのデフォルトのPayPalリダイレクト部分です。

PayPal＆Stripe Add-onでは、この流れでPayPal決済へと進みます。

PayPalへのリダイレクトをカスタマイズファイルと置き換える

プラグインのfunctionは上書きできないので、ページの読み込み前にプラグインよりも先に、カスタマイズしたfunctionでPayPalにリダイレクトさせてしまいます。抜け駆けです。

ページの読み込み前に実行されるフックの優先順位を「9」にすれば、デフォルトの「10」よりも先に実行されるのでカスタマイズできます。

functions.php

//自分が作成したfunctionでPayPalにリダイレクトさせる
add_action('template_redirect','customize_cf7pp_redirect_method', 9);
function customize_cf7pp_redirect_method() {

	if (isset($_GET['cf7pp_redirect'])) {
		// get the id from the cf7pp_before_send_mail function theme redirect
		$post_id = $_GET['cf7pp_redirect'];

    require_once get_stylesheet_directory() . '/inc/customize_redirect.php'; //自分が作ったファイルのfunctionを呼び出す
		customize_cf7pp_redirect($post_id); //functionを実行
		exit;
	}
}

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

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

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

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

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

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

customize_redirect.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のオプション設定です。

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

⑦PayPalのリダイレクト先を書き換える。

これまた困ったところで、PayPal決済完了後のリダイレクト先は統一のURLしか指定できません。(有料版なら対応)

無料版では統一のURLを指定するように指示されていますが、Stripeの場合は設定画面でリダイレクト先にスラッグを指定すれば、フォームのURL/スラッグにリダイレクトしてくれます。

PayPalの場合は、特定のページへのリンクを設定しないとリダイレクトできません。

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

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

	//カスタマイズ リダイレクト先を書き換える
	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{
					//それ以外のフォームだったら、
	      }
	      $return = $site_url .$slug . $options['return'] ."/"; //設定したスラッグと連結
				if(!empty($slug)){ $options['return'] 	= $return; } //スラッグが設定されていたらリダイレクト先を置き換える
			}

先ほどの$arrayよりも前に追加します。

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

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

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

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

PayPal&Stripe Add-onが使えると幅が広がる！

デフォルトで日本円で使うとエラーや問題点の多いプラグインですが、カスタマイズによって導入可能になれば初心者でも簡単にプロっぽいクレジットカード決済を導入できる素晴らしいプラグインです。

企業サイトも個人サイトも、有名企業のようなビジネスを出来るようになります。

今回のカスタマイズは少々強引なので、問題が出る可能性があることは留意してください。

もしコードの問題点や間違いがあったら、お問合せからお知らせくださると助かります。よろしくお願いいたします。