Help us understand the problem. What is going on with this article?

TwilioPay(電話でペイ)で勉強会の会費を徴収してみた

More than 1 year has passed since last update.

この記事は

Twilio Advent Calendar 2018の12月16日分の投稿です。
昨日は、@mobilebizさん「Twilio FlexでLINE Channelを連携させる方法」でした。

Twilio Payとは

2018年10月にサンフランシスコで開催されたTwilioのビックイベント「SIGNAL」で発表された、音声通話でクレジットカード決済をするための機能です。PCI DSS基準を満たす決済システムを簡単に導入できる機能です。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38363034362f32383832643737382d306465312d306330342d636534352d6530353937653363313161332e706e67.png
詳しくはTwilioエバンジェリスト高橋さんのQiita記事で紹介されてますので、そちらをご覧いただくのが確実です。作り方も画像付きで説明されているのでわかりやすいです。
ちなみに、現在は、stripeのみの利用となっていますが、<Pay> Connectorsというくらいだから、今後はstripe以外も使えるようになるといいなと思っています。(個人の感想です)

ざっくり作ってみました。

先日開催しました【TwilioJP-UG 岡山 #2】Twilio SIGNAL報告会 in OKAYAMAにて、ハンズオンを実施し、そこで実装しました。
ほぼ、高橋さんのQiita記事でやっていることとほとんど同じなのですが、クレジット決済の結果を取得し、電話でお伝えするようにしてみました。

着電時のTwiML(TwiML Binsで実装)

ポイントは、<pay>動詞にactionに、結果を通知する先を指定することです。

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Say language="ja-JP">勉強会のご参加ありがとうございます。本日の会費は300円です。</Say>   
  <Pay chargeAmount="300" currency='jpy' action="[ここに通知先を指定]" postalCode="false" paymentConnector="default">
    <Prompt for="payment-card-number">
      <Say language="ja-JP">クレジットカード番号を入力してください。</Say>
    </Prompt>    
    <Prompt for="expiration-date">
      <Say language="ja-JP">有効期限を、月と年のそれぞれ2桁の数字で入力してください。</Say>
    </Prompt>    
    <Prompt for="security-code">
      <Say language="ja-JP">セキュリティーコードを入力してください。カードの裏に記載されています。</Say>
    </Prompt> 
  </Pay>
</Response>

結果を受け取る(Twilio Functionsで実装)

上記、「ここに通知先を指定」について、今回は、Twilio Functionsで実装しました。
※自身のWebサーバーで受けることも可能です。
※TwilioFunctionの場合だと、PropertiesのPATHの値を、上記actionに指定します。

exports.handler = function(context, event, callback) {
  let twiml = new Twilio.twiml.VoiceResponse();

  switch (event.Result) {
    case "success":
      text = "会費300円の決済が完了しました。ご利用ありがとうございました。";
      break;

    case "payment-connector-error":
      text = "エラーが発生しました。決済に失敗しました。";
      console.log(decodeURIComponent(event.PaymentError));
      break;

    default: 
        text = "決済に失敗しました。";
    }
    twiml.say({ language: 'ja-JP' },text);
    callback(null, twiml);
};

こちら、POSTで呼び出されるのですが、パラメータとしては以下のようなものが設定されていました。
※2018年12月16日現在
※決済関連だけ赤字にしました。その他は通常の着信と基本的に同じ。
※詳しくは仕様をご確認ください。

パラメータ 説明 (個人の感想です)
AccountSid TwilioのAccountSid AC******************************
ApiVersion TwilioのいつものApiVersion 2010-04-01
Called 決済に利用したTwilio側の電話番号(E.164形式) +8150********
CalledCity 受信者情報(地域) 空文字
CalledCountry 受信者情報(国) JP
CalledState 受信者情報(状態) 空文字
CalledVia 受信者情報(電話番号) 050********
CalledZip 受信者情報(Zip) 空文字
Caller 発信者情報(電話番号 E.164形式) +8190********
CallerCity 発信者情報(地域) 空文字
CallerCountry 発信者情報(国) JP
CallerState 発信者情報(状態) 空文字
CallerZip 発信者情報(Zip) 空文字
CallSid CallSid CA******************************
CallStatus 通話の状態 in-progress
Direction 発着信の種別 inbound
ExpirationDate クレジットカード有効期限 YYMM
ForwardedFrom Twilio番号 050********
From 発信者情報(電話番号 E.164形式) +8190********
FromCity 発信者情報(地域) 空文字
FromCountry 発信者情報(国) JP
FromState 発信者情報(状態) 空文字
FromZip 発信者情報(Zip) 空文字
PaymentCardNumber クレジットカード番号(下4桁以外マスク) xxxxxxxxxxxx0000
PaymentCardPostalCode ZIPコード(入力させてない) 空文字
PaymentCardType クレジットカードの種類 mastercardとかvisaとか
PaymentConfirmationCode 決済確認コード(stripe側のコード) ch_********************yzf
PaymentError 決済エラー情報 空文字。エラーだったら入る?
PaymentToken 決済トークン 空文字
Result 決済結果 success
SecurityCode クレジットカードのセキュリティー番号。常に"xxx" xxx
To 決済に利用したTwilio側の電話番号(E.164形式) +8150********
ToCity 受信者情報(地域) 空文字
ToCountry 受信者情報(国) JP
ToState 受信者情報(状態) 空文字
ToZip 受信者情報(Zip) 空文字

特に、PaymentConfirmationCodeを取得することができ、これが、stripeの管理画面の以下の値と一致しています。スクリーンショット 2018-12-16 22.58.36.png
これらの値を利用すれば、他システムと連携できたり、決済後SMSで領収書のURLを送付できたりと、いろいろできそうです。

会費を徴収してみました。

2018年12月15日に開催しましたJP_Stripes Okayama #1にて徴収してみました。



未だかつてない空気感での会費徴収が斬新でしたね。

ちなみに、徴収した金額はStripeの管理画面で確認することができます。
上記stripeの画面キャプチャ参照。左メニューの「支払い」で表示されます。

また、支払い側のクレジットカード利用明細には、
ST [明細書表記欄に入力された値]
となります。左メニューのビジネス設定のクレジットカードの明細書欄に、お客様にわかりやすいちゃんとしたものを設定しておくことが大事。
スクリーンショット 2018-12-16 23.51.56.png

なお、ご利用費用は、、、
Twilioは、1決済につき、15円。決済が成功した場合にのみ課金。チャージから引き落とし。
Stripeは、決済金額の3.6%が手数料として課金。1決済ごとの入金金額から差し引かれます。

まとめ

いままで、電話決済を作ろうとすると、こんなに簡単に実装はできなかったはず。
TwilioPayとStripeでこの電話決済が非常に身近になったと思います。
日本円で決済できるようになったのも魅力的。
今後、Stripe以外も連携をすると思いますので、そちらにも期待ですね(個人の感想です)
調べてみたのですが、まだ、Twilio Studioにはなさそうだったので、そちらに導入されることも期待しています。TwilioFlexとの連携なども今後試してみたいです。

明日は@sh-ogawaさんの「Twilioに追加されたPolly連携が有用なのかをドキュメントからまとめた」です。
Twilio Advent Calendar 2018

takeshifurusato
TwilioJP-UG Okayama(Twilio Champions) / JAWS-UG Okayama / JP_Stripes Okayama / Okayama WordPress Meetup / SORACOM UG Okayama
https://takeshi.furusato.blog
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした