Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

180112 nishimoto-stripes-v1

446 views

Published on

アクセシブルな決済サイトの試作 with Stripe + Python + NVDA

Published in: Technology
  • Be the first to comment

  • Be the first to like this

180112 nishimoto-stripes-v1

  1. 1. アクセシブルな決済サイトの試作 with Stripe + Python + NVDA 西本 卓也 nishimotz@gmail.com / @24motz 2018-01-12 1
  2. 2. pcn-hiroshima.connpass.com 2 第3回 1月27日(土曜) 会場 fabbit 広島駅前
  3. 3. すごい広島 with Python • 2017年4月から毎月の最後の水曜日の夜に開催 • 2017年3月 Python Boot Camp in 広島 • 2016年 / 2015年は PyCon mini Hiroshima を開催 • Python に興味がある人が集まって情報交換 • Slack PyConJP Fellow #hiroshima • http://pyconjp-fellow.herokuapp.com/ • 今年は PyCon mini Hiroshima をやりたい 3
  4. 4. NVDA / NVDA日本語チーム 4
  5. 5. アクセシブルな決済サイト • 要求 • スクリーンリーダー利用者がちゃんと使える • 具体的には • iOS : Safari + VoiceOver • Windows : Firefox + NVDA • 特定の環境向けのワークアラウンドはしない • アクセシビリティの Web 標準に準拠 5
  6. 6. 決済プラットフォームの評価 • テストモード • ユーザー環境と同じ条件の検証が不可欠 • 決済を実行してみないと試せない、では困る • UIやライブラリの検証 • サイトに簡単に組み込める=問題があっても自力で直せない • 最初はよかったのに突然悪くなることもあり得る • 外部ライブラリを動的に読み込んでいる場合 • 場合によってはあきらめて自前で作る 6
  7. 7. Stripe Checkout • https://stripe.com/docs/checkout/tutorial 7
  8. 8. Python + Flask 8
  9. 9. Tabキーでフォーカス移動すると • モーダルダイアログの外にも行ける(実行もできる) • ダイアログのクローズにフォーカスを移動できない 9
  10. 10. 決済情報を保存する 10
  11. 11. コーディングWebアクセシビリティ • 6-3「ダイアログ」注意点 • モーダルダイアログが開いている間は その他の要素を操作させない • ブラウザのアドレスバーなどに フォーカスを移動できるように • ダイアログを閉じるときに、 そのダイアログを呼び出した要素に フォーカスを戻す 11
  12. 12. Stripe Elements (v3) • https://stripe.com/docs/stripe-js • https://stripe.com/elements 12
  13. 13. 試作サイト • https://stripe.com/docs/stripe-js/elements/quickstart 13 <form action="/pay" method="post" id="payment-form"> <div class="form-row"> <label for="card-element">クレジットカード情報を入力してください</label> <div id="card-element"></div> <div id="card-errors" role="alert"></div> </div> <button type="submit">送信する</button> <input type="hidden" name="stripeToken" id="stripeToken" value="" /> </form>
  14. 14. クライアント / サーバーサイド 14 var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); stripe.createToken(card).then(function(result) { if (result.error) { // handle error } else { document.getElementById('stripeToken').value = result.token.id; form.submit(); } }); }); @app.route('/pay', methods=['POST']) def pay(): # handle login / logout / email stripeToken = request.form['stripeToken'] amount = 1000 customer = stripe.Customer.create( email=email, source=stripeToken ) charge = stripe.Charge.create( customer=customer.id, amount=amount, currency='jpy', description='Flask Charge' ) return render_template('pay.html', ...)
  15. 15. まとめ • Stripe looks good to me • TODO • VoiceOver 検証 15

×