mirror of
https://github.com/wasp-lang/open-saas.git
synced 2025-04-04 01:48:12 +02:00
add lemon squeezy as payment provider (#246)
* add lemon squeezy checkout and webhook * add lemonSqueezy customer portal url * Update AccountPage.tsx * add lemon squeezy total revenue function * update app diff * update app diff * add LS docs * Update PricingPage.tsx * add unified payment processor * unify customer portal url * Update paymentProcessor.ts * update paymentProcessor logic * update app diff to use both payments processors * Update contentSections.ts.diff * finishing touches * Update e2e-tests.yml * remove lemonsqueezy from app diff * Update webhook.ts
This commit is contained in:
vincanger
GitHub
parent
09b60a30bd
commit
cb3d75c0b6
11
.github/workflows/e2e-tests.yml
vendored
11
.github/workflows/e2e-tests.yml
vendored
@ -99,18 +99,19 @@ jobs:
|
||||
env:
|
||||
STRIPE_DEVICE_NAME: ${{ secrets.STRIPE_DEVICE_NAME }}
|
||||
run: |
|
||||
stripe listen --api-key ${{ secrets.STRIPE_KEY }} --forward-to localhost:3001/stripe-webhook &
|
||||
stripe listen --api-key ${{ secrets.STRIPE_KEY }} --forward-to localhost:3001/payments-webhook &
|
||||
|
||||
- name: "[e2e-tests] Run Playwright tests"
|
||||
env:
|
||||
# The e2e tests are testing parts of the app that need certain env vars, so we need to access them here.
|
||||
# These secretes can be set in your GitHub repo settings, e.g. https://github.com/<account>/<repo>/settings/secrets/actions
|
||||
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
|
||||
STRIPE_KEY: ${{ secrets.STRIPE_KEY }}
|
||||
STRIPE_API_KEY: ${{ secrets.STRIPE_KEY }}
|
||||
STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
|
||||
STRIPE_HOBBY_SUBSCRIPTION_PRICE_ID: ${{ secrets.STRIPE_HOBBY_SUBSCRIPTION_PRICE_ID }}
|
||||
STRIPE_PRO_SUBSCRIPTION_PRICE_ID: ${{ secrets.STRIPE_PRO_SUBSCRIPTION_PRICE_ID }}
|
||||
STRIPE_CREDITS_PRICE_ID: ${{ secrets.STRIPE_CREDITS_PRICE_ID }}
|
||||
STRIPE_CUSTOMER_PORTAL_URL: https://billing.stripe.com/p/login/test_8wM8x17JN7DT4zC000
|
||||
PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID: ${{ secrets.STRIPE_HOBBY_SUBSCRIPTION_PRICE_ID }}
|
||||
PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID: ${{ secrets.STRIPE_PRO_SUBSCRIPTION_PRICE_ID }}
|
||||
PAYMENTS_CREDITS_10_PLAN_ID: ${{ secrets.STRIPE_CREDITS_PRICE_ID }}
|
||||
SKIP_EMAIL_VERIFICATION_IN_DEV: true
|
||||
# Client-side env vars
|
||||
REACT_APP_GOOGLE_ANALYTICS_ID: G-H3LSJCK95H
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"endOfLine": "lf",
|
||||
"tabWidth": 2,
|
||||
"jsxSingleQuote": true,
|
||||
"printWidth": 110
|
||||
}
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
--- template/app/.env.client
|
||||
+++ opensaas-sh/app/.env.client
|
||||
@@ -0,0 +1,3 @@
|
||||
+REACT_APP_STRIPE_CUSTOMER_PORTAL=https://billing.stripe.com/p/login/test_8wM8x17JN7DT4zC000
|
||||
+
|
||||
@@ -0,0 +1 @@
|
||||
+REACT_APP_GOOGLE_ANALYTICS_ID=G-H3LSJCK95H
|
||||
\ No newline at end of file
|
||||
|
||||
@ -7,20 +7,20 @@
|
||||
+#/--------------------------------------------------/
|
||||
+
|
||||
+# development
|
||||
+DOTENV_VAULT_DEVELOPMENT="/5TCKdd/BhG2aUKRVf83yXza4yfDeuqlxP2kXSMJGWQ7697XFYSQb7ZgoEHMhSIWI4Sm7Xd1Kl3U9U2ODPtSLubLMU6iXRR/OKNEoh9uisXdQuxBvtFjJXBmDvHo0rAqhYYqwJBIweQHhGmsSuGxoO24wpDI7WPnafFmUgvaRR/xrKGzSx0yTmtv8SXXg6dT+ONnHhGHZz7d9hyMEhlqVUPKFJwcEsirzX/gic+0N90cttywMO+zach7vJ5XFaUcGw3qjlx2tfliBCPbALQeZQyIKFapFEiY/nf1KwMHientk9XJ/XJsoH/coQwJrMAjmEDLBvhIvuT6h3iibY1Tf7kMDrGAftjd/C6ZF9k2vqr7KfbtFl9yZfy/NBKMhsUXZs25m1/KcAp6tanvUbH4s+0MaSVIvTq2r1UXY4a/oTVH9QIkCxhWzpQCT2/5KHkZl9XOKWyriZtJzcuLTpNf3o6LVQu3sBodXUudl0a0a37NVLHpIRww1Nhd0wWf8qNbgp6uz2MEiTbsrWULveVP2L4BTEuOEhumsTE+1AxZGUldeHWFCn+pyC3pRCKjIlWHprQH4UCICsn3x1xMmgR0Igy6JnWKwTnB8TOuFX0fyzp2A3srhpYr3l1A8pcKwfBtK5o3JUcY+xJuRIsGh7oDLjhrVe5l5dA9pjcqNFOq8oIvVV2qIeTzFVYN0pzL6+rj6dW+5hr9ALPzO+GgZGEjR3+L+G8VQMERRMrw6f+J0IeUpA1irNHOppf8N6a0H8auZn0dqLW1poQq4PiVgcCoRBf9QdqszZp0bY6iSHLge8OQDyyDOkQ29Ym5MNJXHe46DYPQzjuhlThbgvKqT3G7hMWR8dFkKjHFTvDYavlg+3FoUzu7fXWH31HDbqa0UwRhWQX+LZ5awemtIzSeJ0mha1Fp51PhpF+/rdsU9wEw8p1KvWRzj9VLiOXnSZw/a0vNZU8o4eM9NE33FtzmrFjm+k2HIKdu7X5NVkzSy94bO0xwZ/k9IoAX8wP955k80Sr0BHqgI4JVBB/ZY5xeF5L8TUNdcmaEbqbg1KQVY09Rm38oTzGXxSMfCIvbEJDB6IZZa7WaiWVRwquejiWVZQKfnvIPqAMONSF0s/ZEiTkZ2dXh8m7UIDnRLZr4BGT04DV6MikkHlQZrX2QvfWI8TsZsBP+G3ZfvXvjm61vcTMo/Fr5VyynrqycvKvNfVc7UuzgzkTQ8j2Xgtb2U769ammiOXFZqgqQeV7tOhOA7pjMJMxTZ/IjGL0hbXbEx3lRjIYsu3NOzPcJplyVvXgE4Xk7U2iABXlLHq9blg9oO7Novm+xxWWT1xxhGzZ8MYh8BdLyXw/uCk3UE6uBAk46NAyWq9+Od5+KUHst/aAKV50APXWsi4awYQ67aB8TunZluJidwJXyz9neif7juxUswz+7rqnOAc+Sk+ALAEa4yiULU2mAVfFcSXUN6dH+MtU4+0exyzf28NxbRND53WoV60KuADRb9VVLjQ2KSOVEo2kfomXQyT+h5QQPgljgAHwSAEaqRaALkj9lCm9N3uBqmoreA4CntlM0RcqfSlK9RjHH13GMLRd+wk1vHTmXPbNUXLfPrNk3kB+3aeF6HYz2y0uPoEfvtE2sHWPJF5FwEYMUqpt4zp3rm8BkSoxy1Zy1DTffO0JAK/8fNXetOHlhPi+DEpDDwMW4osq8y9JGLXJNq8bvl4MFuYxYSjkVQSiqhbOSaNLqN9DaFzZK4tJlAekl4fJS4j+KA/inlfvAwATHSABH2+OTraXyubTzQvwBiImvRk15c5jV7ddhzNiqZkmUMq5fWiBRILI5frkEZLqycy0Hb8Lx6HUneAPdbjZbUbtvB26Rc86QHz4vLVKTCXVhe2MzyPhTnO99QOK0wdwsuWPtr3d5vlQbqEFVur7wAL5syaldx6XryYc5kCEDOc6BauyuBgSOIIgqB72qTxNHd2nW620CpPS0aqsSEEQts+BaV5PcCwR9s3ozwJ9rKnLTBwOMoMQo8TQLSutswJckoQBSc+0iOarFOeJTBOAbZOOM+mahjYyIEQp6D7+rHIxPMTtgRhZcnZtJaoS56uYUFbkSD8rmoTo/QN/29RknPiljqX2fJBnfnR4utCNsOgJY584JvhcFFBP4pSEpjnKDbbZXTgEFjeBpn3sPSSMPqDuO2Af/OjVsa/bo5wkna9AEqq+CUejNkDP8R5MCjfeCppnxltCMauowyv/ycnZP+dnBNf44V79MVqkO4muKPm2b1+SNggsdfA2CAIcz5gYShbypRcXn5tCuM+ACb7Imr+rmTSLpciH6jVAyWDY="
|
||||
+DOTENV_VAULT_DEVELOPMENT_VERSION=9
|
||||
+DOTENV_VAULT_DEVELOPMENT="STJRGW84NkbUqenj6Eyt98WiAcvzWsWhOKwyktUfAJ0dR8TlNnSdCDRsCRisCzKuDTTZtgCf6FyTgT48HsYuwFZqydg/aFeM4skfLpyUy0wz0K90hq2sNEB85HCAwZaTTf9ye5fEBq9P1PAEoYlHEFtPXO1exSkXyxQHzkv5/j2xLJVkg89cZ+MBaQQtzmgK/A9ya5eVSX2zIhum+ipZKIE04pjc4H8fu5YgxY91rOVTFHBQc1dlbuCr+vvmvgHxNS2gO+eM5UcmZk6FY4yY+GUZmf+xGw5ZPwFjiS3awC+jNhdebWnkrk/PopAqBC3i7eH3fdaPvJW2RWkMMrY4+gtN8Hs9lPNopWkl3uavAva9qmvrCE1KLu94IaQh34Cy6dRurPQDF/MmnugqYzcEQvvtIV1sgZig6Id4c9P67gs/Q9NvKXvbeNxzXYTwkF3SvnMRXk33yBKbXHxE1vIn9k9mbMnX3DVeVdT5TDR9BKs9xGMuvP7rQv5RA/xSnzMFg8LeJ+oZ2zNUWWN8tOyx6K4WwiIJN39AOLYElXAFa3UTSk12GtzaySM5rQdcWn0YLN3uncye26zRCA+BpR231fgrSpfJJ2VkNBG0pTh1ELySOFug6mItLOb7CQGXjZrrwTSfEBhhpMZn/c2Ec6p/nBN2UcHAmB55N6GDFuAkagv9l/4C5fIbS6iGHYAOwwYKczSBryi3+5y7sDYkdVhOTzuKTfkpY1FpkEgUY8FFnW2GjYodH2T+l23Q84a7A9VjxZAyZJkgwGnezO+M8fWcwtqt3iywEVhTd5Hi7Nxe+Q53oQeUrwnTKSkx5Ig5uR1RJIybW+gWvpSOEcUZN6AVf67/UPu9RHpwHDQ5YCGGqJwDzR/f5QxR0kqiW3B0ZDWpJX7zFk2QiLGLzDZ6xmdaGenbJ0jWMA116Xm+ot0GCEqim+RVk768zSAxIQFOCcllXWhmxwTO2/SzY6j7Hxf1Ps8e0uCVc7FPemh7nBYLRlSOI/Pjk9gLUkyKhV7IEiaL2BbPFLGOFkOk0AGNc+m/y1BH+CnJYYKCK1AXNquKM9+MV8Wmure2iBIm2oNlDOcJl48YpUQ0BcKzmFw06OJHVULPVn7da7XZ2/34SvyFcsYARE6NZLLMMg810S1cok0gQ3FpxKv3wxP1jRXntEC1ZxUqJQE/hZ5IxoOxhAJGQfqYbJIQSE5oE8Ve7E0X2lTYVEPiwziYOeovKidJX1vccZh4ggxgYsRzT/qAiS/FcvgsWz9kY6n0e1iKLEmsGR96SDpzNSWV/57iSuOd6nKtcU8HWhekTMnTQK4wrhXuYQHZhLeRnGQIjHzNyzJ8lV6HVcot6NZPPHjOfohQ9eIhQi7qUC7JPcLFkWixjrPTAEJVlQelbAOPHPOUyYEoejcPi/0LMTrQPYN/To/lhDHn/5N9vhlk8flj0zuJHpCFq8laDsn9wdvymuK/0MQ7DrPPU00nNzQjXDtT9xbb6I9ZX7XtgTVHVnWtEwxCQRYkmbR0T+0TzDLXlQObITanuFVa19ZSeATGc+PhxFAva5yxPih2L+j3BTN43ap/X3j54DDylyNHDQlpC21wOa+HFGftYUAWx8/w8i5gr7ZU66aVQWZspSLP7BIFzMaVVjAM5gVqaCLTpcnCE3oMMYddsqsXUbkJrmdlh4cP8ao2Y9YHzv3KRTyAU4wDxhkwWdDqnUSRVXkcDeZUuCQJsHFRvXVzgCNDSktMewTC4xMNniW6KNUwbqzWxGBCz6g/0WUJEaJYG+teu1jBMPDhNFFlw6BjIoNX7iButmm81XCG8D1uEgRvo+H4lxAL4rPyPNCQieT34XHk/QxcQsqij2wnTenGUwWQt++kzMLvL/69RtvaskA8I3aLXDLn3ATMU4JlMvD1MqRHrGb3tzoz+lXKWVgrJR+BSYUBXZc9EAUsj4G4+NsRyMPbBWE2ADgM4ksDflXCccbelu/4S50eS9dEXf7ms0CeYh+dFmqjhCXI8JrgL+bUdOwDbEJVPjM2yOVM1wATGAa8+0nLaJbIwI41JVXBx/uLZ8pt2pyvQB9cyLQR00hcjbLymHBfLP51B6nlaNhUq4yZsI/JM59XNmEYAY8GZJFuvIBvSimC5plUCc1bfGhK694k7Fv1bKtlIzXd4kCy5bKNiwWMTVbOy3Uv87FQTa61z5mnz/XGmRwU/22v4VOWy11BKWGYkYJGN1KrAVkUenCKQw6FjgVXBbfJ6m2k9tl5dfQ48ppToorUZkFiKsPuc8V6DhcUt2stxEETnUnU9K2p8QyyhfPykBK6YWbShDobeA0TPF+vo2ypkVOvhNo7F4cQnvvVKl9MJmmAxFOisB9yHXREk2GSlivNJeTqIz8Vv4K42/wNMAO2ZQqSPlE4wt2ueFQqLMkG+UDlD6gujSx8D/OzSTfCx+vLTzdqsbubPxjcPx+pQA=="
|
||||
+DOTENV_VAULT_DEVELOPMENT_VERSION=12
|
||||
+
|
||||
+# ci
|
||||
+DOTENV_VAULT_CI="sCTQ2ley6wx0rNsobpsTS2tN8aaMRg/3U9e7nQ8tMiCeRkEudHd4kchWXL5ya4b9eStIOuHDixdye2lnlucTc4t4cIaHg2oQE0oKuqB9U+UtBntYIyphqtXdkIuDVpJ2FRlG7ED9XhSB4XbbkBC07OqkgRJzcWaTARouCbVn8FBbyFVM9+huvR9o1xvSTATqH9F1VoiucdXuyy7ug65cFLYpm6HkKCusjnyu+xAQxOo3iLJSfjew4qigxscT2w1ciXUFn+t71qdyuGc1PI7GfXu6L6BWijJGT9bEgRJC+0CsGo3zOB3bBBdB3SuBcSekXrwyqKzymQ3OLAfWecTScBFpHyXfl5i0UgSsnQMzYn3ua000xcEor6//rZdWumI48BBNg0mzeF5zn4H8igsuKCc1e9n+PUBsH72rbEFkYOAAwhgs8JEIZ8qHF1LxZwKyOrN9Dis2Drj5+aCWpmTu1JlX8fcyP43+hsMe9cxQvtFsfA+nTaOIIt/IuPO5taNv2jW0vGsnyoahpFB0FyZOxEuPgSWrUJkrxgXMz7FwO/iLWtL4QImifAicuWgCjgMTBg+TP2sT5ekzRqjTARKVnkApi/LpL4nija6sIfqLxqtNLlAc5vuzHbkGGq+aR9l9IGeEmC/TPi0e9JCfu+oVC0m6du9nL72kOjAAqhAW0GWrBg1yffD27+xF9MJjddRtkBRBkPXGl1x79S6dURVwkspRK94VcuKCf7VY/9XcP74z9eYGhiduIzRpPLtXxWPSYi4+j6e3qzHPhdLQi+MpS8R1bkhUPpXG78a6l4qxELftctY8Njn2kJz5SRfYxaEoDBSx9Q8H7qXR/4mYBBG4q2Oc0vGuucrW8QyX6PaUXNM+irIYCK/QE3/Z5fEletW7KxV7rdf+pFSXuGyswQqkPH1kAruRyoMTMgH++//BNkwHeJn1Sq42R7hzF+jRmblC9e/e3StkP/4xN9dmjQ1xcJOg89GYNKxwwKBhX2O7bkfUBJI0tUe9aJLwkK1xHjxmSmy5d58dENzePtTSaoCCqDkvLuyOxxa8tEb23XAY"
|
||||
+DOTENV_VAULT_CI_VERSION=5
|
||||
+DOTENV_VAULT_CI="2d/o/GNlLDr4CLqJdyEeusuZxMCIJw7lfqOmnC8TWMpqS+GMGHEUAQqssLTseFlEXWs9OIzxBaZosMter6cUOTcPri0yyGeIbrjqVjZHasmZ6f2fE6DtA6f/tzxuNOGwX186i9qQFRyE3oVUbzs1NLvbdSH5uGADJRZTaFD03BUbkWL01SoySWRWXQpZ88ZOENdfg4reaFTVsdb3auDW7pn19xUt+PnuZkupaXOVWScrM2kDdCC6njuovPRWBt5jgYcOEXSCwEhvRBcfd4kjEVT2Q5CJAvY3CGi9oVlw5164Y7jpShG8Yw+7FtwuIJYcQjXmMNG71j1JE+up8dPGi/vjP6EUFzbPguxzu7QtSMPoDgIcmA+OcrJA1zRhWEGTZvBsgc3i4lbPUHXYKtLtIRhRTX2KVp2z3Px+3dmaMycOkwmnKJ1yvRwaDCntpxlDtw11NuVSaDAoVxqbQe+BNxYMdnZAidGQN+Uhz6s94EMwcIaS2eH/lJc5OMTIJKHfT6lyvjVfQGmmKWmV+7A+iM0Yq+T3EWUY7/qCTdYexFBe+VmhD48pQJc/UBnf2RZknFLzKjXbXwtXLlbqCw0qnphDu/TaQOwPUNOLoDPEx4Ou9Iq4hDMeLIhY0lcQgBOP5fZl1IWMnT6itnyWGQgpFwhO5id4+nosytcOStsCe8ewBvTosxPqWNydXucJAgV5K1hlDfmZvtWHaLcLJJwcvx7B2k4qwWwQc/mmPJOisSgf1+MWW0OX/JcJkRF+Pw7n87CM015kJ7Vm3KPHxc2vRNWM0dlMgSqneHBlrgRbJK9qpce9+7fk93Er32squIG581Uv9aMArrO2uqeFeLR7senuYhWhl5Q1/ahrQVWz1b7jeGHd9tMOTVrs6jAyui70GacorztbRkS9r1EohxoMP5XismHgS7okvEPy16b3q/UBvNOTMm63+Jx5V0/RTa7eHe4lqNX98r8Nb3r87VHiZ9T9MwZ3FAwG4/RY3vuN52dMuzHmiBs30XE4fboLiQirUI8waCh/GhsrGeGUZT6S7zzqF06ahUm4th1kw++V0iIvzwTQYURMpMYhSQK5A5lN0xFDo31QqQr9eNZFtr6cKFW2fhbUrbRKLPLV/2A1CJBRXm54D+KMmeGD/x6DXDDeQmbu1UVO89/AIyBBnYZZ/egDF/lOoMC13VPsoXkOfGJ9OQVQwu8asa3CNurl+dn3WYoOk+TsIlj9uD+CY2d94jVyZ81MP+uSYfgkiXSmXy7i9YEVFBRZ2Ip+K1PEXdDCmbHZOkC5R5JCMKvYsQLXiRmUDPpbZmx9Ne3IC/eCTfHpz2lO+nvB7amsjXtOrXkIAGw26/2v3y/tpsC28wnlaHnO3Eo/TFkSAXxf7ihWYRnbNnWKeCUnDm/lrQ=="
|
||||
+DOTENV_VAULT_CI_VERSION=7
|
||||
+
|
||||
+# staging
|
||||
+DOTENV_VAULT_STAGING="jjDTQ53mmWE6kp11sR82vF9lsPNWaWteMBL3HzKC4uM16cvWzCjukaDZ++sR1/IwkEI+NYDwXoE0wTKxTA3YOQq5WcV2FdBq+DeBiJOJnVh5ghqxSukEf4tXRYIliCZ8/+caFLU7/tlrVwGkwXgjyjF3B0wgueiOMOlmIuyanXVgChEz/G2wlgzupQVtRWWmNClVMK5otcW6pbaX+ASrI2VqNVsVJm1LohdvFhUzCmGgVGjQNd6Stnjqchh9q9g2qAqDexbXGITBd9rPvz1pGduqoukxIpEe5TG7U/Zxg7ZrP8zTZ7jei8w8vA7rJ5EA/NKSgLcqvLmeu441y0OvgbnTykODbz0GVZve3PWzHGGsJDo+CWXmE5kKt0mdDOj2XCgNMGsjdHRP9GzCroQZ5QLGMFAwHqd5LnmwRZxJkmfxrMNxeIHBg9LIQ0FzxXHn9f5RvFuwhe+3nAfQo79Um/D459bd7MeZ9+F1vb++IhsSMoIq6Rcv1qMIgXv5SK8a1WrAdmVj6+3WPr+rdEijYmwLvXuI6Ad/HQCzZJkhzCvnE0lZ3XuqR/GDOCaqnMxqQjapW5HP0PXmHyUqSK/Ravl8Grb+2Z8ywULxoqbhxmK7ej8k4Vfn7sa65aVMYmj3CZIzkbsE0IdrIm84Frwmadzp8i5KxM9o4HC3ntRuKc6S9gTVT8OxUkyGu96w4qpVVAE7iL38VkAw0CIDZvcK1VtBcu4JeFRa0ZjXznUxLr2S4HsDwGtMBlkX8Q96rwh/IIusis51xl50xO6lg3uP8QwzrLLKFtHhinTHfvVIePeSm2usJxUXIvrvNekfcCebPsGdllY7t12eAbZ0RLk83loT0UsPAHUMDmdZT2eARLz7nta1lKm+PscuJIn/QxKF1K+zoJw0IL3nZL+c0iXSxZhaBHBwao5nI3CaysWr8xCohUQP/GuGE8xsivXw2DwWr4wmAmtCcT1thZtG2iOSuHQV00hlGyrghyVys/3zpR4m3qdtu5a7qxvwEpr584g7smFEySFERPBwSbfxw1dLBUj2VcNrXpR0RTG9fmye"
|
||||
+DOTENV_VAULT_STAGING_VERSION=5
|
||||
+DOTENV_VAULT_STAGING="GSG9LIe/+1lHgCvXcwD2kCP70mEVLrzT3/8sOvSpylcf3q4wn4j5G0RoeEVbShGqJNXDpvhA4v+zW5kDw+zIrWN2cnesoaZ83CjqbpwNIDYyX7T7EgeNB7EySvIs+2HI9gdSM5IU1c9zC/q/5BIgIaMrwaTT7+FWudeKhmQvCBaxgctFSc/b+Ft5y9jhkjC9mHnfmtkBqNKJiqzEJVkd6Rg64qmjE87SDQL87QH8YgU5xje7Rgcie07F9kLxXy8YRgADvWJjHdRrBlXg8wZkDXTcBCVQZNdtxWiYVArIDFxUc2obCBevL+wKTGzyBuvjQDoh1Dl0eMaAovIhejWKwfEK3g5Go6+YT8rK2ol61ONBAJ8sbzu425MZ3aGYAJ97kgdpIUjGVdh/j6x2GFhNgHX3AwRdXRVdhoAAlzbQG7rGaZXUKLaYKkpshDmo8f0dgNvp2waoq5fM9+sMwoUaZKr/rmPmOTmIOzpqztIboYYE9MXRsOGMXcCxAqLMHNzvD/JSFdz2DiOqzq1EnPspsyIQfMniF+QOQKABTX7ttGB7Lr5cy1DFjcg3e8jC/9d2Ip47RrRF50AabuoefkjMEMQamuxWD1sdZ2WodakObyFO0t+JC+GxL3UDLtxLjdGLztLAjKomxGE1Lkbjr65ptxyuOJIiG7WfmgyxNsZXnFW40M+Jk0CbW2xytuoVrtc1Eys23NcWRqvs6HR/oN+F2765dkrsgmb03gEMl9ePwzZMtU2H5SUhCDqkr19pKHNFul5k2BxwehSPqOlek5lIcULlY7I/TxutwfHsfunUx+KmkrAHhRboETinG0SP3HR2OqH/wo4wYKwmED/AwGsboLmGjXI24sLRyxwiJ3kEzyXgkk+8a/1KYggCKmsG914bWYu0qdvr2xAN/xrt5ouLk9TdJwNoAjBk4H5cx25WAIVWijjHsOHAaYVpfmHd6QZlskQZsHje/6AmA65nRKd94ARPe7+Qr6teuXpbA/2nV9ZmguOg0BWIEsBW3qPIZqyBxfspYsqCGWR5NdBwddN6wKQDeJZKQOg3BOoU0zfPT4asEQ13UDuWy3kBEj9idbz1K2UjHSePX/ahB2Ox9wodlFf0JMOLG+xL8H2Ji4J/pxEAarxXe3I3LngWz5nQUZ21XRUcS58eEH+X/9RKwQ/Twoec/q8YNGvtmB0cc/D/pgA0wigWiF9PabzyjReg3mNYr6j1IeYAZt+LVks5JpDNGH8LyanH77q2X9D6IyJNYJ3JMhERTW9KCl06PqWZThUBxXhXveo92+AeM9681L5TJVW6Pv47vh1M1dR2Vzu9LlRkgewnzojae9eZ2bLz3ODjm3+01nJQlCSLUt5W3KrbjaqLbfD4cx3s+YIRbIhFRSFNSSTqnBW9pCHEEA=="
|
||||
+DOTENV_VAULT_STAGING_VERSION=7
|
||||
+
|
||||
+# production
|
||||
+DOTENV_VAULT_PRODUCTION="4LK0FEvptGga6hjj5y9Qh9RDQPj91hOLddcCxKemVjZamQUo2yrzzNYQvO0n4eASjGUHwruB8oggS5zJ5WS1mBlRv9QKuPnkQbBfYIHVEsWNM6uxIaBkbJPu/+fn5joHVujOMGcUninLV1vY6x7z4KieMlSiJ503rmoaGqCnctOp7QIm0SyCFFG7IzXWZz2X4Bs5d1DADV2GXo1VXB85qPjee579RdbqYPb/TU2DX1YFvGFztkugYvEBEHNb7OB42iz2EIUb7Oavc7IQ1YzeOF2lJz8jzWTqFYfws9qkgzXjSGr6iTrgXs4YgtcE6fp6zGd9QNLzZWeV5ORUrnqEuQcoV6/c/BdYR+TPeiMy+W2YcLvMHPcJDoLNYKIvO1C766CMwfohWzuTHYlrjKFwlkQka1CpyyFg/vpGrFu//djXDk6D2OLSjtTm/pZPdXhxNV81A+wp/GIzAViiUn65GXaKWM4hGs7OJXhheNl9Kg+DQ7p7lyV+UYJAyNHkPBexNxCsVphgb8Rgg2BhZXBzAnAQSwZt5+oOan5YKj8DxYLYEvuZlGI7mpbiwqDIa2taRFYTzejvtw/1wrSw3943nR8NBx6vsE9JD0AGGeFCkFwY07wmhETYrlKbXYc/XKp/77lUz0/zgLXdu55gwXHfHXaGHAWwhuDeUpdnDr9Syjd5lHzUAtQNNMg6IOrEhf9Nokp4aHcb6oOJmw/5hh+9tgaBk+jvGYGvsok1OXnpgAXuKL10C9zN3rR4/0tzZc1xqIe84ylevrhdkLekvxbbmOsymecMDIuSGhVYp9slvGbhRKtoPVwaujk/ds0YIUirp4pK83MVtdppg4O1iOspmXYPOLxp29LWVMany9PyqlkiFs2vPCJ8OgVp8DeZ0vVnC6Q6FLWHNEfSHPo/pd8w/JetZl//5V+pfKMDcKBUntzcUUqfHuLuE+8JUS1zob6IQ2P4GSLqOs/tE1Gfl3e3MKGFVDBx5faDcNyuQCuRRgXbUc3bk95rQZ7vDPWHJsyE/WH7ptPvK4ytyrxOaf/noEo/LAR8B16X0wpz4LW9"
|
||||
+DOTENV_VAULT_PRODUCTION_VERSION=5
|
||||
+DOTENV_VAULT_PRODUCTION="tnCGeONjuw95xeIn1a/07iux4KekBaVVjCZ6Rf9CKWnV/jRojO1rbF2zJLpSdAY1FoSgiZhUntnyJNGJBdx3QlCD2o5MSkNKtBre0W6rHj825ZgoICRuz2cwfWq5WVEPiPA16uZhHdujbnWfR646tTnkMb6LN+1wPpwuetwsHBEXabMG/7H2UT20XUChtzzm+qFmFPTg2dcS62xyXnJM1NvU5vL8D1By9Jc4uYezrIgFvPKENky6mg3S1uQhqRyzcSxLG1+amC18q1c0bOzgGJoJ5j06tbGvSES7aY09gKlNjduPstAWABoCBFQScPqgi/DttxjW2GDdOS0csOaWDAsgT9wHzrzdFTAEXKFHBUxebIlNvwOvX1ME+hPlHeBcicHHfDLbcFbj3L/2Su19KzmD4LOAcApZrkoQwrWIZE7KkluetQXIRHiDKAA4cd+UXHQe6PURT7ObiX7zHNXPM6shSSAPa6iWMOMZndM4CAUZJrzYYMnlZ1D9MCkMZTN608+f2A8JsbmbceUbLeiHpXtpmLkvkKb1pJ9uKQP38VGBQtqylcfStpEVOPX67VV/U88+BZu8E8+am072mb+fvrT+yNqmcNm6byo1+48Y96QN8i1J3qerrv3kcVWDbNKQEgyOG7UJEe2JXEFnLXYdnph10X7KAlsmfVacY8quXB8tIWdx2LbBTAB6zokifoLq5rikbXjFUKw0q0vREIspy5vtoKNDyttbc6Emsy+J/sHlS8c1TKdu1bQRPlMyoANCBVZpNuV9FRSSKJR0jRzNq4hBid28MSR8G0r059UH2nNekge9Yig35OifaLmDv6kBLmUMMKyLO/dCSH0MsOWl1TD86XZZBWCUrYayt/Ev6WbQQcDA7OOww+1OzhX712BxPZWB7iSKqaQl9wImn/cKLHa8vBvQWuq9MK9NAMNHzu8bytoaUiixgPRHsGuR8OPyvCH0EG1NnilcRSHwSDP1n+11WFsjeCYORMSdXpFzmWsuHCVMQ9T7Z/oLmAbVcAjUvGQUce9ABOeOwp2R4+p8YOFX8sAP8EkORXgKZCk+o7siusHj9nd5xNojQxDGfREQhx76Mdn6Gtg0fAT8iEGfS7+RQwu5wwr/wlxaBC8TXuunOzcgi6CO/Q+i56JBiyGKOt8Sg5MZVE9QXiEBT9rd3Emnqeu9gTJ0RuU18FwLuyM9f1VNx+JJmRBACsn1nc6JFtpd+3+yihoxyIKf/PTpyO2SMKybo8q1fVrXTlTOfNkHRTROUVpwBzAVzjWqajuY70Bz8TM6+tFKXCF7/RS94RmQCp/grc6c1DrIeAjOl1YUYPeOjVCyyY9EcMS8z+lmoIftz4ul0EH8AMPSZTw9bpJ3Waeo/V6zra5vuVPxaO0Mc66B8j4VsMUuVg=="
|
||||
+DOTENV_VAULT_PRODUCTION_VERSION=7
|
||||
+
|
||||
+#/----------------settings/metadata-----------------/
|
||||
+DOTENV_VAULT="vlt_47e3eeb0730e831e688049600e59f8975260a1f00302ae08684ed87ba67872d0"
|
||||
|
||||
@ -2,3 +2,8 @@ public/public-banner.png
|
||||
src/client/static/avatar-placeholder.png
|
||||
src/client/static/open-saas-banner.png
|
||||
src/landing-page/logos/SalesforceLogo.tsx
|
||||
src/payment/lemonSqueezy/checkoutUtils.ts
|
||||
src/payment/lemonSqueezy/paymentDetails.ts
|
||||
src/payment/lemonSqueezy/paymentProcessor.ts
|
||||
src/payment/lemonSqueezy/webhook.ts
|
||||
src/payment/webhook.ts
|
||||
|
||||
@ -93,3 +93,15 @@
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -206,9 +203,9 @@
|
||||
}
|
||||
|
||||
api paymentsWebhook {
|
||||
- fn: import { paymentsWebhook } from "@src/payment/webhook",
|
||||
+ fn: import { stripeWebhook } from "@src/payment/stripe/webhook",
|
||||
entities: [User],
|
||||
- middlewareConfigFn: import { paymentsMiddlewareConfigFn } from "@src/payment/webhook",
|
||||
+ middlewareConfigFn: import { stripeMiddlewareConfigFn } from "@src/payment/stripe/webhook",
|
||||
httpRoute: (POST, "/payments-webhook")
|
||||
}
|
||||
//#endregion
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
--- template/app/package-lock.json
|
||||
+++ opensaas-sh/app/package-lock.json
|
||||
@@ -0,0 +1,10988 @@
|
||||
@@ -0,0 +1,10995 @@
|
||||
+{
|
||||
+ "name": "opensaas",
|
||||
+ "lockfileVersion": 3,
|
||||
@ -20,7 +20,7 @@
|
||||
+ "clsx": "^2.1.0",
|
||||
+ "headlessui": "^0.0.0",
|
||||
+ "node-fetch": "3.3.0",
|
||||
+ "openai": "^4.52.1",
|
||||
+ "openai": "^4.55.3",
|
||||
+ "prettier": "3.1.1",
|
||||
+ "prettier-plugin-tailwindcss": "0.5.11",
|
||||
+ "react": "^18.2.0",
|
||||
@ -31,7 +31,7 @@
|
||||
+ "tailwind-merge": "^2.2.1",
|
||||
+ "vanilla-cookieconsent": "^3.0.1",
|
||||
+ "wasp": "file:.wasp/out/sdk/wasp",
|
||||
+ "zod": "3.22.4"
|
||||
+ "zod": "^3.23.8"
|
||||
+ },
|
||||
+ "devDependencies": {
|
||||
+ "@types/express": "^4.17.13",
|
||||
@ -7368,9 +7368,9 @@
|
||||
+ }
|
||||
+ },
|
||||
+ "node_modules/openai": {
|
||||
+ "version": "4.52.2",
|
||||
+ "resolved": "https://registry.npmjs.org/openai/-/openai-4.52.2.tgz",
|
||||
+ "integrity": "sha512-mMc0XgFuVSkcm0lRIi8zaw++otC82ZlfkCur1qguXYWPETr/+ZwL9A/vvp3YahX+shpaT6j03dwsmUyLAfmEfg==",
|
||||
+ "version": "4.55.7",
|
||||
+ "resolved": "https://registry.npmjs.org/openai/-/openai-4.55.7.tgz",
|
||||
+ "integrity": "sha512-I2dpHTINt0Zk+Wlns6KzkKu77MmNW3VfIIQf5qYziEUI6t7WciG1zTobfKqdPzBmZi3TTM+3DtjPumxQdcvzwA==",
|
||||
+ "dependencies": {
|
||||
+ "@types/node": "^18.11.18",
|
||||
+ "@types/node-fetch": "^2.6.4",
|
||||
@ -7378,11 +7378,18 @@
|
||||
+ "agentkeepalive": "^4.2.1",
|
||||
+ "form-data-encoder": "1.7.2",
|
||||
+ "formdata-node": "^4.3.2",
|
||||
+ "node-fetch": "^2.6.7",
|
||||
+ "web-streams-polyfill": "^3.2.1"
|
||||
+ "node-fetch": "^2.6.7"
|
||||
+ },
|
||||
+ "bin": {
|
||||
+ "openai": "bin/cli"
|
||||
+ },
|
||||
+ "peerDependencies": {
|
||||
+ "zod": "^3.23.8"
|
||||
+ },
|
||||
+ "peerDependenciesMeta": {
|
||||
+ "zod": {
|
||||
+ "optional": true
|
||||
+ }
|
||||
+ }
|
||||
+ },
|
||||
+ "node_modules/openai/node_modules/@types/node": {
|
||||
@ -10980,9 +10987,9 @@
|
||||
+ }
|
||||
+ },
|
||||
+ "node_modules/zod": {
|
||||
+ "version": "3.22.4",
|
||||
+ "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
|
||||
+ "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
|
||||
+ "version": "3.23.8",
|
||||
+ "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
|
||||
+ "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
|
||||
+ "funding": {
|
||||
+ "url": "https://github.com/sponsors/colinhacks"
|
||||
+ }
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
--- template/app/package.json
|
||||
+++ opensaas-sh/app/package.json
|
||||
@@ -1,5 +1,10 @@
|
||||
@@ -1,12 +1,16 @@
|
||||
{
|
||||
"name": "opensaas",
|
||||
+ "scripts": {
|
||||
@ -11,3 +11,10 @@
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-s3": "^3.523.0",
|
||||
"@aws-sdk/s3-request-presigner": "^3.523.0",
|
||||
"@faker-js/faker": "8.3.1",
|
||||
"@google-analytics/data": "4.1.0",
|
||||
"@headlessui/react": "1.7.13",
|
||||
- "@lemonsqueezy/lemonsqueezy.js": "^3.2.0",
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@tailwindcss/typography": "^0.5.7",
|
||||
"apexcharts": "^3.41.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
--- template/app/schema.prisma
|
||||
+++ opensaas-sh/app/schema.prisma
|
||||
@@ -14,7 +14,10 @@
|
||||
@@ -14,10 +14,12 @@
|
||||
email String? @unique
|
||||
username String? @unique
|
||||
lastActiveTimestamp DateTime @default(now())
|
||||
@ -10,5 +10,9 @@
|
||||
+ // the admin dashboard but won't be able to see the other users' data, only mock user data.
|
||||
+ isMockUser Boolean @default(false)
|
||||
|
||||
stripeId String? @unique
|
||||
- paymentProcessorUserId String? @unique
|
||||
- lemonSqueezyCustomerPortalUrl String? // You can delete this if you're not using Lemon Squeezy as your payments processor.
|
||||
+ stripeId String? @unique
|
||||
checkoutSessionId String?
|
||||
subscriptionStatus String? // 'active', 'canceled', 'past_due', 'deleted'
|
||||
subscriptionPlan String? // 'hobby', 'pro'
|
||||
|
||||
@ -8,3 +8,12 @@
|
||||
const [isAdminFilter, setIsAdminFilter] = useState<boolean | undefined>(undefined);
|
||||
const [statusOptions, setStatusOptions] = useState<SubscriptionStatus[]>([]);
|
||||
const { data, isLoading, error } = useQuery(getPaginatedUsers, {
|
||||
@@ -222,7 +223,7 @@
|
||||
<p className='text-sm text-black dark:text-white'>{user.subscriptionStatus}</p>
|
||||
</div>
|
||||
<div className='col-span-2 flex items-center'>
|
||||
- <p className='text-sm text-meta-3'>{user.paymentProcessorUserId}</p>
|
||||
+ <p className='text-sm text-meta-3'>{user.stripeId}</p>
|
||||
</div>
|
||||
<div className='col-span-1 flex items-center'>
|
||||
<div className='text-sm text-black dark:text-white'>
|
||||
|
||||
72
opensaas-sh/app_diff/src/analytics/stats.ts.diff
Normal file
72
opensaas-sh/app_diff/src/analytics/stats.ts.diff
Normal file
@ -0,0 +1,72 @@
|
||||
--- template/app/src/analytics/stats.ts
|
||||
+++ opensaas-sh/app/src/analytics/stats.ts
|
||||
@@ -2,10 +2,8 @@
|
||||
import { type DailyStatsJob } from 'wasp/server/jobs';
|
||||
import Stripe from 'stripe';
|
||||
import { stripe } from '../payment/stripe/stripeClient'
|
||||
-import { listOrders } from '@lemonsqueezy/lemonsqueezy.js';
|
||||
import { getDailyPageViews, getSources } from './providers/plausibleAnalyticsUtils';
|
||||
// import { getDailyPageViews, getSources } from './providers/googleAnalyticsUtils;
|
||||
-import { paymentProcessor } from '../payment/paymentProcessor';
|
||||
|
||||
export type DailyStatsProps = { dailyStats?: DailyStats; weeklyStats?: DailyStats[]; isLoading?: boolean };
|
||||
|
||||
@@ -41,17 +39,7 @@
|
||||
paidUserDelta -= yesterdaysStats.paidUserCount;
|
||||
}
|
||||
|
||||
- let totalRevenue;
|
||||
- switch (paymentProcessor.id) {
|
||||
- case 'stripe':
|
||||
- totalRevenue = await fetchTotalStripeRevenue();
|
||||
- break;
|
||||
- case 'lemonsqueezy':
|
||||
- totalRevenue = await fetchTotalLemonSqueezyRevenue();
|
||||
- break;
|
||||
- default:
|
||||
- throw new Error(`Unsupported payment processor: ${paymentProcessor.id}`);
|
||||
- }
|
||||
+ let totalRevenue = await fetchTotalStripeRevenue()
|
||||
|
||||
const { totalViews, prevDayViewsChangePercent } = await getDailyPageViews();
|
||||
|
||||
@@ -162,38 +150,3 @@
|
||||
// Revenue is in cents so we convert to dollars (or your main currency unit)
|
||||
return totalRevenue / 100;
|
||||
}
|
||||
-
|
||||
-async function fetchTotalLemonSqueezyRevenue() {
|
||||
- try {
|
||||
- let totalRevenue = 0;
|
||||
- let hasNextPage = true;
|
||||
- let currentPage = 1;
|
||||
-
|
||||
- while (hasNextPage) {
|
||||
- const { data: response } = await listOrders({
|
||||
- filter: {
|
||||
- storeId: process.env.LEMONSQUEEZY_STORE_ID,
|
||||
- },
|
||||
- page: {
|
||||
- number: currentPage,
|
||||
- size: 100,
|
||||
- },
|
||||
- });
|
||||
-
|
||||
- if (response?.data) {
|
||||
- for (const order of response.data) {
|
||||
- totalRevenue += order.attributes.total;
|
||||
- }
|
||||
- }
|
||||
-
|
||||
- hasNextPage = !response?.meta?.page.lastPage;
|
||||
- currentPage++;
|
||||
- }
|
||||
-
|
||||
- // Revenue is in cents so we convert to dollars (or your main currency unit)
|
||||
- return totalRevenue / 100;
|
||||
- } catch (error) {
|
||||
- console.error('Error fetching Lemon Squeezy revenue:', error);
|
||||
- throw error;
|
||||
- }
|
||||
-}
|
||||
\ No newline at end of file
|
||||
@ -44,10 +44,10 @@
|
||||
{
|
||||
- name: 'Cool Feature #4',
|
||||
- description: 'Describe your cool feature here.',
|
||||
+ name: 'Stripe Integration',
|
||||
+ description: "No SaaS is complete without payments. That's why payments and the necessary webhooks are built-in.",
|
||||
+ name: 'Stripe / Lemon Squeezy Integration',
|
||||
+ description: "No SaaS is complete without payments. We've pre-configured checkout and webhooks. Just choose a provider and start cashing out.",
|
||||
icon: '💸',
|
||||
+ href: DocsUrl + '/guides/stripe-integration/',
|
||||
+ href: DocsUrl + '/guides/payments-integration/',
|
||||
+ },
|
||||
+ {
|
||||
+ name: 'Admin Dashboard',
|
||||
|
||||
52
opensaas-sh/app_diff/src/payment/PricingPage.tsx.diff
Normal file
52
opensaas-sh/app_diff/src/payment/PricingPage.tsx.diff
Normal file
@ -0,0 +1,52 @@
|
||||
--- template/app/src/payment/PricingPage.tsx
|
||||
+++ opensaas-sh/app/src/payment/PricingPage.tsx
|
||||
@@ -7,6 +7,7 @@
|
||||
import { cn } from '../client/cn';
|
||||
|
||||
const bestDealPaymentPlanId: PaymentPlanId = PaymentPlanId.Pro;
|
||||
+const PaymentsDocsURL = 'https://docs.opensaas.sh/payments-integration';
|
||||
|
||||
interface PaymentPlanCard {
|
||||
name: string;
|
||||
@@ -83,7 +84,7 @@
|
||||
}
|
||||
|
||||
if (!customerPortalUrl) {
|
||||
- throw new Error(`Customer Portal does not exist for user ${user.id}`)
|
||||
+ throw new Error(`Customer Portal does not exist for user ${user.id}`);
|
||||
}
|
||||
|
||||
window.open(customerPortalUrl, '_blank');
|
||||
@@ -97,11 +98,18 @@
|
||||
Pick your <span className='text-yellow-500'>pricing</span>
|
||||
</h2>
|
||||
</div>
|
||||
- <p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600 dark:text-white'>
|
||||
- Choose between Stripe and LemonSqueezy as your payment provider. Just add your Product IDs! Try it
|
||||
- out below with test credit card number <br />
|
||||
- <span className='px-2 py-1 bg-gray-100 rounded-md text-gray-500'>4242 4242 4242 4242 4242</span>
|
||||
- </p>
|
||||
+ <div className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600 dark:text-white flex flex-wrap items-center justify-center space-x-2'>
|
||||
+ <p>
|
||||
+ Choose between
|
||||
+ <a href={PaymentsDocsURL} target='_blank' className='text-purple-400 drop-shadow-sm'> Stripe </a>
|
||||
+ and
|
||||
+ <a href={PaymentsDocsURL} target='_blank' className='text-yellow-500 drop-shadow-sm'> Lemon Squeezy </a>
|
||||
+ as your payment provider. Just add your Product IDs! Try it out below with test credit card number
|
||||
+ <br />
|
||||
+ <span className='px-2 py-1 bg-gray-100 rounded-md text-gray-500'>4242 4242 4242 4242 4242</span>
|
||||
+ </p>
|
||||
+ </div>
|
||||
+
|
||||
<div className='isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 lg:gap-x-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3'>
|
||||
{Object.values(PaymentPlanId).map((planId) => (
|
||||
<div
|
||||
@@ -188,7 +196,7 @@
|
||||
)}
|
||||
disabled={isPaymentLoading}
|
||||
>
|
||||
- {!!user ? 'Buy plan' : 'Log in to buy plan'}
|
||||
+ {!!user ? 'Buy Plan' : 'Log in to buy plan'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
20
opensaas-sh/app_diff/src/payment/paymentProcessor.ts.diff
Normal file
20
opensaas-sh/app_diff/src/payment/paymentProcessor.ts.diff
Normal file
@ -0,0 +1,20 @@
|
||||
--- template/app/src/payment/paymentProcessor.ts
|
||||
+++ opensaas-sh/app/src/payment/paymentProcessor.ts
|
||||
@@ -3,7 +3,6 @@
|
||||
import type { MiddlewareConfigFn } from 'wasp/server';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { stripePaymentProcessor } from './stripe/paymentProcessor';
|
||||
-import { lemonSqueezyPaymentProcessor } from './lemonSqueezy/paymentProcessor';
|
||||
|
||||
export interface CreateCheckoutSessionArgs {
|
||||
userId: string;
|
||||
@@ -24,9 +23,4 @@
|
||||
webhookMiddlewareConfigFn: MiddlewareConfigFn;
|
||||
}
|
||||
|
||||
-/**
|
||||
- * Choose which payment processor you'd like to use, then delete the
|
||||
- * other payment processor code that you're not using from `/src/payment`
|
||||
- */
|
||||
-// export const paymentProcessor: PaymentProcessor = lemonSqueezyPaymentProcessor;
|
||||
export const paymentProcessor: PaymentProcessor = stripePaymentProcessor;
|
||||
11
opensaas-sh/app_diff/src/payment/plans.ts.diff
Normal file
11
opensaas-sh/app_diff/src/payment/plans.ts.diff
Normal file
@ -0,0 +1,11 @@
|
||||
--- template/app/src/payment/plans.ts
|
||||
+++ opensaas-sh/app/src/payment/plans.ts
|
||||
@@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
export interface PaymentPlan {
|
||||
- // Returns the id under which this payment plan is identified on your payment processor.
|
||||
+ // Returns the id under which this payment plan is identified on your payment processor.
|
||||
// E.g. this might be price id on Stripe, or variant id on LemonSqueezy.
|
||||
getPaymentProcessorPlanId: () => string;
|
||||
effect: PaymentPlanEffect;
|
||||
@ -0,0 +1,15 @@
|
||||
--- template/app/src/payment/stripe/paymentDetails.ts
|
||||
+++ opensaas-sh/app/src/payment/stripe/paymentDetails.ts
|
||||
@@ -14,10 +14,10 @@
|
||||
) => {
|
||||
return userDelegate.update({
|
||||
where: {
|
||||
- paymentProcessorUserId: userStripeId
|
||||
+ stripeId: userStripeId
|
||||
},
|
||||
data: {
|
||||
- paymentProcessorUserId: userStripeId,
|
||||
+ stripeId: userStripeId,
|
||||
subscriptionPlan,
|
||||
subscriptionStatus,
|
||||
datePaid,
|
||||
@ -0,0 +1,11 @@
|
||||
--- template/app/src/payment/stripe/paymentProcessor.ts
|
||||
+++ opensaas-sh/app/src/payment/stripe/paymentProcessor.ts
|
||||
@@ -21,7 +21,7 @@
|
||||
id: userId
|
||||
},
|
||||
data: {
|
||||
- paymentProcessorUserId: customer.id
|
||||
+ stripeId: customer.id
|
||||
}
|
||||
})
|
||||
if (!stripeSession.url) throw new Error('Error creating Stripe Checkout Session');
|
||||
@ -1,6 +1,12 @@
|
||||
--- template/app/src/server/scripts/dbSeeds.ts
|
||||
+++ opensaas-sh/app/src/server/scripts/dbSeeds.ts
|
||||
@@ -42,5 +42,8 @@
|
||||
@@ -38,10 +38,12 @@
|
||||
sendNewsletter: false,
|
||||
credits,
|
||||
subscriptionStatus,
|
||||
- lemonSqueezyCustomerPortalUrl: null,
|
||||
- paymentProcessorUserId: hasUserPaidOnStripe ? `cus_test_${faker.string.uuid()}` : null,
|
||||
+ stripeId: hasUserPaidOnStripe ? `cus_test_${faker.string.uuid()}` : null,
|
||||
datePaid: hasUserPaidOnStripe ? faker.date.between({ from: createdAt, to: lastActiveTimestamp }) : null,
|
||||
checkoutSessionId: hasUserPaidOnStripe ? `cs_test_${faker.string.uuid()}` : null,
|
||||
subscriptionPlan: subscriptionStatus ? faker.helpers.arrayElement(getSubscriptionPaymentPlanIds()) : null,
|
||||
|
||||
22
opensaas-sh/app_diff/src/user/AccountPage.tsx.diff
Normal file
22
opensaas-sh/app_diff/src/user/AccountPage.tsx.diff
Normal file
@ -0,0 +1,22 @@
|
||||
--- template/app/src/user/AccountPage.tsx
|
||||
+++ opensaas-sh/app/src/user/AccountPage.tsx
|
||||
@@ -33,7 +33,6 @@
|
||||
subscriptionPlan={user.subscriptionPlan}
|
||||
datePaid={user.datePaid}
|
||||
credits={user.credits}
|
||||
- lemonSqueezyCustomerPortalUrl={user.lemonSqueezyCustomerPortalUrl}
|
||||
/>
|
||||
</div>
|
||||
<div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
|
||||
@@ -60,10 +59,9 @@
|
||||
subscriptionStatus: SubscriptionStatus | null;
|
||||
datePaid: Date | null;
|
||||
credits: number;
|
||||
- lemonSqueezyCustomerPortalUrl: string | null;
|
||||
};
|
||||
|
||||
-function UserCurrentPaymentPlan({ subscriptionPlan, subscriptionStatus, datePaid, credits, lemonSqueezyCustomerPortalUrl }: UserCurrentPaymentPlanProps) {
|
||||
+function UserCurrentPaymentPlan({ subscriptionPlan, subscriptionStatus, datePaid, credits }: UserCurrentPaymentPlanProps) {
|
||||
if (subscriptionStatus && subscriptionPlan && datePaid) {
|
||||
return (
|
||||
<>
|
||||
@ -1,18 +1,62 @@
|
||||
--- template/app/src/user/operations.ts
|
||||
+++ opensaas-sh/app/src/user/operations.ts
|
||||
@@ -80,6 +80,7 @@
|
||||
@@ -1,8 +1,4 @@
|
||||
-import {
|
||||
- type UpdateCurrentUser,
|
||||
- type UpdateUserById,
|
||||
- type GetPaginatedUsers,
|
||||
-} from 'wasp/server/operations';
|
||||
+import { type UpdateCurrentUser, type UpdateUserById, type GetPaginatedUsers } from 'wasp/server/operations';
|
||||
import { type User } from 'wasp/entities';
|
||||
import { HttpError } from 'wasp/server';
|
||||
import { type SubscriptionStatus } from '../payment/plans';
|
||||
@@ -50,7 +46,10 @@
|
||||
subscriptionStatus?: SubscriptionStatus[];
|
||||
};
|
||||
type GetPaginatedUsersOutput = {
|
||||
- users: Pick<User, 'id' | 'email' | 'username' | 'lastActiveTimestamp' | 'subscriptionStatus' | 'paymentProcessorUserId'>[];
|
||||
+ users: Pick<
|
||||
+ User,
|
||||
+ 'id' | 'email' | 'username' | 'lastActiveTimestamp' | 'subscriptionStatus' | 'stripeId'
|
||||
+ >[];
|
||||
totalPages: number;
|
||||
};
|
||||
|
||||
@@ -63,8 +62,10 @@
|
||||
}
|
||||
|
||||
const allSubscriptionStatusOptions = args.subscriptionStatus as Array<string | null> | undefined;
|
||||
- const hasNotSubscribed = allSubscriptionStatusOptions?.find((status) => status === null)
|
||||
- let subscriptionStatusStrings = allSubscriptionStatusOptions?.filter((status) => status !== null) as string[] | undefined
|
||||
+ const hasNotSubscribed = allSubscriptionStatusOptions?.find((status) => status === null);
|
||||
+ let subscriptionStatusStrings = allSubscriptionStatusOptions?.filter((status) => status !== null) as
|
||||
+ | string[]
|
||||
+ | undefined;
|
||||
|
||||
const queryResults = await context.entities.User.findMany({
|
||||
skip: args.skip,
|
||||
@@ -77,6 +78,7 @@
|
||||
mode: 'insensitive',
|
||||
},
|
||||
isAdmin: args.isAdmin,
|
||||
+ isMockUser: true
|
||||
+ isMockUser: true,
|
||||
},
|
||||
{
|
||||
OR: [
|
||||
@@ -120,6 +121,7 @@
|
||||
@@ -101,7 +103,7 @@
|
||||
isAdmin: true,
|
||||
lastActiveTimestamp: true,
|
||||
subscriptionStatus: true,
|
||||
- paymentProcessorUserId: true,
|
||||
+ stripeId: true,
|
||||
},
|
||||
orderBy: {
|
||||
id: 'desc',
|
||||
@@ -117,6 +119,7 @@
|
||||
mode: 'insensitive',
|
||||
},
|
||||
isAdmin: args.isAdmin,
|
||||
+ isMockUser: true
|
||||
+ isMockUser: true,
|
||||
},
|
||||
{
|
||||
OR: [
|
||||
|
||||
@ -17,4 +17,4 @@
|
||||
+ },
|
||||
},
|
||||
},
|
||||
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('@tailwindcss/forms')],
|
||||
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
|
||||
|
||||
@ -61,8 +61,7 @@ export default defineConfig({
|
||||
items: [
|
||||
{ label: 'Authentication', link: '/guides/authentication/' },
|
||||
{ label: 'Authorization', link: '/guides/authorization/' },
|
||||
{ label: 'Stripe Integration', link: '/guides/stripe-integration/' },
|
||||
{ label: 'Stripe Testing', link: '/guides/stripe-testing/' },
|
||||
{ label: 'Payments Integration', link: '/guides/payments-integration/' },
|
||||
{ label: 'Analytics', link: '/guides/analytics/' },
|
||||
{ label: 'SEO', link: '/guides/seo/' },
|
||||
{ label: 'Email Sending', link: '/guides/email-sending/' },
|
||||
|
||||
BIN
opensaas-sh/blog/public/lemon-squeezy/add-product.png
Normal file
BIN
opensaas-sh/blog/public/lemon-squeezy/add-product.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 730 KiB |
BIN
opensaas-sh/blog/public/lemon-squeezy/add-variant.png
Normal file
BIN
opensaas-sh/blog/public/lemon-squeezy/add-variant.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
opensaas-sh/blog/public/lemon-squeezy/ngrok.png
Normal file
BIN
opensaas-sh/blog/public/lemon-squeezy/ngrok.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 828 KiB |
BIN
opensaas-sh/blog/public/lemon-squeezy/variant-id.png
Normal file
BIN
opensaas-sh/blog/public/lemon-squeezy/variant-id.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 530 KiB |
@ -7,7 +7,7 @@ banner:
|
||||
|
||||
Setting up your app's authentication is easy with Wasp. In fact, it's already set up for you in the `main.wasp` file:
|
||||
|
||||
```tsx title="main.wasp" "
|
||||
```tsx title="main.wasp"
|
||||
auth: {
|
||||
userEntity: User,
|
||||
methods: {
|
||||
@ -33,7 +33,7 @@ Since it needs to send emails to verify users and reset passwords, it requires a
|
||||
To make it easy for you to get started, Open SaaS initially comes with the `Dummy` "email sender" provider, which does not send any emails, but instead logs all email verification links/tokens to the server's console!
|
||||
You can then follow these links to verify the user and continue with the sign-up process.
|
||||
|
||||
```tsx title="main.wasp"
|
||||
```tsx title="main.wasp"
|
||||
emailSender: {
|
||||
provider: Dummy, // logs all email verification links/tokens to the server's console
|
||||
defaultFrom: {
|
||||
|
||||
@ -20,12 +20,8 @@ If you're looking to deploy your Astro Blog, you can follow the [Deploying your
|
||||
Make sure you've got all your API keys and environment variables set up before you deploy.
|
||||
|
||||
#### Env Vars
|
||||
##### Stripe Vars
|
||||
In the [Stripe integration guide](/guides/stripe-integration), you set up your Stripe API keys using test keys and product ids. You'll need to get the live/production versions of those keys at [https://dashboard.stripe.com](https://dashboard.stripe.com). To get these, repeat the instructions in the [Stripe Integration Guide](/guides/stripe-integration) without being in test mode.
|
||||
- [ ] `STRIPE_KEY`
|
||||
- [ ] `STRIPE_WEBHOOK_SECRET`
|
||||
- [ ] all `STRIPE_..._PRICE_ID` variables
|
||||
- [ ] `REACT_APP_STRIPE_CUSTOMER_PORTAL` (for the client-side)
|
||||
##### Payment Processor Vars
|
||||
In the [Payments Processor integration guide](/guides/payments-integration), you set up your API keys using test keys and test product ids. You'll need to get the live/production versions of those keys. To get these, repeat the instructions in the [Integration Guide](/guides/payments-integration) without being in test mode. Add the new keys to your deployed environment secrets.
|
||||
|
||||
##### Other Vars
|
||||
Many of your other environment variables will probably be the same as in development, but you should double-check that they are set correctly for production.
|
||||
@ -119,8 +115,8 @@ When you create your Stripe account, Stripe will automatically assign you to the
|
||||
Because this template was built with a specific version of the Stripe API in mind, it could be that your Stripe account is set to a different API version.
|
||||
|
||||
:::note
|
||||
```ts title="stripeClient.ts"
|
||||
export const stripe = new Stripe(process.env.STRIPE_KEY!, {
|
||||
```ts title="stripeClient.ts"
|
||||
export const stripe = new Stripe(process.env.STRIPE_API_KEY!, {
|
||||
apiVersion: 'YYYY-MM-DD', // e.g. 2023-08-16
|
||||
});
|
||||
```
|
||||
@ -132,7 +128,7 @@ This is why it's important to make sure your Stripe client version also matches
|
||||
To make sure your app is consistent with your Stripe account, here are some steps you can follow:
|
||||
|
||||
1. You can find your `default` API version in the Stripe dashboard under the [Developers](https://dashboard.stripe.com/developers) section.
|
||||
2. Check that the API version in your `stripe/stripeClient.ts` file matches the default API version in your dashboard:
|
||||
2. Check that the API version in your `/src/payment/stripe/stripeClient.ts` file matches the default API version in your dashboard:
|
||||
```ts title="stripeClient.ts" {2}
|
||||
export const stripe = new Stripe(process.env.STRIPE_KEY!, {
|
||||
apiVersion: 'YYYY-MM-DD', // e.g. 2023-08-16
|
||||
@ -154,7 +150,7 @@ export const stripe = new Stripe(process.env.STRIPE_KEY!, {
|
||||
#### Creating Your Production Webhook
|
||||
1. go to [https://dashboard.stripe.com/webhooks](https://dashboard.stripe.com/webhooks)
|
||||
2. click on `+ add endpoint`
|
||||
3. enter your endpoint url, which will be the url of your deployed server + `/stripe-webhook`, e.g. `https://open-saas-wasp-sh-server.fly.dev/stripe-webhook`
|
||||
3. enter your endpoint url, which will be the url of your deployed server + `/payments-webhook`, e.g. `https://open-saas-wasp-sh-server.fly.dev/payments-webhook`
|
||||
|
||||
4. select the events you want to listen to. These should be the same events you're consuming in your webhook. For example, if you haven't added any additional events to the webhook and are using the defaults that came with this template, then you'll need to add:
|
||||
<br/>- `account.updated`
|
||||
|
||||
277
opensaas-sh/blog/src/content/docs/guides/payments-integration.md
Normal file
277
opensaas-sh/blog/src/content/docs/guides/payments-integration.md
Normal file
@ -0,0 +1,277 @@
|
||||
---
|
||||
title: Payments Integration
|
||||
banner:
|
||||
content: |
|
||||
Open SaaS is now running on <a href='https://wasp-lang.dev'>Wasp v0.14</a>! <br/>🐝🚀<br/>If you're running an older version, please follow the <a href="https://wasp-lang.dev/docs/migrate-from-0-13-to-0-14">migration instructions.</a>
|
||||
---
|
||||
|
||||
This guide will show you how to set up Payments for testing and local development with the following payment processors:
|
||||
- Stripe
|
||||
- Lemon Squeezy
|
||||
|
||||
:::note[Which should I choose?]
|
||||
Stripe is the industry standard, is more configurable, and has cheaper fees.
|
||||
Lemon Squeezy acts a [Merchant of Record](https://www.lemonsqueezy.com/reporting/merchant-of-record). This means they take care of paying taxes in multiple countries for you, but charge higher fees per transaction.
|
||||
:::
|
||||
|
||||
# Important First Steps
|
||||
|
||||
First, go to `/src/payment/paymentProcessor.ts` and choose which payment processor you'd like to use, e.g. Stripe or Lemon Squeezy:
|
||||
|
||||
```ts title="src/payment/paymentProcessor.ts" ins={5, 7}
|
||||
import { stripePaymentProcessor } from './stripe/paymentProcessor';
|
||||
import { lemonSqueezyPaymentProcessor } from './lemonSqueezy/paymentProcessor';
|
||||
//...
|
||||
|
||||
export const paymentProcessor: PaymentProcessor = stripePaymentProcessor;
|
||||
// or...
|
||||
export const paymentProcessor: PaymentProcessor = lemonSqueezyPaymentProcessor;
|
||||
```
|
||||
|
||||
At this point, you can delete:
|
||||
- the unused payment processor code within the `/src/payment/<unused-provider>` directory,
|
||||
- any unused environment variables from `.env.server` (they will be prefixed with the name of the provider your are not using):
|
||||
- e.g. `STRIPE_API_KEY`, `STRIPE_CUSTOMER_PORTAL_URL`, `LEMONSQUEEZY_API_KEY`, `LEMONSQUEEZY_WEBHOOK_SECRET`
|
||||
- Make sure to also uninstall the unused dependencies:
|
||||
- `npm uninstall @lemonsqueezy/lemonsqueezy.js`
|
||||
- or
|
||||
- `npm uninstall stripe`
|
||||
- Remove any unused fields from the `User` model in the `schema.prisma` file if they exist:
|
||||
- e.g. `lemonSqueezyCustomerPortalUrl`
|
||||
|
||||
Now your code is ready to go with your preferred payment processor and it's time to configure your payment processor's API keys, products, and other settings.
|
||||
|
||||
# Stripe
|
||||
|
||||
First, you'll need to create a Stripe account. You can do that [here](https://dashboard.stripe.com/register).
|
||||
|
||||
:::tip[Star our Repo on GitHub! 🌟]
|
||||
We've packed in a ton of features and love into this SaaS starter, and offer it all to you for free!
|
||||
|
||||
If you're finding this template and its guides useful, consider giving us [a star on GitHub](https://github.com/wasp-lang/wasp)
|
||||
:::
|
||||
|
||||
## Get your test Stripe API Keys
|
||||
|
||||
Once you've created your account, you'll need to get your test API keys. You can do that by navigating to [https://dashboard.stripe.com/test/apikeys](https://dashboard.stripe.com/test/apikeys) or by going to the [Stripe Dashboard](https://dashboard.stripe.com/test/dashboard) and clicking on the `Developers`.
|
||||
|
||||
|
||||
|
||||
- Click on the `Reveal test key token` button and copy the `Secret key`.
|
||||
- Paste it in your `.env.server` file under `STRIPE_API_KEY=`
|
||||
|
||||
## Create Test Products
|
||||
|
||||
To create a test product, go to the test products url [https://dashboard.stripe.com/test/products](https://dashboard.stripe.com/test/products), or after navigating to your dashboard, click the `test mode` toggle.
|
||||
|
||||
|
||||
|
||||
- Click on the `Add a product` button and fill in the relevant information for your product.
|
||||
- Make sure you select `Software as a service (SaaS)` as the product type.
|
||||
- For Subscription products, make sure you select `Recurring` as the billing type.
|
||||
- For One-time payment products, make sure you select `One-time` as the billing type.
|
||||
- If you want to add different price tiers for the same product, click the `Add another price` button at the buttom.
|
||||
|
||||
|
||||
|
||||
- After you save the product, you'll be directed to the product page.
|
||||
- Copy the price IDs and paste them in the `.env.server` file
|
||||
- We've set you up with two example subscription product environment variables, `PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID=` and `PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID=`.
|
||||
- As well as a one-time payment product/credits-based environment variable, `PAYMENTS_CREDITS_10_PLAN_ID=`.
|
||||
- Note that if you change the names of the price IDs, you'll need to update your server code to match these names as well
|
||||
|
||||
## Create a Test Customer
|
||||
|
||||
To create a test customer, go to the test customers url [https://dashboard.stripe.com/test/customers](https://dashboard.stripe.com/test/customers).
|
||||
|
||||
- Click on the `Add a customer` button and fill in the relevant information for your test customer.
|
||||
:::note
|
||||
When filling in the test customer email address, use an address you have access to and will use when logging into your SaaS app. This is important because the email address is used to identify the customer when creating a subscription and allows you to manage your test user's payments/subscriptions via the test customer portal
|
||||
:::
|
||||
|
||||
## Get your Customer Portal Link
|
||||
|
||||
Go to https://dashboard.stripe.com/test/settings/billing/portal in the Stripe Dashboard and activate and copy the `Customer portal link`. Paste it in your `.env.server` file:
|
||||
|
||||
```ts title=".env.server"
|
||||
STRIPE_CUSTOMER_PORTAL_URL=<your-test-customer-portal-link>
|
||||
```
|
||||
|
||||
## Install the Stripe CLI
|
||||
|
||||
To install the Stripe CLI with homebrew, run the following command in your terminal:
|
||||
|
||||
```sh
|
||||
brew install stripe/stripe-cli/stripe
|
||||
```
|
||||
|
||||
or for other install scripts or OSes, follow the instructions [here](https://stripe.com/docs/stripe-cli#install).
|
||||
|
||||
Now, let's start the webhook server and get our webhook signing secret.
|
||||
|
||||
First, login:
|
||||
```sh
|
||||
stripe login
|
||||
```
|
||||
|
||||
:::caution[Errors running the Stripe CLI]
|
||||
If you're seeing errors, consider appending `sudo` to the stripe commands.
|
||||
See this [GitHuh issue](https://github.com/stripe/stripe-cli/issues/933) for more details.
|
||||
:::
|
||||
|
||||
```sh
|
||||
stripe listen --forward-to localhost:3001/payments-webhook
|
||||
```
|
||||
|
||||
You should see a message like this:
|
||||
|
||||
```sh
|
||||
> Ready! You are using Stripe API Version [2023-08-16]. Your webhook signing secret is whsec_8a... (^C to quit)
|
||||
```
|
||||
|
||||
copy this secret to your `.env.server` file under `STRIPE_WEBHOOK_SECRET=`.
|
||||
|
||||
## Testing Webhooks via the Stripe CLI
|
||||
|
||||
- In a new terminal window, run the following command:
|
||||
|
||||
```sh
|
||||
stripe login
|
||||
```
|
||||
|
||||
- start the Stripe CLI webhook forwarding on port 3001 where your Node server is running.
|
||||
|
||||
```sh
|
||||
stripe listen --forward-to localhost:3001/payments-webhook
|
||||
```
|
||||
|
||||
remember to copy and paste the outputted webhook signing secret (`whsec_...`) into your `.env.server` file under `STRIPE_WEBHOOK_SECRET=` if you haven't already.
|
||||
|
||||
- In another terminal window, trigger a test event:
|
||||
|
||||
```sh
|
||||
stripe trigger payment_intent.succeeded
|
||||
```
|
||||
|
||||
The results of the event firing will be visible in the initial terminal window. You should see messages like this:
|
||||
|
||||
```sh
|
||||
...
|
||||
2023-11-21 09:31:09 --> invoice.paid [evt_1OEpMPILOQf67J5TjrUgRpk4]
|
||||
2023-11-21 09:31:09 <-- [200] POST http://localhost:3001/payments-webhook [evt_1OEpMPILOQf67J5TjrUgRpk4]
|
||||
2023-11-21 09:31:10 --> invoice.payment_succeeded [evt_1OEpMPILOQf67J5T3MFBr1bq]
|
||||
2023-11-21 09:31:10 <-- [200] POST http://localhost:3001/payments-webhook [evt_1OEpMPILOQf67J5T3MFBr1bq]
|
||||
2023-11-21 09:31:10 --> checkout.session.completed [evt_1OEpMQILOQf67J5ThTZ0999r]
|
||||
2023-11-21 09:31:11 <-- [200] POST http://localhost:3001/payments-webhook [evt_1OEpMQILOQf67J5ThTZ0999r]
|
||||
```
|
||||
|
||||
For more info on testing webhooks, check out https://stripe.com/docs/webhooks#test-webhook
|
||||
|
||||
:::tip[Star our Repo on GitHub! 🌟]
|
||||
We've packed in a ton of features and love into this SaaS starter, and offer it all to you for free!
|
||||
|
||||
If you're finding this template and its guides useful, consider giving us [a star on GitHub](https://github.com/wasp-lang/wasp)
|
||||
:::
|
||||
|
||||
## Testing Checkout and Payments via the Client
|
||||
|
||||
Make sure the **Stripe CLI is running** by following the steps above.
|
||||
You can then test the payment flow via the client by doing the following:
|
||||
|
||||
- Click on a Buy button on the for any of the products on the homepage. You should be redirected to the checkout page.
|
||||
- Fill in the form with the following test credit card number `4242 4242 4242 4242` and any future date for the expiration date and any 3 digits for the CVC.
|
||||
|
||||
- Click on the "Pay" button. You should be redirected to the success page.
|
||||
|
||||
- Check your terminal window for status messages and logs
|
||||
|
||||
- You can also check your Database via the DB Studio to see if the user entity has been updated by running:
|
||||
|
||||
```sh
|
||||
wasp db studio
|
||||
```
|
||||
|
||||
|
||||
|
||||
- Navigate to `localhost:5555` and click on the `users` table. You should see the `subscriptionStatus` is `active` for the user that just made the purchase.
|
||||
|
||||
:::note
|
||||
If you want to learn more about how a user's payment status, subscription status, and subscription tier affect a user's priveledges within the app, check out the [User Overview](/general/user-overview) reference.
|
||||
:::
|
||||
|
||||
# Lemon Squeezy
|
||||
|
||||
First, make sure you've defined your payment processor in `src/payment/paymentProcessor.ts`, as described in the [important first steps](#important-first-steps).
|
||||
|
||||
Next, you'll need to create a Lemon Squeezy account in test mode. You can do that [here](https://lemonsqueezy.com).
|
||||
|
||||
:::tip[Star our Repo on GitHub! 🌟]
|
||||
We've packed in a ton of features and love into this SaaS starter, and offer it all to you for free!
|
||||
|
||||
If you're finding this template and its guides useful, consider giving us [a star on GitHub](https://github.com/wasp-lang/wasp)
|
||||
:::
|
||||
|
||||
## Get your test Lemon Squeezy API Keys
|
||||
|
||||
Once you've created your account, you'll need to get your test API keys. You can do that by navigating to [https://app.lemonsqueezy.com/settings/api](https://app.lemonsqueezy.com/settings/api) and creating a new API key.
|
||||
|
||||
- Click on the `+` button
|
||||
- Give your API key a name
|
||||
- Copy and paste it in your `.env.server` file under `LEMONSQUEEZY_API_KEY=`
|
||||
|
||||
## Create Test Products
|
||||
|
||||
To create a test product, go to the test products url [https://app.lemonsqueezy.com/products](https://app.lemonsqueezy.com/products).
|
||||
|
||||
- Click on the `+ New Product` button and fill in the relevant information for your product.
|
||||
- Fill in the general information.
|
||||
- For pricing, select the type of product you'd like to create, e.g. `Subscription` for a recurring monthly payment product or `Single Payment` for credits-based product.
|
||||
|
||||
- Make sure you select `Software as a service (SaaS)` as the Tax category type.
|
||||
- If you want to add different price tiers for `Subscription` products, click on `add variant` under the `variants` tab. Here you can input the name of the variant (e.g. "Hobby", "Pro"), and that variant's price.
|
||||
|
||||
- For a product with no variants, on the product page, click the `...` menu button and select `Copy variant ID`
|
||||
|
||||
- For a product with variants, on the product page, click on the product, go to the variants tab and select `Copy ID` for each variant.
|
||||
|
||||
- Paste these IDs in the `.env.server` file:
|
||||
- We've set you up with two example subscription product environment variables, `PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID=` and `PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID=`.
|
||||
- As well as a one-time payment product/credits-based environment variable, `PAYMENTS_CREDITS__10_PLAN_ID=`.
|
||||
- Note that if you change the names of the these environment variables, you'll need to update your app code to match these names as well.
|
||||
|
||||
## Create and Use the Lemon Squeezy Webhook in Local Development
|
||||
|
||||
Lemon Squeezy sends messages/updates to your Wasp app via its webhook, e.g. when a payment is successful. For that to work during development, we need to expose our locally running (via `wasp start`) Wasp app and make it available online, specifically the server part of it. Since the Wasp server runs on port 3001, you should run ngrok on port 3001, which will provide you with a public URL that you can use to configure Lemon Squeezy with.
|
||||
|
||||
To do this, first make sure you have installed [ngrok](https://ngrok.com/docs/getting-started/).
|
||||
|
||||
Once installed, and with your wasp app running, run:
|
||||
```sh
|
||||
ngrok http 3001
|
||||
```
|
||||
|
||||
|
||||
|
||||
Ngrok will output a forwarding address for you. Copy and paste this address and add `/payments-webhook` to the end (this URL path has been configured for you already in `main.wasp` under the `api paymentsWebhook` definition). It should look something like this:
|
||||
|
||||
```sh title="Callback URL"
|
||||
https://89e5-2003-c7-153c-72a5-f837.ngrok-free.app/payments-webhook
|
||||
```
|
||||
|
||||
Now go to your [Lemon Squeezy Webhooks Dashboard](https://app.lemonsqueezy.com/settings/webhooks):
|
||||
- click the `+` button.
|
||||
- add the newly created webhook forwarding url to the `Callback URL` section.
|
||||
- give your webhook a signing secret (a long, random string).
|
||||
- copy and paste this same signing secret into your `.env.server` file under `LEMONSQUEEZY_WEBHOOK_SECRET=`
|
||||
- make sure to select at least the following updates to be sent:
|
||||
- order_created
|
||||
- subscription_created
|
||||
- subscription_updated
|
||||
- subscription_cancelled
|
||||
- click `save`
|
||||
|
||||
You're now ready to start consuming Lemon Squeezy webhook events in local development.
|
||||
|
||||
# Deploying
|
||||
|
||||
Once you deploy your app, you can follow the same steps, just make sure that you are no longer in test mode within the Stripe or Lemon Squeezy Dashboards. After you've repeated the steps in live mode, add the new API keys and price/variant IDs to your environment variables in your deployed environment.
|
||||
@ -1,117 +0,0 @@
|
||||
---
|
||||
title: Stripe Integration
|
||||
banner:
|
||||
content: |
|
||||
Open SaaS is now running on <a href='https://wasp-lang.dev'>Wasp v0.14</a>! <br/>🐝🚀<br/>If you're running an older version, please follow the <a href="https://wasp-lang.dev/docs/migrate-from-0-13-to-0-14">migration instructions.</a>
|
||||
---
|
||||
|
||||
This guide will show you how to set up your Stripe account for testing and local development.
|
||||
|
||||
Once you deploy your app, you can follow the same steps, just make sure you're using your live Stripe API keys and product IDs and you are no longer in test mode within the Stripe Dashboard.
|
||||
|
||||
To get started, you'll need to create a Stripe account. You can do that [here](https://dashboard.stripe.com/register).
|
||||
|
||||
:::tip[Star our Repo on GitHub! 🌟]
|
||||
We've packed in a ton of features and love into this SaaS starter, and offer it all to you for free!
|
||||
|
||||
If you're finding this template and its guides useful, consider giving us [a star on GitHub](https://github.com/wasp-lang/wasp)
|
||||
:::
|
||||
|
||||
## Get your test Stripe API Keys
|
||||
|
||||
Once you've created your account, you'll need to get your test API keys. You can do that by navigating to [https://dashboard.stripe.com/test/apikeys](https://dashboard.stripe.com/test/apikeys) or by going to the [Stripe Dashboard](https://dashboard.stripe.com/test/dashboard) and clicking on the `Developers`.
|
||||
|
||||
|
||||
|
||||
- Click on the `Reveal test key token` button and copy the `Secret key`.
|
||||
- Paste it in your `.env.server` file under `STRIPE_KEY=`
|
||||
|
||||
## Create Test Products
|
||||
|
||||
To create a test product, go to the test products url [https://dashboard.stripe.com/test/products](https://dashboard.stripe.com/test/products), or after navigating to your dashboard, click the `test mode` toggle.
|
||||
|
||||
|
||||
|
||||
- Click on the `Add a product` button and fill in the relevant information for your product.
|
||||
- Make sure you select `Software as a service (SaaS)` as the product type.
|
||||
- For Subscription products, make sure you select `Recurring` as the billing type.
|
||||
- For One-time payment products, make sure you select `One-time` as the billing type.
|
||||
- If you want to add different price tiers for the same product, click the `Add another price` button at the buttom.
|
||||
|
||||
|
||||
|
||||
- After you save the product, you'll be directed to the product page.
|
||||
- Copy the price IDs and paste them in the `.env.server` file
|
||||
- We've set you up with two example subscription product environment variables, `STRIPE_HOBBY_SUBSCRIPTION_PRICE_ID=` and `STRIPE_PRO_SUBSCRIPTION_PRICE_ID=`.
|
||||
- As well as a one-time payment product/credits-based environment variable, `STRIPE_CREDITS_PRICE_ID=`.
|
||||
- Note that if you change the names of the price IDs, you'll need to update your server code to match these names as well
|
||||
|
||||
## Create a Test Customer
|
||||
|
||||
To create a test customer, go to the test customers url [https://dashboard.stripe.com/test/customers](https://dashboard.stripe.com/test/customers).
|
||||
|
||||
- Click on the `Add a customer` button and fill in the relevant information for your test customer.
|
||||
:::note
|
||||
When filling in the test customer email address, use an address you have access to and will use when logging into your SaaS app. This is important because the email address is used to identify the customer when creating a subscription and allows you to manage your test user's payments/subscriptions via the test customer portal
|
||||
:::
|
||||
|
||||
## Get your Customer Portal Link
|
||||
|
||||
Go to https://dashboard.stripe.com/test/settings/billing/portal in the Stripe Dashboard and activate and copy the `Customer portal link`. Paste it in your `.env.client` file:
|
||||
|
||||
```ts title=".env.client"
|
||||
REACT_APP_STRIPE_CUSTOMER_PORTAL=<your-test-customer-portal-link>
|
||||
```
|
||||
|
||||
Your Stripe customer portal link is imported into `src/user/AccountPage.tsx` and used to redirect users to the Stripe customer portal when they click the `Manage Subscription` button.
|
||||
|
||||
```tsx title="src/user/AccountPage.tsx" {5} "import.meta.env.REACT_APP_STRIPE_CUSTOMER_PORTAL"
|
||||
function CustomerPortalButton() {
|
||||
const handleClick = () => {
|
||||
try {
|
||||
const schema = z.string().url();
|
||||
const customerPortalUrl = schema.parse(import.meta.env.REACT_APP_STRIPE_CUSTOMER_PORTAL);
|
||||
window.open(customerPortalUrl, '_blank');
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
:::danger[Client-side Environment Variables]
|
||||
Client-side environment variables, unlike server-side environment variables, should never be used to store sensitive information as they are injected at build time and are exposed to the client.
|
||||
:::
|
||||
|
||||
## Install the Stripe CLI
|
||||
|
||||
To install the Stripe CLI with homebrew, run the following command in your terminal:
|
||||
|
||||
```sh
|
||||
brew install stripe/stripe-cli/stripe
|
||||
```
|
||||
|
||||
or for other install scripts or OSes, follow the instructions [here](https://stripe.com/docs/stripe-cli#install).
|
||||
|
||||
Now, let's start the webhook server and get our webhook signing secret.
|
||||
|
||||
First, login:
|
||||
```sh
|
||||
stripe login
|
||||
```
|
||||
|
||||
:::caution[Errors running the Stripe CLI]
|
||||
If you're seeing errors, consider appending `sudo` to the stripe commands.
|
||||
See this [GitHuh issue](https://github.com/stripe/stripe-cli/issues/933) for more details.
|
||||
:::
|
||||
|
||||
```sh
|
||||
stripe listen --forward-to localhost:3001/stripe-webhook
|
||||
```
|
||||
|
||||
You should see a message like this:
|
||||
|
||||
```sh
|
||||
> Ready! You are using Stripe API Version [2023-08-16]. Your webhook signing secret is whsec_8a... (^C to quit)
|
||||
```
|
||||
|
||||
copy this secret to your `.env.server` file under `STRIPE_WEBHOOK_SECRET=`.
|
||||
@ -1,77 +0,0 @@
|
||||
---
|
||||
title: Stripe Testing
|
||||
banner:
|
||||
content: |
|
||||
Open SaaS is now running on <a href='https://wasp-lang.dev'>Wasp v0.14</a>! <br/>🐝🚀<br/>If you're running an older version, please follow the <a href="https://wasp-lang.dev/docs/migrate-from-0-13-to-0-14">migration instructions.</a>
|
||||
---
|
||||
This guide will show you how to test and try out your checkout, payments, and webhooks locally.
|
||||
|
||||
First, make sure you've set up your Stripe account for local development. You can find the guide [here](/guides/stripe-integration).
|
||||
|
||||
## Testing Webhooks via the Stripe CLI
|
||||
|
||||
- In a new terminal window, run the following command:
|
||||
|
||||
```sh
|
||||
stripe login
|
||||
```
|
||||
|
||||
- start the Stripe CLI webhook forwarding on port 3001 where your Node server is running.
|
||||
|
||||
```sh
|
||||
stripe listen --forward-to localhost:3001/stripe-webhook
|
||||
```
|
||||
|
||||
remember to copy and paste the outputted webhook signing secret (`whsec_...`) into your `.env.server` file under `STRIPE_WEBHOOK_SECRET=` if you haven't already.
|
||||
|
||||
- In another terminal window, trigger a test event:
|
||||
|
||||
```sh
|
||||
stripe trigger payment_intent.succeeded
|
||||
```
|
||||
|
||||
The results of the event firing will be visible in the initial terminal window. You should see messages like this:
|
||||
|
||||
```sh
|
||||
...
|
||||
2023-11-21 09:31:09 --> invoice.paid [evt_1OEpMPILOQf67J5TjrUgRpk4]
|
||||
2023-11-21 09:31:09 <-- [200] POST http://localhost:3001/stripe-webhook [evt_1OEpMPILOQf67J5TjrUgRpk4]
|
||||
2023-11-21 09:31:10 --> invoice.payment_succeeded [evt_1OEpMPILOQf67J5T3MFBr1bq]
|
||||
2023-11-21 09:31:10 <-- [200] POST http://localhost:3001/stripe-webhook [evt_1OEpMPILOQf67J5T3MFBr1bq]
|
||||
2023-11-21 09:31:10 --> checkout.session.completed [evt_1OEpMQILOQf67J5ThTZ0999r]
|
||||
2023-11-21 09:31:11 <-- [200] POST http://localhost:3001/stripe-webhook [evt_1OEpMQILOQf67J5ThTZ0999r]
|
||||
```
|
||||
|
||||
For more info on testing webhooks, check out https://stripe.com/docs/webhooks#test-webhook
|
||||
|
||||
:::tip[Star our Repo on GitHub! 🌟]
|
||||
We've packed in a ton of features and love into this SaaS starter, and offer it all to you for free!
|
||||
|
||||
If you're finding this template and its guides useful, consider giving us [a star on GitHub](https://github.com/wasp-lang/wasp)
|
||||
:::
|
||||
|
||||
## Testing Checkout and Payments via the Client
|
||||
|
||||
Make sure the **Stripe CLI is running** by following the steps above.
|
||||
You can then test the payment flow via the client by doing the following:
|
||||
|
||||
- Click on a Buy button on the for any of the products on the homepage. You should be redirected to the checkout page.
|
||||
- Fill in the form with the following test credit card number `4242 4242 4242 4242` and any future date for the expiration date and any 3 digits for the CVC.
|
||||
|
||||
- Click on the "Pay" button. You should be redirected to the success page.
|
||||
|
||||
- Check your terminal window for status messages and logs
|
||||
|
||||
- You can also check your Database via the DB Studio to see if the user entity has been updated by running:
|
||||
|
||||
```sh
|
||||
wasp db studio
|
||||
```
|
||||
|
||||
|
||||
|
||||
- Navigate to `localhost:5555` and click on the `users` table. You should see the `subscriptionStatus` is `active` for the user that just made the purchase.
|
||||
|
||||
:::note
|
||||
If you want to learn more about how a user's payment status, subscription status, and subscription tier affect a user's priveledges within the app, check out the [User Overview](/general/user-overview) reference.
|
||||
:::
|
||||
@ -172,7 +172,7 @@ Next, copy the `.env.server.example` file to `.env.server`.
|
||||
cp .env.server.example .env.server
|
||||
```
|
||||
|
||||
`.env.server` is where API keys for services like Stripe, email sender, and similar go, and this is where you will want to put them in later.
|
||||
`.env.server` is where API keys for services like payments, email sender, and similar go, and this is where you will want to put them in later.
|
||||
For now, you can leave it as it is (dummy API keys), this will be enough to run the app.
|
||||
|
||||
Then run:
|
||||
|
||||
@ -22,8 +22,8 @@ Awesome, you now have your very own SaaS app up and running! But, first, here ar
|
||||
[ Server ] <a href="http://localhost:3000/email-verification?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InZpbm55QHdhc3Auc2giLCJleHAiOjE3MTg5NjUyNTB9.PkRGrmuDPuYFXkTprf7QpAye0e_O9a70xbER6LfxGJw">Verify email</a>
|
||||
[ Server ] ════════════════════════
|
||||
```
|
||||
2. Your app is still missing some key configurations (e.g. API keys for Stripe, OpenAI, AWS S3, Auth, Analytics). These services won't work at the moment, but don't fear, because **we've provided detailed guides in these docs to help you set up all the services in this template**.
|
||||
3. If you want to get a feel for what your SaaS could look like when finished, **check out [OpenSaaS.sh](https://opensaas.sh) in your browser. It was built using this template!** So make sure to log in, play around with the demo app, make a test Stripe payment, and check out the admin dashboard.
|
||||
2. Your app is still missing some key configurations (e.g. API keys for Payment Processors, OpenAI, AWS S3, Auth, Analytics). These services won't work at the moment, but don't fear, because **we've provided detailed guides in these docs to help you set up all the services in this template**.
|
||||
3. If you want to get a feel for what your SaaS could look like when finished, **check out [OpenSaaS.sh](https://opensaas.sh) in your browser. It was built using this template!** So make sure to log in, play around with the demo app, make a test payment, and check out the admin dashboard.
|
||||
|
||||
In the sections below, we will take a short guide through the codebase and the app's main features. Then at the end of this tour, we also prepared a checklist of likely changes you will want to make to the app to make it your own.
|
||||
|
||||
@ -71,7 +71,7 @@ If you are using an older version of the OpenSaaS template with Wasp `v0.13.x` o
|
||||
│ ├── landing-page # Landing page related code
|
||||
│ ├── messages # Logic for app user messages.
|
||||
│ ├── newsletter/ # Logic for scheduled recurring newsletter sending.
|
||||
│ ├── payment/ # Logic for handling Stripe payments and webhooks.
|
||||
│ ├── payment/ # Logic for handling payments and webhooks.
|
||||
│ ├── server/ # Scripts, shared server utils, and other server-specific code (NodeJS).
|
||||
│ ├── shared/ # Shared constants and util functions.
|
||||
│ └── user/ # Logic related to users and their accounts.
|
||||
@ -187,57 +187,59 @@ For development purposes, Wasp provides a `Dummy` email sender which Open SaaS c
|
||||
|
||||
We will explain more about these auth methods, and how to properly integrate them into your app, in the [Authentication Guide](/guides/authentication).
|
||||
|
||||
### Subscription Payments with Stripe
|
||||
### Subscription Payments with Stripe or Lemon Squeezy
|
||||
|
||||
No SaaS is complete without payments, specifically subscription payments. That's why this template comes with a fully functional Stripe integration.
|
||||
No SaaS is complete without payments, specifically subscription payments. That's why this template comes with a fully functional Stripe or Lemon Squeezy integration.
|
||||
|
||||
Let's take a quick look at how payments are handled in this template.
|
||||
|
||||
1. a user clicks the `BUY` button and a **Stripe Checkout session** is created on the server
|
||||
2. the user is redirected to the Stripe Checkout page where they enter their payment info
|
||||
3. the user is redirected back to the app and the Stripe Checkout session is completed
|
||||
4. Stripe sends a webhook event to the server with the payment info
|
||||
1. a user clicks the `BUY` button and a **Checkout session** is created on the server
|
||||
2. the user is redirected to the Checkout page where they enter their payment info
|
||||
3. the user is redirected back to the app and the Checkout session is completed
|
||||
4. Stripe / Lemon Squeezy sends a webhook event to the server with the payment info
|
||||
5. The app server's **webhook handler** handles the event and updates the user's subscription status
|
||||
|
||||
The logic for creating the Stripe Checkout session is defined in the `src/payment/operation.ts` file. [Actions](https://wasp-lang.dev/docs/data-model/operations/actions) are a type of Wasp Operation, specifically your server-side functions that are used to **write** or **update** data to the database. Once they're defined in the `main.wasp` file, you can easily call them on the client-side:
|
||||
The payment processor you choose (Stripe or Lemon Squeezy) and its related functions can be found at `src/payment/paymentProcessor.ts`. The `Payment Processor` object holds the logic for creating checkout sessions, webhooks, etc.
|
||||
|
||||
The logic for creating the Checkout session is defined in the `src/payment/operation.ts` file. [Actions](https://wasp-lang.dev/docs/data-model/operations/actions) are a type of Wasp Operation, specifically your server-side functions that are used to **write** or **update** data to the database. Once they're defined in the `main.wasp` file, you can easily call them on the client-side:
|
||||
|
||||
a) define the action in the `main.wasp` file
|
||||
```js title="main.wasp"
|
||||
action generateStripeCheckoutSession {
|
||||
fn: import { generateStripeCheckoutSession } from "@src/payment/operations",
|
||||
action generateCheckoutSession {
|
||||
fn: import { generateCheckoutSession } from "@src/payment/operations",
|
||||
entities: [User]
|
||||
}
|
||||
```
|
||||
|
||||
b) implement the action in the `src/payment/operations` file
|
||||
```js title="src/server/actions.ts"
|
||||
export const generateStripeCheckoutSession = async (paymentPlanId, context) => {
|
||||
export const generateCheckoutSession = async (paymentPlanId, context) => {
|
||||
//...
|
||||
}
|
||||
```
|
||||
|
||||
c) call the action on the client-side
|
||||
```js title="src/client/app/SubscriptionPage.tsx"
|
||||
import { generateStripeCheckoutSession } from "wasp/client/operations";
|
||||
import { generateCheckoutSession } from "wasp/client/operations";
|
||||
|
||||
const handleBuyClick = async (paymentPlanId) => {
|
||||
const stripeCheckoutSession = await generateStripeCheckoutSession(paymentPlanId);
|
||||
const checkoutSession = await generateCheckoutSession(paymentPlanId);
|
||||
};
|
||||
```
|
||||
|
||||
The webhook handler is defined in the `src/payment/stripe/webhook.ts` file. Unlike Actions and Queries in Wasp which are only to be used internally, we define the webhook handler in the `main.wasp` file as an API endpoint in order to expose it externally to Stripe
|
||||
The webhook handler is defined in the `src/payment/webhook.ts` file. Unlike Actions and Queries in Wasp which are only to be used internally, we define the webhook handler in the `main.wasp` file as an API endpoint in order to expose it externally to Stripe
|
||||
|
||||
```js title="main.wasp"
|
||||
api stripeWebhook {
|
||||
fn: import { stripeWebhook } from "@src/payment/stripe/webhook",
|
||||
httpRoute: (POST, "/stripe-webhook")
|
||||
api paymentsWebhook {
|
||||
fn: import { paymentsWebhook } from "@src/payment/webhook",
|
||||
httpRoute: (POST, "/payments-webhook")
|
||||
entities: [User],
|
||||
}
|
||||
```
|
||||
|
||||
Within the webhook handler, we look for specific events that Stripe sends us to let us know which payment was completed and for which user. Then we update the user's subscription status in the database.
|
||||
Within the webhook handler, we look for specific events that the Payment Processor sends us to let us know which payment was completed and for which user. Then we update the user's subscription status in the database.
|
||||
|
||||
To learn more about configuring the app to handle your products and payments, check out the [Stripe Integration guide](/guides/stripe-integration).
|
||||
To learn more about configuring the app to handle your products and payments, check out the [Payments Integration guide](/guides/payments-integration).
|
||||
|
||||
:::tip[Star our Repo on GitHub! 🌟]
|
||||
We've packed in a ton of features and love into this SaaS starter, and offer it all to you for free!
|
||||
@ -248,7 +250,7 @@ If you're finding this template and its guides useful, consider giving us [a sta
|
||||
|
||||
### Analytics and Admin Dashboard
|
||||
|
||||
Keeping an eye on your metrics is crucial for any SaaS. That's why we've built an administrator's dashboard where you can view your app's stats, user data, and Stripe revenue all in one place.
|
||||
Keeping an eye on your metrics is crucial for any SaaS. That's why we've built an administrator's dashboard where you can view your app's stats, user data, and revenue all in one place.
|
||||
|
||||
<!-- TODO: add pic of admin dash -->
|
||||
|
||||
@ -276,7 +278,7 @@ For more info on integrating Plausible or Google Analytics, check out the [Analy
|
||||
When you first start your Open SaaS app straight from the template, it will run, but many of the services won't work because they lack your own API keys. Here are list of services that need your API keys to work properly:
|
||||
|
||||
- Auth Methods (Google, GitHub)
|
||||
- Stripe
|
||||
- Stripe or Lemon Squeezy
|
||||
- OpenAI (Chat GPT API)
|
||||
- Email Sending (Sendgrid) -- you must set this up if you're using the `email` Auth method
|
||||
- Analytics (Plausible or Google Analytics)
|
||||
@ -345,4 +347,4 @@ But before you start setting up the main features, let's walk through the custom
|
||||
|
||||
## What's next?
|
||||
|
||||
In the following `Guides` sections, we'll walk you through getting those API keys and setting up the finer points of features such as Stripe Payments & Webhooks, Auth, Email Sending, Analytics, and more.
|
||||
In the following `Guides` sections, we'll walk you through getting those API keys and setting up the finer points of features such as Payments & Webhooks, Auth, Email Sending, Analytics, and more.
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
# All client-side env vars must start with REACT_APP_ https://wasp-lang.dev/docs/project/env-vars
|
||||
|
||||
# Find your test url at https://dashboard.stripe.com/test/settings/billing/portal
|
||||
REACT_APP_STRIPE_CUSTOMER_PORTAL=https://billing.stripe.com/...
|
||||
|
||||
# See https://docs.opensaas.sh/guides/analytics/#google-analytics
|
||||
REACT_APP_GOOGLE_ANALYTICS_ID=G-...
|
||||
|
||||
@ -3,14 +3,25 @@
|
||||
# If you use `wasp start db` then you DO NOT need to add a DATABASE_URL env variable here.
|
||||
# DATABASE_URL=
|
||||
|
||||
# for testing, go to https://dashboard.stripe.com/test/apikeys and get a test stripe key that starts with "sk_test_..."
|
||||
STRIPE_KEY=sk_test_...
|
||||
# to create a test product, go to https://dashboard.stripe.com/test/products and click on + Add Product
|
||||
STRIPE_HOBBY_SUBSCRIPTION_PRICE_ID=price_...
|
||||
STRIPE_PRO_SUBSCRIPTION_PRICE_ID=price_...
|
||||
STRIPE_CREDITS_PRICE_ID=price_...
|
||||
# after downloading starting the stripe cli (https://stripe.com/docs/stripe-cli) with `stripe listen --forward-to localhost:3001/stripe-webhook` it will output your signing secret
|
||||
# For testing, go to https://dashboard.stripe.com/test/apikeys and get a test stripe key that starts with "sk_test_..."
|
||||
STRIPE_API_KEY=sk_test_...
|
||||
# After downloading starting the stripe cli (https://stripe.com/docs/stripe-cli) with `stripe listen --forward-to localhost:3001/payments-webhook` it will output your signing secret
|
||||
STRIPE_WEBHOOK_SECRET=whsec_...
|
||||
# You can find your Stripe customer portal URL in the Stripe Dashboard under the 'Customer Portal' settings.
|
||||
STRIPE_CUSTOMER_PORTAL_URL=https://billing.stripe.com/...
|
||||
|
||||
# For testing, create a new store in test mode on https://lemonsqueezy.com
|
||||
LEMONSQUEEZY_API_KEY=eyJ...
|
||||
# After creating a store, you can find your store id in the store settings https://app.lemonsqueezy.com/settings/stores
|
||||
LEMONSQUEEZY_STORE_ID=012345
|
||||
# define your own webhook secret when creating a new webhook on https://app.lemonsqueezy.com/settings/webhooks
|
||||
LEMONSQUEEZY_WEBHOOK_SECRET=my-webhook-secret
|
||||
|
||||
# If using Stripe, go to https://dashboard.stripe.com/test/products and click on + Add Product
|
||||
# If using Lemon Squeezy, go to https://app.lemonsqueezy.com/products and create new products and variants
|
||||
PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID=012345
|
||||
PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID=012345
|
||||
PAYMENTS_CREDITS_10_PLAN_ID=012345
|
||||
|
||||
# set this as a comma-separated list of emails you want to give admin privileges to upon registeration
|
||||
ADMIN_EMAILS=me@example.com,you@example.com,them@example.com
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"endOfLine": "lf",
|
||||
"tabWidth": 2,
|
||||
"jsxSingleQuote": true,
|
||||
"printWidth": 120
|
||||
}
|
||||
@ -195,16 +195,21 @@ page CheckoutPage {
|
||||
component: import Checkout from "@src/payment/CheckoutPage"
|
||||
}
|
||||
|
||||
action generateStripeCheckoutSession {
|
||||
fn: import { generateStripeCheckoutSession } from "@src/payment/operations",
|
||||
query getCustomerPortalUrl {
|
||||
fn: import { getCustomerPortalUrl } from "@src/payment/operations",
|
||||
entities: [User]
|
||||
}
|
||||
|
||||
api stripeWebhook {
|
||||
fn: import { stripeWebhook } from "@src/payment/stripe/webhook",
|
||||
action generateCheckoutSession {
|
||||
fn: import { generateCheckoutSession } from "@src/payment/operations",
|
||||
entities: [User]
|
||||
}
|
||||
|
||||
api paymentsWebhook {
|
||||
fn: import { paymentsWebhook } from "@src/payment/webhook",
|
||||
entities: [User],
|
||||
middlewareConfigFn: import { stripeMiddlewareFn } from "@src/payment/stripe/webhook",
|
||||
httpRoute: (POST, "/stripe-webhook")
|
||||
middlewareConfigFn: import { paymentsMiddlewareConfigFn } from "@src/payment/webhook",
|
||||
httpRoute: (POST, "/payments-webhook")
|
||||
}
|
||||
//#endregion
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"@faker-js/faker": "8.3.1",
|
||||
"@google-analytics/data": "4.1.0",
|
||||
"@headlessui/react": "1.7.13",
|
||||
"@lemonsqueezy/lemonsqueezy.js": "^3.2.0",
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@tailwindcss/typography": "^0.5.7",
|
||||
"apexcharts": "^3.41.0",
|
||||
|
||||
@ -16,7 +16,8 @@ model User {
|
||||
lastActiveTimestamp DateTime @default(now())
|
||||
isAdmin Boolean @default(false)
|
||||
|
||||
stripeId String? @unique
|
||||
paymentProcessorUserId String? @unique
|
||||
lemonSqueezyCustomerPortalUrl String? // You can delete this if you're not using Lemon Squeezy as your payments processor.
|
||||
checkoutSessionId String?
|
||||
subscriptionStatus String? // 'active', 'canceled', 'past_due', 'deleted'
|
||||
subscriptionPlan String? // 'hobby', 'pro'
|
||||
|
||||
@ -114,7 +114,13 @@ const UsersTable = () => {
|
||||
})}
|
||||
</select>
|
||||
<span className='absolute top-1/2 right-4 z-10 -translate-y-1/2'>
|
||||
<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
||||
<svg
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<g opacity='0.8'>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
@ -207,14 +213,16 @@ const UsersTable = () => {
|
||||
|
||||
<div className='col-span-3 hidden items-center sm:flex'>
|
||||
<p className='text-sm text-black dark:text-white'>
|
||||
{user.lastActiveTimestamp.toLocaleDateString() + ' ' + user.lastActiveTimestamp.toLocaleTimeString()}
|
||||
{user.lastActiveTimestamp.toLocaleDateString() +
|
||||
' ' +
|
||||
user.lastActiveTimestamp.toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className='col-span-2 flex items-center'>
|
||||
<p className='text-sm text-black dark:text-white'>{user.subscriptionStatus}</p>
|
||||
</div>
|
||||
<div className='col-span-2 flex items-center'>
|
||||
<p className='text-sm text-meta-3'>{user.stripeId}</p>
|
||||
<p className='text-sm text-meta-3'>{user.paymentProcessorUserId}</p>
|
||||
</div>
|
||||
<div className='col-span-1 flex items-center'>
|
||||
<div className='text-sm text-black dark:text-white'>
|
||||
|
||||
@ -2,8 +2,10 @@ import { type DailyStats } from 'wasp/entities';
|
||||
import { type DailyStatsJob } from 'wasp/server/jobs';
|
||||
import Stripe from 'stripe';
|
||||
import { stripe } from '../payment/stripe/stripeClient'
|
||||
import { listOrders } from '@lemonsqueezy/lemonsqueezy.js';
|
||||
import { getDailyPageViews, getSources } from './providers/plausibleAnalyticsUtils';
|
||||
// import { getDailyPageViews, getSources } from './providers/googleAnalyticsUtils';
|
||||
// import { getDailyPageViews, getSources } from './providers/googleAnalyticsUtils;
|
||||
import { paymentProcessor } from '../payment/paymentProcessor';
|
||||
|
||||
export type DailyStatsProps = { dailyStats?: DailyStats; weeklyStats?: DailyStats[]; isLoading?: boolean };
|
||||
|
||||
@ -39,7 +41,18 @@ export const calculateDailyStats: DailyStatsJob<never, void> = async (_args, con
|
||||
paidUserDelta -= yesterdaysStats.paidUserCount;
|
||||
}
|
||||
|
||||
const totalRevenue = await fetchTotalStripeRevenue();
|
||||
let totalRevenue;
|
||||
switch (paymentProcessor.id) {
|
||||
case 'stripe':
|
||||
totalRevenue = await fetchTotalStripeRevenue();
|
||||
break;
|
||||
case 'lemonsqueezy':
|
||||
totalRevenue = await fetchTotalLemonSqueezyRevenue();
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Unsupported payment processor: ${paymentProcessor.id}`);
|
||||
}
|
||||
|
||||
const { totalViews, prevDayViewsChangePercent } = await getDailyPageViews();
|
||||
|
||||
let dailyStats = await context.entities.DailyStats.findUnique({
|
||||
@ -147,6 +160,40 @@ async function fetchTotalStripeRevenue() {
|
||||
}
|
||||
|
||||
// Revenue is in cents so we convert to dollars (or your main currency unit)
|
||||
const formattedRevenue = totalRevenue / 100;
|
||||
return formattedRevenue;
|
||||
return totalRevenue / 100;
|
||||
}
|
||||
|
||||
async function fetchTotalLemonSqueezyRevenue() {
|
||||
try {
|
||||
let totalRevenue = 0;
|
||||
let hasNextPage = true;
|
||||
let currentPage = 1;
|
||||
|
||||
while (hasNextPage) {
|
||||
const { data: response } = await listOrders({
|
||||
filter: {
|
||||
storeId: process.env.LEMONSQUEEZY_STORE_ID,
|
||||
},
|
||||
page: {
|
||||
number: currentPage,
|
||||
size: 100,
|
||||
},
|
||||
});
|
||||
|
||||
if (response?.data) {
|
||||
for (const order of response.data) {
|
||||
totalRevenue += order.attributes.total;
|
||||
}
|
||||
}
|
||||
|
||||
hasNextPage = !response?.meta?.page.lastPage;
|
||||
currentPage++;
|
||||
}
|
||||
|
||||
// Revenue is in cents so we convert to dollars (or your main currency unit)
|
||||
return totalRevenue / 100;
|
||||
} catch (error) {
|
||||
console.error('Error fetching Lemon Squeezy revenue:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,10 @@
|
||||
import { useAuth } from 'wasp/client/auth';
|
||||
import { generateStripeCheckoutSession } from 'wasp/client/operations';
|
||||
import { generateCheckoutSession, getCustomerPortalUrl, useQuery } from 'wasp/client/operations';
|
||||
import { PaymentPlanId, paymentPlans, prettyPaymentPlanName } from './plans';
|
||||
import { AiFillCheckCircle } from 'react-icons/ai';
|
||||
import { useState } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { cn } from '../client/cn';
|
||||
import { z } from 'zod';
|
||||
|
||||
const bestDealPaymentPlanId: PaymentPlanId = PaymentPlanId.Pro;
|
||||
|
||||
@ -14,7 +13,7 @@ interface PaymentPlanCard {
|
||||
price: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export const paymentPlanCards: Record<PaymentPlanId, PaymentPlanCard> = {
|
||||
[PaymentPlanId.Hobby]: {
|
||||
@ -34,14 +33,22 @@ export const paymentPlanCards: Record<PaymentPlanId, PaymentPlanCard> = {
|
||||
price: '$9.99',
|
||||
description: 'One-time purchase of 10 credits for your account',
|
||||
features: ['Use credits for e.g. OpenAI API calls', 'No expiration date'],
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const PricingPage = () => {
|
||||
const [isStripePaymentLoading, setIsStripePaymentLoading] = useState<boolean | string>(false);
|
||||
const [isPaymentLoading, setIsPaymentLoading] = useState<boolean>(false);
|
||||
|
||||
const { data: user, isLoading: isUserLoading } = useAuth();
|
||||
|
||||
const shouldFetchCustomerPortalUrl = !!user && !!user.subscriptionStatus;
|
||||
|
||||
const {
|
||||
data: customerPortalUrl,
|
||||
isLoading: isCustomerPortalUrlLoading,
|
||||
error: customerPortalUrlError,
|
||||
} = useQuery(getCustomerPortalUrl, { enabled: shouldFetchCustomerPortalUrl });
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
async function handleBuyNowClick(paymentPlanId: PaymentPlanId) {
|
||||
@ -50,16 +57,18 @@ const PricingPage = () => {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setIsStripePaymentLoading(paymentPlanId);
|
||||
let stripeResults = await generateStripeCheckoutSession(paymentPlanId);
|
||||
setIsPaymentLoading(true);
|
||||
|
||||
if (stripeResults?.sessionUrl) {
|
||||
window.open(stripeResults.sessionUrl, '_self');
|
||||
const checkoutResults = await generateCheckoutSession(paymentPlanId);
|
||||
|
||||
if (checkoutResults?.sessionUrl) {
|
||||
window.open(checkoutResults.sessionUrl, '_self');
|
||||
} else {
|
||||
throw new Error('Error generating checkout session URL');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error?.message ?? 'Something went wrong.');
|
||||
} finally {
|
||||
setIsStripePaymentLoading(false);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setIsPaymentLoading(false); // We only set this to false here and not in the try block because we redirect to the checkout url within the same window
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,13 +77,16 @@ const PricingPage = () => {
|
||||
history.push('/login');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const schema = z.string().url();
|
||||
const customerPortalUrl = schema.parse(import.meta.env.REACT_APP_STRIPE_CUSTOMER_PORTAL);
|
||||
window.open(customerPortalUrl, '_blank');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
|
||||
if (customerPortalUrlError) {
|
||||
console.error('Error fetching customer portal url');
|
||||
}
|
||||
|
||||
if (!customerPortalUrl) {
|
||||
throw new Error(`Customer Portal does not exist for user ${user.id}`)
|
||||
}
|
||||
|
||||
window.open(customerPortalUrl, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
@ -86,8 +98,8 @@ const PricingPage = () => {
|
||||
</h2>
|
||||
</div>
|
||||
<p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600 dark:text-white'>
|
||||
Stripe subscriptions and secure webhooks are built-in. Just add your Stripe Product IDs! Try it out below with
|
||||
test credit card number{' '}
|
||||
Choose between Stripe and LemonSqueezy as your payment provider. Just add your Product IDs! Try it
|
||||
out below with test credit card number <br />
|
||||
<span className='px-2 py-1 bg-gray-100 rounded-md text-gray-500'>4242 4242 4242 4242 4242</span>
|
||||
</p>
|
||||
<div className='isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 lg:gap-x-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3'>
|
||||
@ -103,7 +115,10 @@ const PricingPage = () => {
|
||||
)}
|
||||
>
|
||||
{planId === bestDealPaymentPlanId && (
|
||||
<div className='absolute top-0 right-0 -z-10 w-full h-full transform-gpu blur-3xl' aria-hidden='true'>
|
||||
<div
|
||||
className='absolute top-0 right-0 -z-10 w-full h-full transform-gpu blur-3xl'
|
||||
aria-hidden='true'
|
||||
>
|
||||
<div
|
||||
className='absolute w-full h-full bg-gradient-to-br from-amber-400 to-purple-300 opacity-30 dark:opacity-50'
|
||||
style={{
|
||||
@ -141,6 +156,7 @@ const PricingPage = () => {
|
||||
{!!user && !!user.subscriptionStatus ? (
|
||||
<button
|
||||
onClick={handleCustomerPortalClick}
|
||||
disabled={isCustomerPortalUrlLoading}
|
||||
aria-describedby='manage-subscription'
|
||||
className={cn(
|
||||
'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-yellow-400',
|
||||
@ -166,10 +182,11 @@ const PricingPage = () => {
|
||||
planId !== bestDealPaymentPlanId,
|
||||
},
|
||||
{
|
||||
'opacity-50 cursor-wait cursor-not-allowed': isStripePaymentLoading === planId,
|
||||
'opacity-50 cursor-wait': isPaymentLoading,
|
||||
},
|
||||
'mt-8 block rounded-md py-2 px-3 text-center text-sm dark:text-white font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-yellow-400'
|
||||
)}
|
||||
disabled={isPaymentLoading}
|
||||
>
|
||||
{!!user ? 'Buy plan' : 'Log in to buy plan'}
|
||||
</button>
|
||||
|
||||
29
template/app/src/payment/lemonSqueezy/checkoutUtils.ts
Normal file
29
template/app/src/payment/lemonSqueezy/checkoutUtils.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { createCheckout } from '@lemonsqueezy/lemonsqueezy.js';
|
||||
|
||||
interface LemonSqueezyCheckoutSessionParams {
|
||||
storeId: string;
|
||||
variantId: string;
|
||||
userEmail: string;
|
||||
userId: string;
|
||||
};
|
||||
|
||||
export async function createLemonSqueezyCheckoutSession({ storeId, variantId, userEmail, userId }: LemonSqueezyCheckoutSessionParams) {
|
||||
const { data: session, error } = await createCheckout(storeId, variantId, {
|
||||
checkoutData: {
|
||||
email: userEmail,
|
||||
custom: {
|
||||
user_id: userId // You app's unique user ID is sent on checkout, and it's returned in the webhook so we can easily identify the user.
|
||||
}
|
||||
}
|
||||
});
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
if (!session) {
|
||||
throw new Error('Checkout not found');
|
||||
}
|
||||
return {
|
||||
url: session.data.attributes.url,
|
||||
id: session.data.id,
|
||||
};
|
||||
}
|
||||
30
template/app/src/payment/lemonSqueezy/paymentDetails.ts
Normal file
30
template/app/src/payment/lemonSqueezy/paymentDetails.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import type { SubscriptionStatus } from '../plans';
|
||||
import { PaymentPlanId } from '../plans';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
|
||||
export const updateUserLemonSqueezyPaymentDetails = async (
|
||||
{ lemonSqueezyId, userId, subscriptionPlan, subscriptionStatus, datePaid, numOfCreditsPurchased, lemonSqueezyCustomerPortalUrl }: {
|
||||
lemonSqueezyId: string;
|
||||
userId: string;
|
||||
subscriptionPlan?: PaymentPlanId;
|
||||
subscriptionStatus?: SubscriptionStatus;
|
||||
numOfCreditsPurchased?: number;
|
||||
lemonSqueezyCustomerPortalUrl?: string;
|
||||
datePaid?: Date;
|
||||
},
|
||||
prismaUserDelegate: PrismaClient['user']
|
||||
) => {
|
||||
return prismaUserDelegate.update({
|
||||
where: {
|
||||
id: userId,
|
||||
},
|
||||
data: {
|
||||
paymentProcessorUserId: lemonSqueezyId,
|
||||
lemonSqueezyCustomerPortalUrl,
|
||||
subscriptionPlan,
|
||||
subscriptionStatus,
|
||||
datePaid,
|
||||
credits: numOfCreditsPurchased !== undefined ? { increment: numOfCreditsPurchased } : undefined,
|
||||
},
|
||||
});
|
||||
};
|
||||
40
template/app/src/payment/lemonSqueezy/paymentProcessor.ts
Normal file
40
template/app/src/payment/lemonSqueezy/paymentProcessor.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import type { CreateCheckoutSessionArgs, FetchCustomerPortalUrlArgs, PaymentProcessor } from '../paymentProcessor';
|
||||
import { requireNodeEnvVar } from '../../server/utils';
|
||||
import { createLemonSqueezyCheckoutSession } from './checkoutUtils';
|
||||
import { lemonSqueezyWebhook, lemonSqueezyMiddlewareConfigFn } from './webhook';
|
||||
import { lemonSqueezySetup } from '@lemonsqueezy/lemonsqueezy.js';
|
||||
|
||||
lemonSqueezySetup({
|
||||
apiKey: requireNodeEnvVar('LEMONSQUEEZY_API_KEY'),
|
||||
});
|
||||
|
||||
export const lemonSqueezyPaymentProcessor: PaymentProcessor = {
|
||||
id: 'lemonsqueezy',
|
||||
createCheckoutSession: async ({ userId, userEmail, paymentPlan }: CreateCheckoutSessionArgs) => {
|
||||
if (!userId) throw new Error('User ID needed to create Lemon Squeezy Checkout Session');
|
||||
const session = await createLemonSqueezyCheckoutSession({
|
||||
storeId: requireNodeEnvVar('LEMONSQUEEZY_STORE_ID'),
|
||||
variantId: paymentPlan.getPaymentProcessorPlanId(),
|
||||
userEmail,
|
||||
userId,
|
||||
});
|
||||
return { session };
|
||||
},
|
||||
fetchCustomerPortalUrl: async (args: FetchCustomerPortalUrlArgs) => {
|
||||
const user = await args.prismaUserDelegate.findUniqueOrThrow({
|
||||
where: {
|
||||
id: args.userId,
|
||||
},
|
||||
select: {
|
||||
lemonSqueezyCustomerPortalUrl: true,
|
||||
},
|
||||
});
|
||||
if (!user.lemonSqueezyCustomerPortalUrl) {
|
||||
console.log(`User with ID ${args.userId} does not have a LemonSqueezy customer portal URL`);
|
||||
} else {
|
||||
return user.lemonSqueezyCustomerPortalUrl;
|
||||
}
|
||||
},
|
||||
webhook: lemonSqueezyWebhook,
|
||||
webhookMiddlewareConfigFn: lemonSqueezyMiddlewareConfigFn,
|
||||
};
|
||||
201
template/app/src/payment/lemonSqueezy/webhook.ts
Normal file
201
template/app/src/payment/lemonSqueezy/webhook.ts
Normal file
@ -0,0 +1,201 @@
|
||||
import { type MiddlewareConfigFn, HttpError } from 'wasp/server';
|
||||
import { type PaymentsWebhook } from 'wasp/server/api';
|
||||
import { type PrismaClient } from '@prisma/client';
|
||||
import express from 'express';
|
||||
import { paymentPlans, PaymentPlanId } from '../plans';
|
||||
import { updateUserLemonSqueezyPaymentDetails } from './paymentDetails';
|
||||
import { type Order, type Subscription, getCustomer } from '@lemonsqueezy/lemonsqueezy.js';
|
||||
import crypto from 'crypto';
|
||||
import { requireNodeEnvVar } from '../../server/utils';
|
||||
|
||||
|
||||
export const lemonSqueezyWebhook: PaymentsWebhook = async (request, response, context) => {
|
||||
try {
|
||||
const rawBody = request.body.toString('utf8');
|
||||
const signature = request.get('X-Signature');
|
||||
if (!signature) {
|
||||
throw new HttpError(400, 'Lemon Squeezy Webhook Signature Not Provided');
|
||||
}
|
||||
|
||||
const secret = requireNodeEnvVar('LEMONSQUEEZY_WEBHOOK_SECRET');
|
||||
const hmac = crypto.createHmac('sha256', secret);
|
||||
const digest = Buffer.from(hmac.update(rawBody).digest('hex'), 'utf8');
|
||||
|
||||
if (!crypto.timingSafeEqual(Buffer.from(signature, 'utf8'), digest)) {
|
||||
throw new HttpError(400, 'Invalid signature');
|
||||
}
|
||||
|
||||
const event = JSON.parse(rawBody);
|
||||
const userId = event.meta.custom_data.user_id;
|
||||
const prismaUserDelegate = context.entities.User;
|
||||
switch (event.meta.event_name) {
|
||||
case 'order_created':
|
||||
await handleOrderCreated(event as Order, userId, prismaUserDelegate);
|
||||
break;
|
||||
case 'subscription_created':
|
||||
await handleSubscriptionCreated(event as Subscription, userId, prismaUserDelegate);
|
||||
break;
|
||||
case 'subscription_updated':
|
||||
await handleSubscriptionUpdated(event as Subscription, userId, prismaUserDelegate);
|
||||
break;
|
||||
case 'subscription_cancelled':
|
||||
await handleSubscriptionCancelled(event as Subscription, userId, prismaUserDelegate);
|
||||
break;
|
||||
case 'subscription_expired':
|
||||
await handleSubscriptionExpired(event as Subscription, userId, prismaUserDelegate);
|
||||
break;
|
||||
default:
|
||||
console.error('Unhandled event type: ', event.meta.event_name);
|
||||
}
|
||||
|
||||
response.status(200).json({ received: true });
|
||||
} catch (err) {
|
||||
console.error('Webhook error:', err);
|
||||
if (err instanceof HttpError) {
|
||||
response.status(err.statusCode).json({ error: err.message });
|
||||
} else {
|
||||
response.status(400).json({ error: 'Error Processing Lemon Squeezy Webhook Event' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const lemonSqueezyMiddlewareConfigFn: MiddlewareConfigFn = (middlewareConfig) => {
|
||||
// We need to delete the default 'express.json' middleware and replace it with 'express.raw' middleware
|
||||
// because webhook data in the body of the request as raw JSON, not as JSON in the body of the request.
|
||||
middlewareConfig.delete('express.json');
|
||||
middlewareConfig.set('express.raw', express.raw({ type: 'application/json' }));
|
||||
return middlewareConfig;
|
||||
};
|
||||
|
||||
// This will fire for one-time payment orders AND subscriptions. But subscriptions will ALSO send a follow-up
|
||||
// event of 'subscription_created'. So we use this handler mainly to process one-time, credit-based orders,
|
||||
// as well as to save the customer portal URL and customer id for the user.
|
||||
async function handleOrderCreated(data: Order, userId: string, prismaUserDelegate: PrismaClient['user']) {
|
||||
const { customer_id, status, first_order_item, order_number } = data.data.attributes;
|
||||
const lemonSqueezyId = customer_id.toString();
|
||||
|
||||
const planId = getPlanIdByVariantId(first_order_item.variant_id.toString());
|
||||
const plan = paymentPlans[planId];
|
||||
|
||||
const lemonSqueezyCustomerPortalUrl = await fetchUserCustomerPortalUrl({ lemonSqueezyId });
|
||||
|
||||
let numOfCreditsPurchased: number | undefined = undefined;
|
||||
let datePaid: Date | undefined = undefined;
|
||||
if (status === 'paid' && plan.effect.kind === 'credits') {
|
||||
numOfCreditsPurchased = plan.effect.amount;
|
||||
datePaid = new Date();
|
||||
}
|
||||
|
||||
await updateUserLemonSqueezyPaymentDetails(
|
||||
{ lemonSqueezyId, userId, lemonSqueezyCustomerPortalUrl, numOfCreditsPurchased, datePaid },
|
||||
prismaUserDelegate
|
||||
);
|
||||
|
||||
console.log(`Order ${order_number} created for user ${lemonSqueezyId}`);
|
||||
}
|
||||
|
||||
async function handleSubscriptionCreated(data: Subscription, userId: string, prismaUserDelegate: PrismaClient['user']) {
|
||||
const { customer_id, status, variant_id } = data.data.attributes;
|
||||
const lemonSqueezyId = customer_id.toString();
|
||||
|
||||
const planId = getPlanIdByVariantId(variant_id.toString());
|
||||
|
||||
if (status === 'active') {
|
||||
await updateUserLemonSqueezyPaymentDetails(
|
||||
{
|
||||
lemonSqueezyId,
|
||||
userId,
|
||||
subscriptionPlan: planId,
|
||||
subscriptionStatus: status,
|
||||
datePaid: new Date(),
|
||||
},
|
||||
prismaUserDelegate
|
||||
);
|
||||
} else {
|
||||
console.warn(`Unexpected status '${status}' for newly created subscription`);
|
||||
}
|
||||
|
||||
console.log(`Subscription created for user ${lemonSqueezyId}`);
|
||||
}
|
||||
|
||||
|
||||
// NOTE: LemonSqueezy's 'subscription_updated' event is sent as a catch-all and fires even after 'subscription_created' & 'order_created'.
|
||||
async function handleSubscriptionUpdated(data: Subscription, userId: string, prismaUserDelegate: PrismaClient['user']) {
|
||||
const { customer_id, status, variant_id } = data.data.attributes;
|
||||
const lemonSqueezyId = customer_id.toString();
|
||||
|
||||
const planId = getPlanIdByVariantId(variant_id.toString());
|
||||
|
||||
// We ignore other statuses like 'paused' and 'unpaid' for now, because we block user usage if their status is NOT active.
|
||||
// Note that a status changes to 'past_due' on a failed payment retry, then after 4 unsuccesful payment retries status
|
||||
// becomes 'unpaid' and finally 'expired' (i.e. 'deleted').
|
||||
// NOTE: ability to pause or trial a subscription is something that has to be additionally configured in the lemon squeezy dashboard.
|
||||
// If you do enable these features, make sure to handle these statuses here.
|
||||
if (status === 'past_due' || status === 'active') {
|
||||
await updateUserLemonSqueezyPaymentDetails(
|
||||
{
|
||||
lemonSqueezyId,
|
||||
userId,
|
||||
subscriptionPlan: planId,
|
||||
subscriptionStatus: status,
|
||||
...(status === 'active' && { datePaid: new Date() }),
|
||||
},
|
||||
prismaUserDelegate
|
||||
);
|
||||
console.log(`Subscription updated for user ${lemonSqueezyId}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubscriptionCancelled(data: Subscription, userId: string, prismaUserDelegate: PrismaClient['user']) {
|
||||
const { customer_id } = data.data.attributes;
|
||||
const lemonSqueezyId = customer_id.toString();
|
||||
|
||||
await updateUserLemonSqueezyPaymentDetails(
|
||||
{
|
||||
lemonSqueezyId,
|
||||
userId,
|
||||
subscriptionStatus: 'cancel_at_period_end', // cancel_at_period_end is the Stripe equivalent of LemonSqueezy's cancelled
|
||||
},
|
||||
prismaUserDelegate
|
||||
);
|
||||
|
||||
console.log(`Subscription cancelled for user ${lemonSqueezyId}`);
|
||||
}
|
||||
|
||||
async function handleSubscriptionExpired(data: Subscription, userId: string, prismaUserDelegate: PrismaClient['user']) {
|
||||
const { customer_id } = data.data.attributes;
|
||||
const lemonSqueezyId = customer_id.toString();
|
||||
|
||||
await updateUserLemonSqueezyPaymentDetails(
|
||||
{
|
||||
lemonSqueezyId,
|
||||
userId,
|
||||
subscriptionStatus: 'deleted', // deleted is the Stripe equivalent of LemonSqueezy's expired
|
||||
},
|
||||
prismaUserDelegate
|
||||
);
|
||||
|
||||
console.log(`Subscription expired for user ${lemonSqueezyId}`);
|
||||
}
|
||||
|
||||
async function fetchUserCustomerPortalUrl({ lemonSqueezyId }: { lemonSqueezyId: string }): Promise<string> {
|
||||
const { data: lemonSqueezyCustomer, error } = await getCustomer(lemonSqueezyId);
|
||||
if (error) {
|
||||
throw new Error(`Error fetching customer portal URL for user lemonsqueezy id ${lemonSqueezyId}: ${error}`);
|
||||
}
|
||||
const customerPortalUrl = lemonSqueezyCustomer.data.attributes.urls.customer_portal;
|
||||
if (!customerPortalUrl) {
|
||||
throw new Error(`No customer portal URL found for user lemonsqueezy id ${lemonSqueezyId}`);
|
||||
}
|
||||
return customerPortalUrl;
|
||||
}
|
||||
|
||||
function getPlanIdByVariantId(variantId: string): PaymentPlanId {
|
||||
const planId = Object.values(PaymentPlanId).find(
|
||||
(planId) => paymentPlans[planId].getPaymentProcessorPlanId() === variantId
|
||||
);
|
||||
if (!planId) {
|
||||
throw new Error(`No plan with LemonSqueezy variant id ${variantId}`);
|
||||
}
|
||||
return planId;
|
||||
}
|
||||
@ -1,20 +1,22 @@
|
||||
import { type GenerateStripeCheckoutSession } from 'wasp/server/operations';
|
||||
import type { GenerateCheckoutSession, GetCustomerPortalUrl } from 'wasp/server/operations';
|
||||
import type { FetchCustomerPortalUrlArgs } from './paymentProcessor';
|
||||
import { PaymentPlanId, paymentPlans } from '../payment/plans';
|
||||
import { paymentProcessor } from './paymentProcessor';
|
||||
import { HttpError } from 'wasp/server';
|
||||
import { PaymentPlanId, paymentPlans, type PaymentPlanEffect } from '../payment/plans';
|
||||
import { fetchStripeCustomer, createStripeCheckoutSession, type StripeMode } from './stripe/checkoutUtils';
|
||||
|
||||
export type StripeCheckoutSession = {
|
||||
export type CheckoutSession = {
|
||||
sessionUrl: string | null;
|
||||
sessionId: string;
|
||||
};
|
||||
|
||||
export const generateStripeCheckoutSession: GenerateStripeCheckoutSession<
|
||||
PaymentPlanId,
|
||||
StripeCheckoutSession
|
||||
> = async (paymentPlanId, context) => {
|
||||
export const generateCheckoutSession: GenerateCheckoutSession<PaymentPlanId, CheckoutSession> = async (
|
||||
paymentPlanId,
|
||||
context
|
||||
) => {
|
||||
if (!context.user) {
|
||||
throw new HttpError(401);
|
||||
}
|
||||
const userId = context.user.id;
|
||||
const userEmail = context.user.email;
|
||||
if (!userEmail) {
|
||||
throw new HttpError(
|
||||
@ -24,21 +26,11 @@ export const generateStripeCheckoutSession: GenerateStripeCheckoutSession<
|
||||
}
|
||||
|
||||
const paymentPlan = paymentPlans[paymentPlanId];
|
||||
const customer = await fetchStripeCustomer(userEmail);
|
||||
const session = await createStripeCheckoutSession({
|
||||
priceId: paymentPlan.getStripePriceId(),
|
||||
customerId: customer.id,
|
||||
mode: paymentPlanEffectToStripeMode(paymentPlan.effect),
|
||||
});
|
||||
|
||||
await context.entities.User.update({
|
||||
where: {
|
||||
id: context.user.id,
|
||||
},
|
||||
data: {
|
||||
checkoutSessionId: session.id,
|
||||
stripeId: customer.id,
|
||||
},
|
||||
const { session } = await paymentProcessor.createCheckoutSession({
|
||||
userId,
|
||||
userEmail,
|
||||
paymentPlan,
|
||||
prismaUserDelegate: context.entities.User
|
||||
});
|
||||
|
||||
return {
|
||||
@ -47,10 +39,12 @@ export const generateStripeCheckoutSession: GenerateStripeCheckoutSession<
|
||||
};
|
||||
};
|
||||
|
||||
function paymentPlanEffectToStripeMode(planEffect: PaymentPlanEffect): StripeMode {
|
||||
const effectToMode: Record<PaymentPlanEffect['kind'], StripeMode> = {
|
||||
subscription: 'subscription',
|
||||
credits: 'payment',
|
||||
};
|
||||
return effectToMode[planEffect.kind];
|
||||
}
|
||||
export const getCustomerPortalUrl: GetCustomerPortalUrl<void, string | undefined> = async (_args, context) => {
|
||||
if (!context.user) {
|
||||
throw new HttpError(401);
|
||||
}
|
||||
return paymentProcessor.fetchCustomerPortalUrl({
|
||||
userId: context.user.id,
|
||||
prismaUserDelegate: context.entities.User,
|
||||
});
|
||||
};
|
||||
|
||||
32
template/app/src/payment/paymentProcessor.ts
Normal file
32
template/app/src/payment/paymentProcessor.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import type { PaymentPlan } from './plans';
|
||||
import type { PaymentsWebhook } from 'wasp/server/api';
|
||||
import type { MiddlewareConfigFn } from 'wasp/server';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { stripePaymentProcessor } from './stripe/paymentProcessor';
|
||||
import { lemonSqueezyPaymentProcessor } from './lemonSqueezy/paymentProcessor';
|
||||
|
||||
export interface CreateCheckoutSessionArgs {
|
||||
userId: string;
|
||||
userEmail: string;
|
||||
paymentPlan: PaymentPlan;
|
||||
prismaUserDelegate: PrismaClient['user'];
|
||||
}
|
||||
export interface FetchCustomerPortalUrlArgs {
|
||||
userId: string;
|
||||
prismaUserDelegate: PrismaClient['user'];
|
||||
};
|
||||
|
||||
export interface PaymentProcessor {
|
||||
id: 'stripe' | 'lemonsqueezy';
|
||||
createCheckoutSession: (args: CreateCheckoutSessionArgs) => Promise<{ session: { id: string; url: string }; }>;
|
||||
fetchCustomerPortalUrl: (args: FetchCustomerPortalUrlArgs) => Promise<string | undefined>;
|
||||
webhook: PaymentsWebhook;
|
||||
webhookMiddlewareConfigFn: MiddlewareConfigFn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Choose which payment processor you'd like to use, then delete the
|
||||
* other payment processor code that you're not using from `/src/payment`
|
||||
*/
|
||||
// export const paymentProcessor: PaymentProcessor = lemonSqueezyPaymentProcessor;
|
||||
export const paymentProcessor: PaymentProcessor = stripePaymentProcessor;
|
||||
@ -9,7 +9,9 @@ export enum PaymentPlanId {
|
||||
}
|
||||
|
||||
export interface PaymentPlan {
|
||||
getStripePriceId: () => string;
|
||||
// Returns the id under which this payment plan is identified on your payment processor.
|
||||
// E.g. this might be price id on Stripe, or variant id on LemonSqueezy.
|
||||
getPaymentProcessorPlanId: () => string;
|
||||
effect: PaymentPlanEffect;
|
||||
}
|
||||
|
||||
@ -17,15 +19,15 @@ export type PaymentPlanEffect = { kind: 'subscription' } | { kind: 'credits'; am
|
||||
|
||||
export const paymentPlans: Record<PaymentPlanId, PaymentPlan> = {
|
||||
[PaymentPlanId.Hobby]: {
|
||||
getStripePriceId: () => requireNodeEnvVar('STRIPE_HOBBY_SUBSCRIPTION_PRICE_ID'),
|
||||
getPaymentProcessorPlanId: () => requireNodeEnvVar('PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID'),
|
||||
effect: { kind: 'subscription' },
|
||||
},
|
||||
[PaymentPlanId.Pro]: {
|
||||
getStripePriceId: () => requireNodeEnvVar('STRIPE_PRO_SUBSCRIPTION_PRICE_ID'),
|
||||
getPaymentProcessorPlanId: () => requireNodeEnvVar('PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID'),
|
||||
effect: { kind: 'subscription' },
|
||||
},
|
||||
[PaymentPlanId.Credits10]: {
|
||||
getStripePriceId: () => requireNodeEnvVar('STRIPE_CREDITS_PRICE_ID'),
|
||||
getPaymentProcessorPlanId: () => requireNodeEnvVar('PAYMENTS_CREDITS_10_PLAN_ID'),
|
||||
effect: { kind: 'credits', amount: 10 },
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import type { StripeMode } from './paymentProcessor';
|
||||
import Stripe from 'stripe';
|
||||
import { stripe } from './stripeClient';
|
||||
|
||||
@ -26,17 +27,7 @@ export async function fetchStripeCustomer(customerEmail: string) {
|
||||
}
|
||||
}
|
||||
|
||||
export type StripeMode = 'subscription' | 'payment';
|
||||
|
||||
export async function createStripeCheckoutSession({
|
||||
priceId,
|
||||
customerId,
|
||||
mode,
|
||||
}: {
|
||||
priceId: string;
|
||||
customerId: string;
|
||||
mode: StripeMode;
|
||||
}) {
|
||||
export async function createStripeCheckoutSession({ userId, priceId, customerId, mode }: { userId: string, priceId: string; customerId: string; mode: StripeMode }) {
|
||||
try {
|
||||
return await stripe.checkout.sessions.create({
|
||||
line_items: [
|
||||
|
||||
@ -2,23 +2,22 @@ import type { SubscriptionStatus } from '../plans';
|
||||
import { PaymentPlanId } from '../plans';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
|
||||
type UserStripePaymentDetails = {
|
||||
userStripeId: string;
|
||||
subscriptionPlan?: PaymentPlanId;
|
||||
subscriptionStatus?: SubscriptionStatus;
|
||||
numOfCreditsPurchased?: number;
|
||||
datePaid?: Date;
|
||||
};
|
||||
|
||||
export const updateUserStripePaymentDetails = (
|
||||
{ userStripeId, subscriptionPlan, subscriptionStatus, datePaid, numOfCreditsPurchased }: UserStripePaymentDetails,
|
||||
{ userStripeId, subscriptionPlan, subscriptionStatus, datePaid, numOfCreditsPurchased }: {
|
||||
userStripeId: string;
|
||||
subscriptionPlan?: PaymentPlanId;
|
||||
subscriptionStatus?: SubscriptionStatus;
|
||||
numOfCreditsPurchased?: number;
|
||||
datePaid?: Date;
|
||||
},
|
||||
userDelegate: PrismaClient['user']
|
||||
) => {
|
||||
return userDelegate.update({
|
||||
where: {
|
||||
stripeId: userStripeId,
|
||||
paymentProcessorUserId: userStripeId
|
||||
},
|
||||
data: {
|
||||
paymentProcessorUserId: userStripeId,
|
||||
subscriptionPlan,
|
||||
subscriptionStatus,
|
||||
datePaid,
|
||||
|
||||
46
template/app/src/payment/stripe/paymentProcessor.ts
Normal file
46
template/app/src/payment/stripe/paymentProcessor.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import type { PaymentPlanEffect } from '../plans';
|
||||
import type { CreateCheckoutSessionArgs, FetchCustomerPortalUrlArgs, PaymentProcessor } from '../paymentProcessor'
|
||||
import { fetchStripeCustomer, createStripeCheckoutSession } from './checkoutUtils';
|
||||
import { requireNodeEnvVar } from '../../server/utils';
|
||||
import { stripeWebhook, stripeMiddlewareConfigFn } from './webhook';
|
||||
|
||||
export type StripeMode = 'subscription' | 'payment';
|
||||
|
||||
export const stripePaymentProcessor: PaymentProcessor = {
|
||||
id: 'stripe',
|
||||
createCheckoutSession: async ({ userId, userEmail, paymentPlan, prismaUserDelegate }: CreateCheckoutSessionArgs) => {
|
||||
const customer = await fetchStripeCustomer(userEmail);
|
||||
const stripeSession = await createStripeCheckoutSession({
|
||||
userId,
|
||||
priceId: paymentPlan.getPaymentProcessorPlanId(),
|
||||
customerId: customer.id,
|
||||
mode: paymentPlanEffectToStripeMode(paymentPlan.effect),
|
||||
});
|
||||
await prismaUserDelegate.update({
|
||||
where: {
|
||||
id: userId
|
||||
},
|
||||
data: {
|
||||
paymentProcessorUserId: customer.id
|
||||
}
|
||||
})
|
||||
if (!stripeSession.url) throw new Error('Error creating Stripe Checkout Session');
|
||||
const session = {
|
||||
url: stripeSession.url,
|
||||
id: stripeSession.id,
|
||||
};
|
||||
return { session };
|
||||
},
|
||||
fetchCustomerPortalUrl: async (_args: FetchCustomerPortalUrlArgs) =>
|
||||
requireNodeEnvVar('STRIPE_CUSTOMER_PORTAL_URL'),
|
||||
webhook: stripeWebhook,
|
||||
webhookMiddlewareConfigFn: stripeMiddlewareConfigFn,
|
||||
};
|
||||
|
||||
function paymentPlanEffectToStripeMode(planEffect: PaymentPlanEffect): StripeMode {
|
||||
const effectToMode: Record<PaymentPlanEffect['kind'], StripeMode> = {
|
||||
subscription: 'subscription',
|
||||
credits: 'payment',
|
||||
};
|
||||
return effectToMode[planEffect.kind];
|
||||
}
|
||||
@ -1,11 +1,12 @@
|
||||
import Stripe from 'stripe';
|
||||
import { requireNodeEnvVar } from '../../server/utils';
|
||||
|
||||
export const stripe = new Stripe(process.env.STRIPE_KEY!, {
|
||||
export const stripe = new Stripe(requireNodeEnvVar('STRIPE_API_KEY'), {
|
||||
// NOTE:
|
||||
// API version below should ideally match the API version in your Stripe dashboard.
|
||||
// If that is not the case, you will most likely want to (up/down)grade the `stripe`
|
||||
// API version below should ideally match the API version in your Stripe dashboard.
|
||||
// If that is not the case, you will most likely want to (up/down)grade the `stripe`
|
||||
// npm package to the API version that matches your Stripe dashboard's one.
|
||||
// For more details and alternative setups check
|
||||
// For more details and alternative setups check
|
||||
// https://docs.stripe.com/api/versioning .
|
||||
apiVersion: '2022-11-15',
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { type MiddlewareConfigFn, HttpError } from 'wasp/server';
|
||||
import { type StripeWebhook } from 'wasp/server/api';
|
||||
import { type PaymentsWebhook } from 'wasp/server/api';
|
||||
import { type PrismaClient } from '@prisma/client';
|
||||
import express from 'express';
|
||||
import { Stripe } from 'stripe';
|
||||
@ -11,7 +11,7 @@ import { assertUnreachable } from '../../shared/utils';
|
||||
import { requireNodeEnvVar } from '../../server/utils';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const stripeWebhook: StripeWebhook = async (request, response, context) => {
|
||||
export const stripeWebhook: PaymentsWebhook = async (request, response, context) => {
|
||||
const secret = requireNodeEnvVar('STRIPE_WEBHOOK_SECRET');
|
||||
const sig = request.headers['stripe-signature'];
|
||||
if (!sig) {
|
||||
@ -51,8 +51,9 @@ export const stripeWebhook: StripeWebhook = async (request, response, context) =
|
||||
response.json({ received: true }); // Stripe expects a 200 response to acknowledge receipt of the webhook
|
||||
};
|
||||
|
||||
// This allows us to override Wasp's defaults and parse the raw body of the request from Stripe to verify the signature
|
||||
export const stripeMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
|
||||
export const stripeMiddlewareConfigFn: MiddlewareConfigFn = (middlewareConfig) => {
|
||||
// We need to delete the default 'express.json' middleware and replace it with 'express.raw' middleware
|
||||
// because webhook data in the body of the request as raw JSON, not as JSON in the body of the request.
|
||||
middlewareConfig.delete('express.json');
|
||||
middlewareConfig.set('express.raw', express.raw({ type: 'application/json' }));
|
||||
return middlewareConfig;
|
||||
@ -83,10 +84,10 @@ export async function handleCheckoutSessionCompleted(
|
||||
if (result.data.data.length > 1) {
|
||||
throw new HttpError(400, 'More than one line item in session');
|
||||
}
|
||||
const lineItemPriceId = result.data.data[0].price.id;
|
||||
const lineItemPriceId = result.data.data[0].price.id;
|
||||
|
||||
const planId = Object.values(PaymentPlanId).find(
|
||||
(planId) => paymentPlans[planId].getStripePriceId() === lineItemPriceId
|
||||
(planId) => paymentPlans[planId].getPaymentProcessorPlanId() === lineItemPriceId
|
||||
);
|
||||
if (!planId) {
|
||||
throw new Error(`No plan with stripe price id ${lineItemPriceId}`);
|
||||
|
||||
4
template/app/src/payment/webhook.ts
Normal file
4
template/app/src/payment/webhook.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { paymentProcessor } from './paymentProcessor';
|
||||
|
||||
export const paymentsWebhook = paymentProcessor.webhook;
|
||||
export const paymentsMiddlewareConfigFn = paymentProcessor.webhookMiddlewareConfigFn;
|
||||
@ -38,7 +38,8 @@ function generateMockUserData(): MockUserData {
|
||||
sendNewsletter: false,
|
||||
credits,
|
||||
subscriptionStatus,
|
||||
stripeId: hasUserPaidOnStripe ? `cus_test_${faker.string.uuid()}` : null,
|
||||
lemonSqueezyCustomerPortalUrl: null,
|
||||
paymentProcessorUserId: hasUserPaidOnStripe ? `cus_test_${faker.string.uuid()}` : null,
|
||||
datePaid: hasUserPaidOnStripe ? faker.date.between({ from: createdAt, to: lastActiveTimestamp }) : null,
|
||||
checkoutSessionId: hasUserPaidOnStripe ? `cs_test_${faker.string.uuid()}` : null,
|
||||
subscriptionPlan: subscriptionStatus ? faker.helpers.arrayElement(getSubscriptionPaymentPlanIds()) : null,
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import type { User } from 'wasp/entities';
|
||||
import {
|
||||
type SubscriptionStatus,
|
||||
prettyPaymentPlanName,
|
||||
parsePaymentPlanId
|
||||
} from '../payment/plans';
|
||||
import { type SubscriptionStatus, prettyPaymentPlanName, parsePaymentPlanId } from '../payment/plans';
|
||||
import { getCustomerPortalUrl, useQuery } from 'wasp/client/operations';
|
||||
import { Link } from 'wasp/client/router';
|
||||
import { logout } from 'wasp/client/auth';
|
||||
import { z } from 'zod';
|
||||
@ -31,18 +28,17 @@ export default function AccountPage({ user }: { user: User }) {
|
||||
)}
|
||||
<div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
|
||||
<dt className='text-sm font-medium text-gray-500 dark:text-white'>Your Plan</dt>
|
||||
<UserCurrentPaymentPlan
|
||||
subscriptionStatus={ user.subscriptionStatus as SubscriptionStatus}
|
||||
subscriptionPlan={ user.subscriptionPlan }
|
||||
datePaid={ user.datePaid }
|
||||
credits={ user.credits }
|
||||
/>
|
||||
<UserCurrentPaymentPlan
|
||||
subscriptionStatus={user.subscriptionStatus as SubscriptionStatus}
|
||||
subscriptionPlan={user.subscriptionPlan}
|
||||
datePaid={user.datePaid}
|
||||
credits={user.credits}
|
||||
lemonSqueezyCustomerPortalUrl={user.lemonSqueezyCustomerPortalUrl}
|
||||
/>
|
||||
</div>
|
||||
<div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
|
||||
<dt className='text-sm font-medium text-gray-500 dark:text-white'>About</dt>
|
||||
<dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-2 sm:mt-0'>
|
||||
I'm a cool customer.
|
||||
</dd>
|
||||
<dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-2 sm:mt-0'>I'm a cool customer.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
@ -60,19 +56,18 @@ export default function AccountPage({ user }: { user: User }) {
|
||||
}
|
||||
|
||||
type UserCurrentPaymentPlanProps = {
|
||||
subscriptionPlan: string | null
|
||||
subscriptionStatus: SubscriptionStatus | null
|
||||
datePaid: Date | null
|
||||
credits: number
|
||||
}
|
||||
subscriptionPlan: string | null;
|
||||
subscriptionStatus: SubscriptionStatus | null;
|
||||
datePaid: Date | null;
|
||||
credits: number;
|
||||
lemonSqueezyCustomerPortalUrl: string | null;
|
||||
};
|
||||
|
||||
function UserCurrentPaymentPlan({ subscriptionPlan, subscriptionStatus, datePaid, credits }: UserCurrentPaymentPlanProps) {
|
||||
function UserCurrentPaymentPlan({ subscriptionPlan, subscriptionStatus, datePaid, credits, lemonSqueezyCustomerPortalUrl }: UserCurrentPaymentPlanProps) {
|
||||
if (subscriptionStatus && subscriptionPlan && datePaid) {
|
||||
return (
|
||||
<>
|
||||
<dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-1 sm:mt-0'>
|
||||
{getUserSubscriptionStatusDescription({ subscriptionPlan, subscriptionStatus, datePaid })}
|
||||
</dd>
|
||||
<dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-1 sm:mt-0'>{getUserSubscriptionStatusDescription({ subscriptionPlan, subscriptionStatus, datePaid })}</dd>
|
||||
{subscriptionStatus !== 'deleted' ? <CustomerPortalButton /> : <BuyMoreButton />}
|
||||
</>
|
||||
);
|
||||
@ -80,23 +75,13 @@ function UserCurrentPaymentPlan({ subscriptionPlan, subscriptionStatus, datePaid
|
||||
|
||||
return (
|
||||
<>
|
||||
<dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-1 sm:mt-0'>
|
||||
Credits remaining: {credits}
|
||||
</dd>
|
||||
<dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-1 sm:mt-0'>Credits remaining: {credits}</dd>
|
||||
<BuyMoreButton />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function getUserSubscriptionStatusDescription({
|
||||
subscriptionPlan,
|
||||
subscriptionStatus,
|
||||
datePaid,
|
||||
}: {
|
||||
subscriptionPlan: string
|
||||
subscriptionStatus: SubscriptionStatus
|
||||
datePaid: Date;
|
||||
}) {
|
||||
function getUserSubscriptionStatusDescription({ subscriptionPlan, subscriptionStatus, datePaid }: { subscriptionPlan: string; subscriptionStatus: SubscriptionStatus; datePaid: Date }) {
|
||||
const planName = prettyPaymentPlanName(parsePaymentPlanId(subscriptionPlan));
|
||||
const endOfBillingPeriod = prettyPrintEndOfBillingPeriod(datePaid);
|
||||
return prettyPrintStatus(planName, subscriptionStatus, endOfBillingPeriod);
|
||||
@ -133,22 +118,21 @@ function BuyMoreButton() {
|
||||
}
|
||||
|
||||
function CustomerPortalButton() {
|
||||
const { data: customerPortalUrl, isLoading: isCustomerPortalUrlLoading, error: customerPortalUrlError } = useQuery(getCustomerPortalUrl);
|
||||
|
||||
const handleClick = () => {
|
||||
try {
|
||||
const schema = z.string().url();
|
||||
const customerPortalUrl = schema.parse(import.meta.env.REACT_APP_STRIPE_CUSTOMER_PORTAL);
|
||||
if (customerPortalUrlError) {
|
||||
console.error('Error fetching customer portal url');
|
||||
}
|
||||
|
||||
if (customerPortalUrl) {
|
||||
window.open(customerPortalUrl, '_blank');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='ml-4 flex-shrink-0 sm:col-span-1 sm:mt-0'>
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className='font-medium text-sm text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300'
|
||||
>
|
||||
<button onClick={handleClick} disabled={isCustomerPortalUrlLoading} className='font-medium text-sm text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300'>
|
||||
Manage Subscription
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -50,10 +50,7 @@ type GetPaginatedUsersInput = {
|
||||
subscriptionStatus?: SubscriptionStatus[];
|
||||
};
|
||||
type GetPaginatedUsersOutput = {
|
||||
users: Pick<
|
||||
User,
|
||||
'id' | 'email' | 'username' | 'lastActiveTimestamp' | 'subscriptionStatus' | 'stripeId'
|
||||
>[];
|
||||
users: Pick<User, 'id' | 'email' | 'username' | 'lastActiveTimestamp' | 'subscriptionStatus' | 'paymentProcessorUserId'>[];
|
||||
totalPages: number;
|
||||
};
|
||||
|
||||
@ -104,7 +101,7 @@ export const getPaginatedUsers: GetPaginatedUsers<GetPaginatedUsersInput, GetPag
|
||||
isAdmin: true,
|
||||
lastActiveTimestamp: true,
|
||||
subscriptionStatus: true,
|
||||
stripeId: true,
|
||||
paymentProcessorUserId: true,
|
||||
},
|
||||
orderBy: {
|
||||
id: 'desc',
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
"e2e:playwright": "DEBUG=pw:webserver npx playwright test",
|
||||
"_comment-on-local:e2e:cleanup-stripe": "NOTE: because we are running the stripe webhook listener in the background, we want to make sure we kill the previous processes before starting a new one.",
|
||||
"local:e2e:cleanup-stripe": "PID=$(ps -ef | grep 'stripe listen' | grep -v grep | awk '{print $2}') || true && kill -9 $PID || true",
|
||||
"local:e2e:start-stripe": "stripe listen --forward-to localhost:3001/stripe-webhook &",
|
||||
"local:e2e:start-stripe": "stripe listen --forward-to localhost:3001/payments-webhook &",
|
||||
"local:e2e:playwright:ui": "npx playwright test --ui",
|
||||
"local:e2e:start": "npm run local:e2e:cleanup-stripe && npm run local:e2e:start-stripe && npm run local:e2e:playwright:ui && npm run local:e2e:cleanup-stripe"
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user