電子決済導入。第5関門「Alipay決済導入成功!」Part3

Alipay決済の個人導入完結編です!

実装方法だけ知りたい人は3章から読んでください。

 

これまでの振り返り

 

これまでいくつかAlipay決済を個人で実装する記事を書いてきました。

WordPressで販売サイトを作る

電子決済導入。第2関門「WordPressプラグインを調査」
は電子決済のAlipayやWeChatを使用してお金を払っていることを述べました。 また、多くの中国人はクレジットカードは持っていないが、デビットカードは持っていることも述べました。 デビットカ...
電子決済導入。第3関門「決済代行会社の選択」
けの電子決済を行うために、銀連デビットカードに対応したホームページを作成する方針を述べました。また、ホームページを作成は、ECサービスは使わないで、Wordpressというツール使って自前で行うことを述べました。 ...

販売サイトということで、サイト上からお金の支払いができるようにします。そこで使うのがStripe決済をサポートしたプラグインです。Stripeはそれ自体は金融機関ではありません。金融機関とのやりとりを仲介してくれる会社です。

そして目標の金融機関はAlipayになります。

電子決済の流れ

  1. 中国人がOSHIMAサイトにアクセスする
  2. 何か買う。Stripe決済画面が表示される
  3. StripeとAlipayでやり取りする
  4. OSHIMA銀行口座に商品代が振り込まれる

Stripe決済の中でAlipayとのやりとりが可能なのはWooCommerce Stripe Payment Gatewayというプラグインです。このプラグインを使ってStripe決済画面を表示させました。

電子決済導入。第5関門「Alipay決済導入成功!」Part2
導入成功について書きました。 その続きで、中国人相手に支払い確認ができたので、さくっと説明します。 Alipay(支付宝)携帯アプリ これです!セットアップは中国に居ないとできな...

そして中国人にテスト商品を購入してもらう。OSHIMA銀行口座に商品が振り込まれる予定が支払いキャンセルされてしまった。

ここまでが前回の内容です。

Stripe復習

 

今更だけど復習します。

Stripe決済方法

2種類あります。

Checkout方式

StripeCheckout方式

  • Stripe推奨フォームが簡単に実装できる。
  • 細かいカスタマイズはできない
  • Alipay使えない

Stripe.js方式

  • 実装は難しいけど、細かい調整が可能。車でいうとマニュアル運転のようなもの
  • Alipayが使える

今回はStripe.js方式で実装します。

以降の記事は全部Stripe.js方式を使った場合になります。

Stripe決済フロー

Stripeはマニュアルが超優秀です。Paypalとは比べ物にならないくらいw

Stripe-Alipayマニュアル

マニュアルをかみ砕いて説明するとこんな感じです。

1.Sourceオブジェクトを作る

これは決済画面を表示したときの状態です。ステータスがpendingになっているので1時間以内に次のステップに進める必要があります。

2.chargeableオブジェクトを作る

これは決済画面で支払いボタンを押した後。6時間以内に次のステップに進める必要があります。

3.chargeオブジェクトを作る

chargeオブジェクトを作ると自分の銀行に入金されます!

つまり、単純に、決済画面で支払いボタンを押しただけ(chargeableオブジェクトまで作った。chargeオブジェクトを作っていない)では自分の銀行に入金するまでは進みません。

Webhook

Webhookマニュアル

Stripeでは各オブジェクトの生成をトリガとしてWebhookを送信することができます。WordpressでWebhookを受信できるようにして、その窓口にStripeマニュアルのPHPコードを記述します。

僕が参考にしたWebhookの参考はこちら

