Stripeの決済画面とJavaScriptのAjax(非同期通信)について #JP_Stripes
目次
決済サービスのStripeで最も特徴的なところは、決済をしてもStripeの画面には遷移しないことです。ネットショッピングでお買い物をしたユーザーからすると、全てそのネットショップで決済が完結しているように見えます。
非同期通信（JavaScript）と同期通信（PHP）の比較
PHPからプログラミング学習を始めた自分からすると、「seesionとかcookieはどうでしてるの？ なんで画面遷移はしないの？」という感覚です。暇を見てはJavaScriptも学習しているので、徹底マスター JavaScriptの教科書 (新しいタブで開く)
Ajax（Asynchronous JavaScript + XML）とは、XMLHttpRequestというJavaScriptのオブジェクトを利用してWebサーバーと非同期通信を行い、DOMを利用してダイナミックにWebページを書き換えるプログラミングの手法です。
PHPの場合、sessionやcookieを介することによって、Webサーバーとクライアントの間を同期通信して画面遷移をします。一方、AjaxではWebサーバーとクライアントの間について非同期に通信するため、画面の遷移は必要ないということです。
Stripeでみる非同期通信の具体例
以前、WordPeee + WooCommerce + Stripeを用いてオンライン上で架空の果物屋さんを立ち上げるという記事(新しいタブで開く)をUPしました。そのときのネットショップを見て、Ajaxの具体例を確認してみましょう。
決済前の画面まで
まず和歌山のみかんを購入してみましょう。そうするとWordPress + WooCommerceの中でいくつか段階を踏んで決済画面にたどり着きます。
ここで架空のクレジットカード番号、カード期限日、セキュリティコードを入力をして、をクリックします。このとき一般のユーザーには見えないところで、Ajaxによる非同期通信が行われています。
決済後の画面
非同期通信を行って購入をしたため決済内容がショップ側のサイトで表示されていますが、ショップの画面からStripeの画面へは遷移していません。
一方Stripeの管理画面を確認してみましょう。こちらを確認すると、いま決済された同じ内容（金額や決済番号）の情報が表示されていることが分かります。
WooCommerceの管理画面
ちなみにWooCommerceの管理画面も確認します。こちらの方でもStripeの決済によって販売された商品の情報が表示されています。
WooCommerceの良いところは、Stripeに決済手数料（3.6%）を支払った後、正味（ネット）の収益をカスタムフィールドで分かるところです。
応用例を交えたAjaxの使い方について
いまどきのJavaScriptのテキストを見ると、Ajaxについては必ず紹介されています。ですが、今回の記事のように日常の生活のどこで使われているかを紹介しているテキストは少ないと思います（Google Mapで応用されている例はたまに見かけますが）。
このように具体的に使われているところをあらかじめ知識として知っておくと、興味がそそられてプログラミング学習がより捗るのではないでしょうか？