阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!

本來套件有內建結帳功能 方便直接用 shopify 結帳

https://github.com/Kyon147/laravel-shopify/wiki/Creating-a-Billable-App

但因為 shopify 審核政策一直在變 我不確定 UI 方面是否還能通過

如果太麻煩 我考慮乖乖去用 official remix 進行開發吧?

驗證起見,我決定先嘗試做出 free vs pro 方案的效果


首先,我將設定檔內的兩個值打開 billing_enabled billing_freemium_enabled

參考文件,用以下方式準備 pro 方案的資料

INSERT INTO plans (`type`,`name`,`price`,`interval`,`capped_amount`,`terms`,`trial_days`,`test`,`on_install`,`created_at`,`updated_at`) VALUES
('RECURRING','Pro Plan',4.99,'EVERY_30_DAYS',NULL,NULL,NULL,FALSE,0,NOW(),NOW());

為了測試,我建立了兩筆 plan 資料


我在 app 首頁準備兩個連結

<a href="{{ URL::tokenRoute('home', ['plan' => 1, 'shop' => Auth::user()->name]) }}">Move to plan 1</a> -> broken
<a href="{{ route('billing', ['plan' => 2, 'shop' => Auth::user()->name, 'host' => app('request')->input('host')]) }}">Upgrade</a> -> working

結果第一個沒效,但第二個真的會跳轉到 shopify 結帳頁面

這真的非常棒!真的可以升級方案,感覺離進入 shopify apps 生態系又更近一步了

點擊 Approve 之後 會在 charges 資料表看到多一筆資料

另外,在 uninstall app 的時候,那筆資料狀態會變成 CANCELLED


因為我沒有推出三個以上的方案,所以只靠下面這行,已經可以開發各種商業邏輯

Auth::user()->isFreemium()

我最後做了一些跳轉的測試:如果我就是不用 app bridge + spa 架構

我就是要用普通的 routing 會怎樣?

<a href="/hello">Navigation UX Test 1</a>
<a href="/react">Navigation UX Test 2</a>

準備兩個路徑,測試發現頁面是會打開,但網址不會改變

這可以理解,畢竟是在 iframe 裡面換頁

就 UX 來說這非常糟糕,果然預計會改變網址的動作,還是乖乖整合 app bridge 去實作比較好!

按讚的人:

共有 0 則留言


👉 身份:資深全端工程師、指導過無數人半路出家轉職 👉 使命:打造 CodeLove 成為優質新手村,讓非本科也有地方自學&討論

阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!