WordPressに Webhookの受信窓口を作る - Qiita
して、WordPressで新しい投稿を作成するためのプログラム。 まずは、テーマの `functions.php`かまたは、プラグインなどを作成して、新しいアクションフックを定義します。 ```php add_...

 

StripeでAlipayを使う

 

実装方法をメモしておきます。やりたいことは

  • WordPressサイト
  • Alipayによる支払い
  • お金を払うと有料会員になれる
  • ※ショッピングカートを使ったECサイトではないのでご注意を!そんなに差はありません

Stripeへの会員登録はここでは触れません。あとホームページのhttps化が必要です。

ユーザの操作は、

決済ボタン

  1. 支払いボタンをクリック
  2. Alipayの支払い画面に遷移し、支払いQRコード表示
  3. 操作がAlipayアプリに移って支払いを完了させる
  4. thankyouページに遷移してユーザを有料会員にする

Alipay支払いQRコード

Stripeライブラリのダウンロード

stripe/stripe-php
y for the Stripe API. . Contribute to stripe/stripe-php development by creating an account on GitHub.

ここからダウンロードします。ダウンロードしたファイルを解凍してサーバに格納します。格納先は自分の使っているthemesの下です。

決済ボタンの設置

javascriptでのコーディングになります。Stripeマニュアルを参考にして進めます。。と、普通のサイトならここで終わりますw

そしてマニュアル見ても分からないじゃん!となり、他の文献を彷徨う事にwここはJavascriptの知識が要るので。

簡単実装方法

電子決済導入。第5関門「Alipay決済導入成功!」
これで大きく野望に近づきましたw経過をダイジェスト版でお送りします。 概要 本ブログに初めて来た人のために説明します。 Alipayって何? 中国人はほとんど財布を持ち歩いていませ...

↑に紹介したプラグインWooCommerce Stripe Payment Gateway (Credit Card, AliPay, BitCoin, Apple Pay)をダウンロードします。

せっかく今動いているコードがるので拝借しちゃいましょう。

  1. ダウンロードしたファイルからeh_stripe_checkout.jsとalipay.jsをサーバに格納する
  2. WooCommerce Stripe Payment GatewayプラグインとWooCommerceを併用して表示できるcheckoutページを参考にボタンを設置する
  3. 決済後のリダイレクト先が指定できるので自サイトのthankyouページにする
支付2.91元,您就能成为VIP会员!
<script type='text/javascript' src='https://checkout.stripe.com/checkout.js'></script>
<script type='text/javascript'>//<![CDATA[
    var eh_stripe_val={"key":"pk_live_●●●●●●","i18n_terms":"Please accept the terms and conditions first","i18n_required_fields":"Please fill in required checkout fields first"};
    //]]></script>
<script type='text/javascript' src='https://exsample.com/wp-content/●●●●●●/eh_stripe_checkout.js'></script>
<script type='text/javascript' src='https://js.stripe.com/v3/'></script>
<script type='text/javascript'>//<![CDATA[
    var eh_alipay_params={"button":"立即购买","key":"pk_live_●●●●●●","amount":"50","currency":"jpy","redirect":"https:\/\/exsample.com\/thankyou\/"};
    //]]></script>
<script type='text/javascript' src='https://exsample.com/wp-content/●●●●●●/eh-alipay.js'></script>
<form name="checkout" method="post" class="" action="" enctype="multipart/form-data">
    <span class="button alt" style="text-align: center;" id="eh_alipay_payment2">立即购买</span>
</form>

大体こんな感じになります。これはcheckoutページのソースコードから支払いボタンの箇所を抜粋したものです。

【補足】amount”:”50″,”currency”:”jpy”というのは50円の商品という意味です。この商品代を支払う場合、Alipay側の表示は、2.91元(約50円)になります。currency指定は自国の通貨のみ可能です。

【補足2】WooCommerceに関係するStripeのプラグインは2つあります。

  1. WooCommerce Stripe Payment Gateway
  2. WooCommerce Stripe Payment Gateway (Credit Card, AliPay, BitCoin, Apple Pay)

1はWooCommerceにSteipe決済を対応させるものです。2は、そこからさらにStripeのAlipayを追加するものです。eh_stripe_checkout.jsとalipay.jsは2の中にあります。

Stripeから送信されるWebhookをWordpressで処理

functions.phpにStripeのマニュアルを参考にして処理を書きます。

add_action('wp_ajax_stripeHook', 'stripeHook');
add_action('wp_ajax_nopriv_stripeHook', 'stripeHook');
function stripeHook() {

    global $wpdb;
    require_once 'vendor/stripe/init.php'; //★ライブラリのパス

    // Set your secret key: remember to change this to your live secret key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
    \Stripe\Stripe::setApiKey("sk_live_●●●●●●");

// You can find your endpoint's secret in your webhook settings
    $endpoint_secret = "whsec_●●●●●●";

    $payload = @file_get_contents("php://input");
    $sig_header = $_SERVER["HTTP_STRIPE_SIGNATURE"];
    $event = null;

    try {
        $event = \Stripe\Webhook::constructEvent(
            $payload, $sig_header, $endpoint_secret
        );
    } catch(\UnexpectedValueException $e) {
        // Invalid payload
        http_response_code(400); // PHP 5.4 or greater
        exit();
    } catch(\Stripe\Error\SignatureVerification $e) {
        // Invalid signature
        http_response_code(400); // PHP 5.4 or greater
        exit();
    }

// Do something with $event

    if ( strpos($event->type,'source.chargeable') !== false ) {
        $charge = \Stripe\Charge::create(array(
            "amount" => $event->data['object']['amount'],
            "currency" => $event->data['object']['currency'],
            "source" => $event->data['object']['id'],
        ));
    }
    elseif ( strpos($event->type,'source.canceled') !== false ) {
        wp_mail( get_option( 'admin_email' ), "[ " . wp_specialchars_decode( get_option( 'blogname' ) ) . " ][Admin] ".__( 'Stripe PAY Canceld' ), $event );
    }
    elseif ( strpos($event->type,'charge.succeeded') !== false ) {
        //wp_mail( get_option( 'admin_email' ), "[ " . wp_specialchars_decode( get_option( 'blogname' ) ) . " ][Admin] ".__( 'Stripe PAY Canceld' ), $event );
    }
    else {
        wp_mail( get_option( 'admin_email' ), "[ " . wp_specialchars_decode( get_option( 'blogname' ) ) . " ][Admin] ".__( 'Stripe PAY Unkown' ), $event );
    }

    http_response_code(200); // PHP 5.4 or greater

}

ポイントはchargeableオブジェクトのWebhookを受信したら、chargeオブジェクトを作るという処理です。これで、支払いボタンをクリックしてから、自分の銀行までの振り込みが全て自動化できます。

それ以外の内容のWebhookだったら、とりあえずメールで知らせます。

thankyouページに会員登録処理を記述

ご自由にどうぞ!

【補足】thankyouページのセキュリティとして念のためリファラを確認しておきます。Alipayサイトからのリダイレクトでないと処理を継続しない、という作りにします。Alipayからのリダイレクトは2パターンあります。

  • 決済ページのQRコードをAlipayアプリでスキャンした場合
  • 決済ページのQRコードをAlipayアプリが検出し、Alipayアプリが開く場合(スマホだけで完結パターン)

前者のリファラは

https://unitradeprod.alipay.com/acq/cashierReturn.htm?sign=●●パラメータ●●&outTradeNo=●●パラメータ●●&pid=●●パラメータ●●&type=●●パラメータ●●

↑こんな感じです。後者のリファラはxxx(手元に情報が無いので後から出します)です。

 

支払い確認

 

Stripeのダッシュボードからイベントを確認します。

Stripeイベント成功

支払いボタンをクリックすると2つのイベントが生成されます。

  • chargeableオブジェクトができる
  • chargeaオブジェクトができる(支払いが完了する)

Webhook送信成功

そして両イベントのWebhook送信も成功していることを確認します。

 

Alipay決済個人導入まとめ

 

ここに書いてあるやり方で行けます!長かったー、一年越しでようやく実現できました!

Stripe補足

本人確認が必要なのは、初めて自分の銀行への振り込みを行う時です。今回で言うとchargeオブジェクトを作った場合。それまでは特に求められません。

Stripe公開情報

プロフィールに自分のホームページを設定する必要があります。最初はJimdoで作ったTOPだけのテストページでもOKです。そのページに見られてはまずいものが置いてあると、Stripeアカウントが強制解約されるのでご注意をw

 

タイトルとURLをコピーしました