Payment Request APIとは？〜Frontend Meetup Tokyo Vol.3 に行ってきたメモ #frontendmt

DEMO

• 買う！ってすると購入ステップへ
• 購入ステップになるとブラウザがUIを呼び出す
  • 開発者側はさわれないUI
  • ページのURLもちゃんと出る、偽装できない
  • 地味だが別ページとかでもないのでセキュリティも強固
• どのクレジットカードを使うかとかも、ブラウザが管理する
  • クレジットカード情報をいれるところもブラウザがUIを用意してる
• クレジットカード以外の支払い方法も、端末に機能があれば使えるようになる
  • 支払い方法は定数チックに渡すが、ユーザー側がそれに対応してないならUIには表示されない
• 支払う！ってするとセキュリティコードをきかれる
• Android Payでも支払いできる
• 配送先の住所を選ぶUIもブラウザが出す
• 支払い終わるとUIが閉じる

UIについて

• ブラウザが出すいじれないこういうのは、Trusted UIというらしい
• UIは仕様にはないので、いまのこれはChromeだけのUI
• 中国ではUIの評判がすこぶる悪かった
  • 中国にはもっといけてる支払いUIがあるぜ！って言われたそうな
  • 中国は支払い方法の選択肢がすごい多いが、このUIのデフォルトは1つしか表示しなかったり

ざっくりコードでみると

// 支払い方法とか商品情報とか
var supportedInstruments = [{
  supportedMethods: [
    'amex', 'diners', 'discover', 'jcb', 'maestro', 'mastercard', 'unionpay', 'visa'
  ]
}];

var details = {
  total: { label: 'Donation', amount: { currency: 'USD', value: '55.00' } },
  displayItems: [
    {
      label: 'Original donation amount',
      amount: { currency: 'USD', value: '65.00' }
    },
    {
      label: 'Friends and family discount',
      amount: { currency: 'USD', value: '-10.00' }
    }
  ]
};

var options = { requestShipping: true };

// UI呼び出し
new PaymentRequest(supportedInstruments, details, options)
  .show()
  .then((instrumentResponse) => {
    // 支払い終わったよを示す
    instrumentResponse
      .complete(true)
      .then(() => {
        // ここまでくると、支払い方法とか取れる
      })
  })
  .catch((err) => {
    // なんかエラー
  })

これ支払い終わったら自分でサーバーにデータ送るんかね？
自動的に叩くAPIのエンドポイントとか指定できるようにして欲しい気がする・・。
どうせ後で自分でサーバーにデータ送るんやろうし、`then()`後即POST後即リダイレクトな未来が見えるなー。

Extensible Web

• ローレベルなAPIが提供される
• それを組み合わせて自分たちでWebを作っていく
• JavaScriptは拡張してきた
• DOMもほぼjsやし
• HTMLも -> WebComponentsとかくるし
• しかしCSS・・

CSSは拡張できない！

• 計算後の値しか取れない
• CSSOMってもな・・
• Sass / PostCSSで構文はなんとか
• つまりはCSS is a Black Box!

そこでHoudini

• CSS-TAG Houdini Editor Drafts
• ブラウザの表示の各タイミングでフックを提供する
• CSS Typed OM
  • `px`とか`rem`とかに型が！ -> `CSSLengthValue`
  • `styleMap`ってのが生える
  • `el.style.xxx` -> `el.styleMap.get('xxx')`
  • そうするといい感じのオブジェクトが返ってくるように
• CSS Properties and Values API
  • `--my-color: green`みたいなやつに、型やら初期値やら継承可否やら決めれるように
• CSS Painting API
  • canvasライクな描画用コンテキスト
  • コード見るほうがわかりやすい↓
  • CSS Painting API Level 1
• CSS Layout API
  • `display: layout('simple-flow');`みたいなの作れる
  • CSS Layout API Level 1
• Font Metrics API
  • フォントのベースラインとか調整できるようになるかも・・？
• Worklets
  • CSS用のWorker？
• まだまだ使えるようにはならない
• けど実用的なものは早く来るかも・・？

やっぱCSS in JSが加速するぅーって感じなんかなー。