ブログ資料ダウンロードBCPREST手引書BCPREST運用マニュアルお問合せホーム技術ブログWordPressにAlipay決済を導入する方法20182019/4/3WordPressにAlipay決済を導入する方法について解説します。本技術ブログの振り返りこれまでいくつかAlipay決済を個人で実装する記事を書いてきました。WordPressで販売サイトを作るWordpressでAlipayのQRコードを表示させる方法Wordpress、Stripe、Alipayの組み合わせで、決済を導入する方法を述べます。2つに分けて説明します。15:07WordPressでAlipayのQRコードを表示させても中国人でないとスキャンできませんWordpress、Stripe、Alipayの組み合わせで、決済を導入する方法を述べます。2つに分けて説明します。14:27中国向けECサイトということで、中国人がサイト上からお金の支払いができるようにします。そこで使うのがStripe決済をサポートしたプラグインです。Stripeはそれ自体は金融機関ではありません。金融機関とのやりとりを仲介してくれる会社です。目標の金融機関はAlipayになります。中国人が筆者(OSHIMA)サイトにアクセスする何か買う。Gatewayというプラグインです。このプラグインを使ってStripe決済画面を表示させました。中国人にテスト商品を購入してもらう。OSHIMA銀行口座に商品が振り込まれる予定が支払いキャンセルされてしまった。ここまでが前回の内容です。Stripe決済方法2種類あります。Checkout方式Stripe推奨フォームが簡単に実装できる。実装は難しいけど、細かい調整が可能。車でいうとマニュアル運転のようなものAlipayが使える今回はStripe.js方式で実装します。以降の記事は全部Stripe.js方式を使った場合になります。Stripe決済フローStripeはマニュアルがとても優秀です。マニュアルをかみ砕いて説明するとこんな感じです。1.Sourceオブジェクトを作るこれは決済画面を表示したときの状態です。ステータスがpendingになっているので1時間以内に次のステップに進める必要があります。2.chargeableオブジェクトを作るこれは決済画面で支払いボタンを押した後。6時間以内に次のステップに進める必要があります。【補足】Stripeでクレジットカード決済を行うと、支払いが完了すると同時に決済の状態は「charge」になります。Alipayの場合はいきなり「charge」にはならず、「chargeable」を経由します。手動で「chargeable」を「charge」に変える必要があります。3.chargeオブジェクトを作るchargeオブジェクトを作ると自分の銀行に入金されます!つまり、単純に、決済画面で支払いボタンを押しただけ(chargeableオブジェクトまで作った。chargeオブジェクトを作っていない)では自分の銀行に入金するまでは進みません。WebhookStripeでは各オブジェクトの生成をトリガとしてWebhookを送信することができます。WordpressでWebhookを受信できるようにして、その窓口にStripeマニュアルのPHPコードを記述します。僕が参考にしたWebhookの参考はこちらhttps://qiita.com/seltzer/items/61f73b170ab68148cdb5qiita.comStripeでAlipayを使う実装方法をメモしておきます。やりたいことはWordPressサイトAlipayによる支払いお金を払うと有料会員になれる※ショッピングカートを使ったECサイトではないのでご注意を!そんなに差はありませんStripeへの会員登録はここでは触れません。あとホームページのhttps化が必要です。操作がAlipayアプリに移って支払いを完了させるthankyouページに遷移してユーザを有料会員にするStripeライブラリのダウンロードhttps://github.com/stripe/stripe-php/releasesgithub.comここからダウンロードします。ダウンロードしたファイルを解凍してサーバに格納します。格納先は自分の使っているthemesの下です。決済ボタンの設置javascriptでのコーディングになります。電子決済をWordpress上で実装する以前の投稿で、中国人は電子決済のAlipayやWeChatを使用してお金を払っていることを述べました。Pay)をダウンロードします。プラグインが持っているJavaScriptファイルを自サイトに読み込ませます。id="eh_alipay_payment2">立即购买</span></form>大体こんな感じになります。これはcheckoutページのソースコードから支払いボタンの箇所を抜粋したものです。【補足】amount”:”50′′,”currency”:”jpy”というのは50円の商品という意味です。この商品代を支払う場合、Alipay側の表示は、2.91元(約50円)になります。currency指定は自国の通貨のみ可能です。【補足2】WooCommerceに関係するStripeのプラグインは2つあります。Pay)1はWooCommerceにSteipe決済を対応させるものです。2は、そこからさらにStripeのAlipayを追加するものです。eh_stripe_checkout.jsとalipay.jsは2の中にあります。Stripeから送信されるWebhookをWordpressで処理functions.phpにStripeのマニュアルを参考にして処理を書きます。greater}ポイントはchargeableオブジェクトのWebhookを受信したら、chargeオブジェクトを作るという処理です。これで、支払いボタンをクリックしてから、自分の銀行までの振り込みが全て自動化できます。それ以外の内容のWebhookだったら、とりあえずメールで知らせます。thankyouページに課金後の処理を記載Alipay決済が完了するとthankyouページに遷移します。thankyouページのURLは「簡単実装方法」の箇所で書いています。この部分に課金後の記載します。【補足】thankyouページのセキュリティとして念のためリファラを確認しておきます。Alipayサイトからのリダイレクトでないと処理を継続しない、という作りにします。Alipayからのリダイレクトは2パターンあります。後者のリファラはxxx(手元に情報が無いので後から出します)です。支払い確認Stripeのダッシュボードからイベントを確認します。支払いボタンをクリックすると2つのイベントが生成されます。chargeableオブジェクトができるchargeaオブジェクトができる(支払いが完了する)そして両イベントのWebhook送信も成功していることを確認します。本人確認が必要なのは、初めて自分の銀行への振り込みを行う時です。今回で言うとchargeオブジェクトを作った場合。それまでは特に求められません。