7月も半ばに差し掛かってしまいましたが、先日『勤務表管理システム』に決済機能を導入しました。

※2020年8月、諸事情により非公開にしました。

(お金取れるなら取ってしまおうという魂胆があります。)

これまで仕事を通しても、決済機能を導入したことが無かったので「自分にできるのか…?」と不安だったのですが、色々調査するうちにとても素晴らしいサービスを見つけたので共有しておこうと思います。

Stripeとは

今回ご紹介するのはオンライン決済用のAPIを提供するStripeというサービスです。

アプリに決済機能を導入する場合、スマホアプリなどであればその提供元であるAppleやGoogleが提供する機能を利用すればよいのですが、Webアプリの場合は独自で実装するか企業が提供するサービスを利用することになります。

独自実装はそれだけで製品レベルになってしまうので、たいていの場合は企業が提供する決済プラグインなどを利用することになるかと思います。

その際に導入費用としてお金がかかったりするのですが、Stripeは初期費用不要で、売り上げに応じた利用料金が決済金額から引かれて精算される仕組みになっています。

その為、今回私が作成したアプリの様な立ち上がりのサービスにとっては低コストで使い始めることが出来る、大変魅力的なサービスとなっています。

この辺りはAWSと一緒ですね。最近の世の中の傾向として従量課金制がどんどん増えていくのかもしれません。

Stripeの決済機能

Stripeはプラグインなどではなく、APIとして決済機能を提供しています。

自由度が高いだけではなく、Stripe自体が決済画面を提供しており、決済機能の導入に手間をかけたくないという方でも簡単に利用することが出来ます。

参考までに、Stripeが提供する決済画面は以下の様なページとなっております。

決済方法は画像で分かる通りメジャーなクレジットカードの他に、Google Payなども利用することが出来ます。

上記はChrome上で表示したモノなのでGoogle Payですが、Safariで開くとまた違うのかもしれませんね。

Angularでの実装

Stripeは決済機能をAPIとして提供していると申し上げました。

このAPIに関するドキュメントが完備されているため、そのドキュメントを読めば大抵のことは簡単に実現できてしまうのですが、いかんせん2020年7月現在日本語に対応しておりません。

Chromeの翻訳機能などを使えばある程度のことは分かりますが、ニュアンスが伝わらない時もあったり。

この辺は今後のアップデートに期待ですね。あとサーバサイドとクライアントサイドを間違えると泥沼にはまるのでお気を付けください。

参考までに、今回私が参考にしたドキュメントはコチラになります。

さて、話が逸れましたが先ほどの画面をAngularで実装するコードはたったこれだけです。

import { loadStripe } from '@stripe/stripe-js';

~(略)~

  async onPayClicked() {
    const stripe = await loadStripe('APIキー');

    stripe.redirectToCheckout(
      {
        lineItems: [
          { price: '商品のAPI ID', quantity: 1 },
        ],
        mode: 'payment',
        successUrl: 'お支払い完了後リダイレクト先URL',
        cancelUrl: 'お支払いキャンセル後リダイレクト先URL',
      }
    ).then(
      (result) => {
        
      }
    );
  }

※文字列が入っている部分に関しては適宜置き換えてください。

Angularに導入する際の注意点

これまでご紹介したStripe提供の決済画面はCHECK OUTという機能を利用しています。

コチラの機能は大変便利なのですが、決済完了・キャンセル時にページ遷移を行います。

AngularはSPAなので、トップページ以外のページに遷移させようとすると一工夫必要になってくるのです…。

これに関してはCHECK OUT以外の機能を利用するなどの方法が考えられますが、アプリの開発を急いだためにその点の追及は諦めました。

余裕があれば同じページ内での決済方法の実装も試してみたいなぁ~とは思っています。

こういったサービスがもっと仕事の場でも経験できるようになることを祈って…。

以上です。

スポンサーリンク