nineyi-payment-lit v1.0.0

NineYi Payment

使用技術

• Web Component
• Lit (Google's web components library)
• TypeScript
• Webpack

待確認項目

feat

• 研究一下將 tapPay CDN 收到 shadow DOM 的可能性

chore

• 不確定 Webpack 要不要配置 babel，目前本機測試不影響
• .eslintrc 有空配置一下

工作日誌

Week 1

2021.09.27

• 於 MDN 了解 Web Component 技術 : Link
• Lit Library 框架
  • Lit : Link
  • Official Tutorial: Link
  • Tutorial provided by Google : Link

2021.09.28

• 建立開發環境 (Lit Library, Webpack 及 TypeScript)
  • Lit 官方配置建議 : Link
  • Webpack 5 Guides : Link

2021.09.29

• 進一步了解 Lit 的 Life Cycle，特別是針對 Reactive properties
  • Reactive Properties
  • Lit Component Life Cycle

• tapPay SetupSDK 遇到的問題

  tapPay 在建立時，必須先引入他們的 CDN

    <script src="https://js.tappaysdk.com/tpdirect/v5.7.0"></script>
    <script>
        TPDirect.setupSDK(APP_ID, 'APP_KEY', 'sandbox')
    </script>

  原本是想放在 shadow DOM 裏面，做到完全與頁面隔離，

  但在 shadow DOM 中取得 TPDirect 有一點問題(下方探討)，

  所以目前先用 createElement 放在 主 DOM 結構的 body 中。

  之後有時間研究一下這想法的可行性

• 探討 - Web Component shadow DOM 有沒有 window

  我以為 shadow DOM 會有自己的 window 物件，做到和 Root 的 window 物件各自為政，

  但在我測試及瀏覽的結果中，發現和我原先想的有差異，

  shadow DOM 並沒 window 物件，它也只是 window 下的其中一環。

• 不確定的相關 Issues (似乎和 tapPay 有關)

  不確定是不是在 shadow DOM 打 tapPay 服務造成的， 先觀察 ~

  

今日進度： tapPay step 1 - 2 似乎順利完成

2021.09.30

今日主要是 91 Payment SDK 這個項目的釐清，

目前可以確定的是，它會是像 tapPay, eftPay 這類第三方金流的角色，

只是目前我們先以包 tapPay 作為我們的第一步，

至於什麼時候會串接其他金流服務，未知數 ......

現階段的目標，先以包住 tapPay 的信用卡結帳 為主

• 一般結帳 v.s. 快速結帳

• 91 Payment SDK 未來願景

今日結論：

• 想好這 Web Component 的 interface ，包含 對客戶端 及 對金流服務端，都要可慮

2021.10.01

處理 typing 和 eslint 相關設定，儲存 auto fix

2021.10.04

• getPrime 遇到問題

  發現我們的信用卡欄位在 shadow DOM 中，

  TapPay 會找不到信用卡欄位，造成在 getPrime 取不到 CreditCardNumber。

  --> 先試試看用 slot 會不會改善，如果真的不行，可能只好捨棄 shadow DOM 特性了 QQ

  結論 ：

  改用 slot 來 render 我們的信用卡元素，可以成功 GetPrime，

  另外發現 slot 其實是直接 render 在 DOM 之中，

  User 若要對信用卡欄位做樣式客制化，他們可以自己來寫，

  SDK 元件不會做任何 Style 處理，決定權在 User 端

2021.10.05

• 接到消息，要在本週跟大家介紹 WebComponent 這項技術 以及所選用的 Lit 框架

  若處理不好，搞不好要換技術重弄 QQ

  準備方向 :

  • 為何要用 WebComponet ?
  • Web Component 的 Compatibility (Browser, 裝置) ?
  • 是否易於上手，以及後續該如何參與及維護

• 91APPPayment 小 Planning ：

  • 問題

    • 快速結帳的部分，是否要在這次直接使用 TapPay 即可
    • TapPay 設定的相關 Config 是否要開放外部傳入 appId, appKey
    • 打徵信 API 要包在內部 還是 給外部拿 prime 去打 --> 外部打徵信

  • 總結

    • 快速結帳 及 Config 設定，因後端這邊的架構設計還要再和 Miller 討論

      先將問題統一集中在 Excel : Link

* Card 3 流程：

  使用者輸入信用卡 --> 輸入完 Get Prime --> 拿 Prime 去打徵信 API --> 結帳流程

  我們這個 SDK 元件，只要專注在 Get Prime 這一步即可

* 測試店 ： 12202

  Branch : `feature/VSTS186597-QA12-91APPPayment`

* 上線時間 :
  
  2021/12/29 和寶雅一頁式，跟全站台要一起上線

• 從 DOM 中如何取得內部元件的值 (ex: Prime)

  這和 Public Reactive Properties 及 Internal Reactive Properties 很有關係

  詳細可以參考官方這篇文章 : Link

  簡短來說，

  要開放給外部設定的，使用 @property

  元件內部設定相關的，使用 @staste

  外部 DOM 若要取用這些值，可以使用 document.querySelector 之類的選到該元件

  並用 getter 的方式來取值

今日進度，可順利從外部 DOM 取得 元件內部的值的邏輯

順利取得最重要的 Prime