決済ならStripe まずはStripe Elementsでオンライン決済をはじめよう。

オンライン決済をStripe Elementsではじめよう

Stripeという決済方法をご存知でしょうか？

いまさまざまなオンライン決済が世の中にありますが、
ただ決済をするだけでなく
その後のシステム連携、
サポートの手厚さ
などを考えると一押しなのがStripeになります。

さらにStripeはさまざまな機能を世の中に提供しています。
一般的に世の中に知られているのが実は決済だけというのちょっと残念な面でもあります。

そのあたりはおいおいブログで取り上げるとして

単純な一回こっきりの決済がStripe Paymentといいます。

さらにStripe Paymentは大きく分けて2種類あります。

こちらの2つになります。

Stripe Checkout
WordPressのPluginとして使われている事が多いものです。
どちらかというとデザインの自由度が低いです。

Stripe Elements
世の中に出回っているサービス、
もしくはWordPressで業務系のPluginで採用されています。
デザインの自由度はCSSで変更できるのでかなり自由度は高いです。

今回はStripe Elementsにチャレンジしたので
実装したプログラミングをご紹介します。

Stripeはさまざまなプログラミング手段に対応していますが、
今回はPHPとJavaScriptを使った事例を取り上げます。

Step1)セットアップ

Stripe Elementを使うためにはStripe.jsとElementsを最初に宣言する必要があります。

PHP

 <script src="https://js.stripe.com/v3/"></script>

Stripe.jsは埋め込むことができないので参照にするようにします。

phpのheadタグのなかに記載します。

JavaScript

var stripe = Stripe('pk_test_xxxxxxxxxxxxxx');

この２つはおまじないになります。
毎回必ず書くようにしてください。

var stripe = の部分はStripeのユーザ単位ごとに
発行されるテスト・本番用の API キーを記述します。

Step2)フォームの設置

PHP

<label for="example1-name" data-tid="elements_examples.form.name_label">
名前</label&gt
<input id="example1-name" data-tid="elements_examples.form.name_placeholder" type="text" placeholder="佐藤博信" required="" autocomplete="name"&gt

<div id="example1-card"&gt</div&gt

名前、メールアドレスなどの情報を取得したいときにはinputタグを使って取得します。
stripeはクレジッドカード決済になりますのでクレジットカードの入力フィールドは必須になります。

divタグのid属性でクレジッドカードの入力フィールドを作ります。

JavaScript

 var card = elements.create('card', {
    iconStyle: 'solid',
    style: {
      base: {
〜省略〜


     },
   },
  });
  card.mount('#example1-card');

クレジットカード情報は var cardで宣言します。
この一行でクレジットカード情報に必要な項目をもっていて、同時にデザインの設定をします。

elementsのデザイン設定いわゆるスタイル設定についてはこちらをごらんください。
https://stripe.com/docs/stripe-js/reference#stripe-elements

クレジッドカード情報を作るときの第1引数は9つの中から選ぶことができます。
2020年07月14日現在

一番使われるのがcardになります。

cardの宣言一つだけで

クレジッドカード番号
有効期限
セキュリティコード
の入力画面を作ることができます。

JavaScript

  var cardNumber = elements.create('cardNumber', {
    style: elementStyles,
    classes: elementClasses,
  });
  cardNumber.mount('#example2-card-number');

  var cardExpiry = elements.create('cardExpiry', {
    style: elementStyles,
    classes: elementClasses,
  });
  cardExpiry.mount('#example2-card-expiry');

  var cardCvc = elements.create('cardCvc', {
    style: elementStyles,
    classes: elementClasses,
  });
  cardCvc.mount('#example2-card-cvc');

もしも入力フィールドを分けたい場合には
cardNumber　クレジッドカード番号
cardExpiry　クレジッドカード有効期限
cardCvc　　　セキュリティコード

上記のプログラミングのように別々に宣言します。

詳しくはこちらをご覧ください。
https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options

入力フィールドのデザインについてはこちらが参考になります。
https://stripe.com/docs/stripe-js/reference#stripe-elements

JavaScript

card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

入力したもの一つ一つに対してエラーハンドリングをしていきます。

Step3)トークンを作成する

JavaScript

//Elements で収集された情報をトークンに変換します。
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server.
      stripeTokenHandler(result.token);
    }
  });
});

いきなりトークンという言葉がでてきました。

詳しく解説しているページがありましたので引用いたします。

「トークン決済」とは？
トークン決済とは、購入者様が入力したクレジットカード情報を、
JavaScriptというプログラミング言語を用いて、
カード情報を特定できないように別の文字列に変換する(トークン化)、
高セキュリティのクレジットカード決済方式です。

ネット決済でおなじみのクレジットカード決済を、
セキュリティ面でバージョンアップした決済方式だといえるでしょう。

購入者から見ると、これまでのクレジットカード決済と画面遷移がさほど変わらないため、
トークン決済を利用しているのか、その他の決済方式を利用しているのか判別することは困難です。

しかし、裏側のシステム的なデータのやりとりが全く異なるものですので、詳しく説明します。

引用-
トークン決済とは？高セキュリティのクレジットカード決済方法
https://www.yamatofinancial.jp/learning/payment/what-is-token-creditcard-payment.html

小難しい話でしたがカンタンにいうとクレジッドカードのような機密性の高いデータを
やりとりするときにセキュリティの高い通信方法と思っていただいて大丈夫です。

トークンが使えることの利点として

• カード情報が加盟店を経由しない
• カード情報を特定できない

というものになります。

ここのプログラミングでは
自分のサーバーに送る前にstripe.createTokenでstripeに情報を送って
クレジッドカードのチェックをします。

result.errorでエラー情報が取得できます。

返却されたエラー情報にもとづき処理を行ってください。
詳しくはこちらを御覧ください。
https://stripe.com/docs/api/errors

Step4)トークンを自社のサーバーへ送る

JavaScript

function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

これでクライアント側の処理は終了です。
お疲れさまでした。

この後はサーバー側に処理を渡す形になります。

YouTubeにも動画公開中

まとめ：Stripeをシステムに組み込むときにはStripe Elementsがおすすめです

Stripe Elementsを使うと自由度の高いデザインができるので使いやすい決済画面を
作ることができます。

決済画面が使いづらいとユーザが離脱する恐れがありますので
Stripe Elementsが使えると安心ですよね。

ぼちぼちとやっていきます。

今回の記事を書くにあたりこちらの記事を参考にいたした。
感謝です。

Stripe.js & Elements を利用して決済フローを理解する
https://qiita.com/y_toku/items/7e51ef7e69d7cbbfb3ca

Stripe Elementsをカスタマイズしてクレジットカード入力のユーザービリティを向上させる
https://dev.classmethod.jp/articles/customize-stripe-elements/

[PHP] オンラインカード決済サービスStripe Elementの使い方
https://agohack.com/stripe-js-v3-elements/

Stripe API ライブラリのインストール方法
https://agohack.com/setup-stripe-api-libraries/

こちらがStripe　が提供しているサンプルプログラミングになります。
一度覗いてみるといいですよ
https://stripe.dev/elements-examples/

ここまで読んでくださってありがとうございました。
ではまた次のブログでお逢いしましょう

島村竜一 Ryoichi Shimamura

仕事の生産性をあげるためさまざまな方法を試しました。その結果UiPathにたどり着き現在UiPathを使った業務効率化の開発、講師の仕事をしています。

講師、開発などの相談はお問い合わせからお願いします。

https://goodsystem.jp/lecture-request