🧊

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

大手町は微妙に遠いと思いつつ今のところ皆勤賞になってるこのシリーズ。
日本経済新聞社はフロントエンドエンジニアを募集しています!とのことです。

PaymentRequest API by @sideshowbarker

資料は見つけたら追記

仕様はこれ↓

Payment Request API

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後即リダイレクトな未来が見えるなー。

Houdini by @myakura

資料は(ry

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
  • CSS Layout API
  • Font Metrics API
    • フォントのベースラインとか調整できるようになるかも・・?
  • Worklets
    • CSS用のWorker?
  • まだまだ使えるようにはならない
  • けど実用的なものは早く来るかも・・?

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