19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

StripeとTwilio Payで電話決済

Last updated at Posted at 2018-12-12

2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。

はじめに

この記事は、Stripe Advent Calendar 2018の12月11日分の投稿となります。
すみません、一日遅れてしまいました・・・。

Twilio Payとは

Twilio Payとは、今年10月にサンフランシスコで開催されたTwilio年次イベント「SIGNAL」で発表された、音声通話でクレジットカード決済をするための機能です。
Twilio-Pay-Announcement.png

皆さんご存知のように、クレジットカード決済システムにおいては、不正利用を防止する観点から非常に厳しいセキュリティ要件があります。現在主流なものとして、「PCI DSS基準」と呼ばれる、国際ペイメントブランド5社(AMEX、Discover、JCB、Master、VISA)が共同で策定したカード情報国際統一基準があります。
今回Twilio社は、このPCI DSS基準を満たす決済システムとして、「Twilio Pay」を発表しました。
ただ、Twilio自体はカード決済システムを持っているわけではなく、実際にはStripe社の決済APIと連携して、決済自体はStripe上で行われます。
pay-diagram-1-final.width-800.png

気になるTwilio Payの利用料ですが、決済金額には依存せず、成功した決済もしくはトークン生成1回につき、15円(税込み)となっています。

<Pay>動詞

Twilio Payの機能は、TwiMLと呼ばれるTwilioに指示を与える命令セットの中に新設された<Pay>動詞で実現します。
以下に簡単な<Pay>動詞の例を上げます。このサンプルは、$99.99の決済を行うためのものです。

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Pay chargeAmount="99.99" postalCode="false" action="https://xxxxx-xxxxx-xxxx.twil.io/pay-action"/>
</Response>

このTwiMLを実行すると、Twilioがユーザに対して自動音声を使って、カード情報、有効期限、セキュリティコードをヒアリングし、取得したカード情報と決済金額で、Stripe社のAPIを通じて決済を行います。決済の結果は、actionで指定したWebhook先に通知されます。Webhookでは、決済結果と併せてカード情報の代わりのStripe社が払い出した顧客トークン(顧客を識別するための情報)が戻ります。このトークンを利用することで、次回以降はカード情報を聞かずに決済をすることもできます。

<Pay>動詞の詳しいマニュアルは、こちらにあります。

Twilio Payのセットアップ

Twilio Payを利用するためには、以下の手順でTwilio側にセットアップが必要です。なお、Stripeのアカウントは事前に作成しておく必要があります。

  • Twilioの管理コンソールにログインします。
  • Programmable Voiceの中の設定を選択します。
  • PCI ModeEnable PCI Modeボタンを押して、PCIモードを有効にします。

スクリーンショット 2018-12-12 09.54.05.png

  • 利用規約のダイアログが開くので、Accept and Continueボタンを押します。
    スクリーンショット 2018-12-12 09.55.13.png

  • STATUSが「Enabled」になったことを確認して、Saveボタンを押して、設定を有効にします。

  • 続いて、同じくProgrammable Voiceの中の**<Pay>Connectors**を選択します。
    スクリーンショット 2018-12-12 09.58.17.png

  • Stripeのアイコンをクリックします。
    スクリーンショット 2018-12-12 09.59.16.png

  • Stripe Connectorの詳細が表示されるので、インストールボタンを押します。

  • 利用規約の同意画面が表示されるので、I agree to Twilio, Inc's Terms of Serviceにチェックを入れて、同意してインストールボタンを押します。
    スクリーンショット 2018-12-12 12.50.50.png

次に、Stripeとの連携設定を行います。

- ユニーク名には、「Default」と入力します。これ以外の文字列を入れることもできますが、その場合は<Pay>動詞でpaymentConnectorパラメータを使って設定した名前を指定する必要があります。
- MODEは、「test」もしくは「live」のいずれかが選択できます。testを選ぶとStripeのテスト環境、liveを選ぶと本番環境になります。
スクリーンショット 2018-12-12 12.52.47.png

  • Connect with Stripeボタンを押します。
    スクリーンショット 2018-12-12 12.55.44.png

  • Stripeを使用してサインインボタンを押します。
    Stripe_welcome.png

  • Stripeのアカウントでログインします。

  • ログインが成功すると連携が完了し、Twilioの管理コンソールに戻ってきます。

  • STATUSConnected in Test Mode(もしくはLive Mode)になっていることを確認します。

以上でセットアップは完了です。

決済してみる

では早速決済をしてみましょう。
liveモードでセットアップした方は、実際に決済が走りますので注意してください。

  • Twilioの管理コンソールから、Runtimeを選択し、さらにTwiML Binsを選びます。
  • Create a new Binsもしくは、赤いプラスアイコンを押して、新しいTwiML Binsを作成します。
  • FRIENDLY NAMEには、なにか適当な名前をいれます。
  • TWIMLの欄を以下のように書き換えます。
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Pay chargeAmount="990" currency="jpy" postalCode="false" action="https://">
    <Prompt for="payment-card-number">
	    <Say language="ja-JP" voice="Polly.Mizuki">クレジットカード番号を入力してくださ</Say>
    </Prompt>
    <Prompt for="expiration-date">
	    <Say language="ja-JP" voice="Polly.Mizuki">有効期限を、月と年のそれぞれ2桁の数字で入力してください</Say>
    </Prompt>
    <Prompt for="security-code">
	    <Say language="ja-JP" voice="Polly.Mizuki">セキュリティコードを入力してください。セキュリティコードは、カードの裏面に記載されている3桁のコードです。</Say>
    </Prompt>
  </Pay>
</Response>

スクリーンショット 2018-12-12 13.22.35.png

  • Createボタンを押して、作成したTwiMLを保存します。

最後に電話番号にTwiMLを紐づけます。

  • Twilioの管理コンソールから、Phone Numbersを選択します。

  • すでに購入済みの050番号があれば、そちらを選びます。もしない場合は、番号を一つ購入してください。

  • 購入した050番号の設定画面を開き、通話着信時の設定から、「TwiML」を選択、さらに右側のプルダウンから、先程作成したTwiMLを選択します。
    スクリーンショット 2018-12-12 13.26.54.png

  • 保存ボタンを押して、設定を保存します。

テスト

最後に決済をテストしてみましょう。

  • 今設定した電話番号に電話をかけてみます。
  • 「クレジットカード番号を入力してください」とガイダンスが流れたら、「4242424242424242#」(テスト用のカード番号)を入力します。
  • 「有効期限を、月と年のそれぞれ2桁の数字で入力してください」とガイダンスが流れたら、「1021#」(これ以外でも有効期限が正しければ何でもOK)と入力します。
  • 「セキュリティコードを入力してください。セキュリティコードは、カードの裏面に記載されている3桁のコードです」とガイダンスが流れたら、「111#」(3桁の数字なら何でもOK)と入力します。
  • ここまで進むと電話が切れますので、Stripeの管理画面にログインして990円の決済が完了していることを確認します。

スクリーンショット 2018-12-12 13.34.24.png

19
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?