Frontrend Vol.11 - 2017年度フロントエンド大反省会 https://frontrend.connpass.com/event/78896/
@twitter https://twitter.com/negimic
私が WebComponents オネーサン です株式会社サイバーエージェント根岸 未来@negimic
View Slide
WebComponents とPaymentRequestAPI(PRA) でAmeba Pay を作った話
Ameba Pay とは?
Amebaの新しい共通決済システムセキュアでシンプルな決済体験を提供する
・決済機能を使いたいサービスにAmebaPayを導入・購入ボタンを押すと、PRAが実行される・サービスからページ離脱しないで決済が完了できる※PRA未対応のブラウザは、決済代行業者の決済ページへ遷移させている
つまり、AmebaPay(SDK)とは
ボタン です。決済基盤を使うための。
採用技術 について
CustomElements + ShadowDOMカプセル化購入
ESModulessdk.js => importとかそのままのやつ。bundle.js => sdk.jsをrollupで依存ファイルをバンドルしたやつ。
PaymentRequestAPI(PRA)ブラウザネイティブの決済用フォーム(ブラウザに保存してる情報が使えたり)
まぁ、詳細は・・・https://1000ch.net/posts/2018/webcomponents-in-production.html
反省 というか感想?2つあります〜
WebComponents をIE11、Edge、FF 他で動かすのが 大変 でした。
https://github.com/webcomponents/webcomponentsjsEdge ではwebcomponents-sd-ce.jsIE11 ではwebcomponents-lite.jsじゃないと動かなくて、悲しい出し分けが発生。
IE11 で HTMLElement の constructor が function じゃない問題でCustomElements がエラーになるので、悲しいpatchをあてました。
PaymentRequestAPI の動作確認が結構 大変 でした。
開発が活発なので(?)、突然動かなくなったりした。
・日本語入力で濁点が打てない問題・1025円以上の決済でエラー・shimの想定外の実装などなど
Chromeの開発チームに修正依頼、新境地でした(その節はありがとうございました)・日本語入力で濁点が打てない問題・1025円以上の決済でエラー・shimの想定外の実装などなど
・日本語入力で濁点が打てない問題・1025円以上の決済でエラー・shimの想定外の実装などなどTwitterでnullつらい〜ってつぶやいたら解決しました(その節は本当にありがとうございました)
大変だったけど、やってよかった〜