WordPressにAlipay決済を導入する方法2018

WordPressにAlipay決済を導入する方法について解説します。

本技術ブログの振り返り

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

WordPressで販売サイトを作る

Wordpress、Stripe、Alipayの組み合わせで、決済を導入する方法を述べます。 2つに分けて説明します。 Al...
Wordpress、Stripe、Alipayの組み合わせで、決済を導入する方法を述べます。 2つに分けて説明します。 Al...

中国向けECサイトということで、中国人がサイト上からお金の支払いができるようにします。

そこで使うのがStripe決済をサポートしたプラグインです。Stripeはそれ自体は金融機関ではありません。金融機関とのやりとりを仲介してくれる会社です。

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

電子決済の流れ

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

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

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

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

Stripe復習

今更だけど復習します。

Stripe決済方法

2種類あります。

Checkout方式

StripeCheckout方式

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

Stripe.js方式

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

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

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

Stripe決済フロー

Stripeはマニュアルがとても優秀です。

Stripe-Alipayマニュアル

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

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

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

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

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

【補足】Stripeでクレジットカード決済を行うと、支払いが完了すると同時に決済の状態は「charge」になります。Alipayの場合はいきなり「charge」にはならず、「chargeable」を経由します。つまり手動で「chargeable」を「charge」に変える必要があります。

やり方は後述します。

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

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

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

Webhook

Webhookマニュアル

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

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

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

StripeでAlipayを使う

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

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

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

ユーザの操作は、

決済ボタン

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

Alipay支払いQRコード

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

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

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

決済ボタンの設置

javascriptでのコーディングになります。Stripeマニュアルを参考にして進めます。

簡単実装方法

以前の投稿で、中国人は電子決済のAlipayやWeChatを使用してお金を払っていることを述べました。 また、多くの中国人はクレジットカード...

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

プラグインが持っているJavaScriptファイルを自サイトに読み込ませます。

  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ページに課金後の処理を記載

Alipay決済が完了するとthankyouページに遷移します。thankyouページのURLは「簡単実装方法」の箇所で書いています。この部分に課金後の記載します。

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

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

前者のリファラは

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

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

支払い確認

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

Stripeイベント成功

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

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

Webhook送信成功

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

補足

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

Stripe公開情報