jbranchaud/sks 88 set up payment options for total typescript

apps/total-typescript/process.d.ts

@@ -13,6 +13,7 @@ declare namespace NodeJS {
     NEXT_PUBLIC_CONVERTKIT_SIGNUP_FORM: string
     NEXT_PUBLIC_CONVERTKIT_TOKEN: string
     NEXT_PUBLIC_CONVERTKIT_SUBSCRIBER_KEY: string
+    STRIPE_SECRET_TOKEN: string
     CONVERTKIT_BASE_URL: string
     NEXT_PUBLIC_GOOGLE_ANALYTICS: string
     EMAIL_SERVER_PORT: number

apps/total-typescript/src/pages/api/skill/[...skillRecordings].ts

@@ -6,6 +6,17 @@ import {nextAuthOptions} from '../auth/[...nextauth]'
 import {NextApiRequest} from 'next'
 import {getToken} from 'next-auth/jwt'
 import {UserSchema, getCurrentAbility} from '@skillrecordings/skill-lesson'
+import {
+  defaultPaymentOptions,
+  StripeProvider,
+} from '@skillrecordings/commerce-server'
+
+export const paymentOptions = defaultPaymentOptions({
+  stripeProvider: StripeProvider({
+    stripeSecretKey: process.env.STRIPE_SECRET_TOKEN,
+    apiVersion: '2020-08-27',
+  }),
+})
 
 export const skillOptions: SkillRecordingsOptions = {
   site: {
@@ -28,6 +39,7 @@ export const skillOptions: SkillRecordingsOptions = {
     return getCurrentAbility({user: UserSchema.parse(token)})
   },
   nextAuthOptions,
+  paymentOptions,
 }
 
 export default SkillRecordings(skillOptions)

apps/total-typescript/src/pages/invoices/[merchantChargeId].tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import {DownloadIcon} from '@heroicons/react/outline'
 import {useLocalStorage} from 'react-use'
-import {Stripe} from 'stripe'
 import fromUnixTime from 'date-fns/fromUnixTime'
 import Layout from '@/components/app/layout'
 import format from 'date-fns/format'
@@ -63,7 +62,10 @@ const Invoice: React.FC<
 
   const {charge, product, bulkCoupon, quantity} = chargeDetails.result
 
-  const customer = charge.customer as Stripe.Customer
+  const customer = z
+    .object({name: z.string().nullish(), email: z.string().nullish()})
+    .parse(charge.customer)
+
   const formatUsd = (amount: number) => {
     return Intl.NumberFormat('en-US', {
       style: 'currency',
@@ -88,7 +90,7 @@ const Invoice: React.FC<
       className="print:bg-white print:text-black"
     >
       <main className="mx-auto max-w-screen-md">
-        <div className="flex flex-col items-center justify-between px-5 pb-8 pt-20 text-center print:hidden sm:pt-28 md:text-left">
+        <div className="flex flex-col items-center justify-between px-5 pb-8 pt-20 text-center sm:pt-28 md:text-left print:hidden">
           <h1 className="pb-5 font-text text-2xl font-bold leading-tight sm:text-3xl">
             Your Invoice for {process.env.NEXT_PUBLIC_SITE_TITLE}
           </h1>

apps/total-typescript/src/pages/thanks/purchase.tsx

@@ -5,7 +5,6 @@ import {
   convertToSerializeForNextResponse,
   determinePurchaseType,
   PurchaseType,
-  stripeData,
 } from '@skillrecordings/commerce-server'
 import {
   EXISTING_BULK_COUPON,
@@ -24,32 +23,34 @@ import {getProduct} from '@skillrecordings/skill-lesson/path-to-purchase/product
 import {trpc} from '@/trpc/trpc.client'
 import {isEmpty} from 'lodash'
 import {Transfer} from '@/purchase-transfer/purchase-transfer'
+import {paymentOptions} from '../api/skill/[...skillRecordings]'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const {query} = context
 
-  const {session_id} = query
+  const session_id =
+    query.session_id instanceof Array ? query.session_id[0] : query.session_id
 
-  if (!session_id) {
+  const paymentProvider = paymentOptions.providers.stripe
+
+  if (!session_id || !paymentProvider) {
     return {
       notFound: true,
     }
   }
 
-  const purchaseInfo = await stripeData({
-    checkoutSessionId: session_id as string,
-  })
+  const purchaseInfo = await paymentProvider.getPurchaseInfo(session_id)
 
   const {
     email,
-    stripeChargeId,
+    chargeIdentifier,
     quantity: seatsPurchased,
-    stripeProduct,
+    product: merchantProduct,
   } = purchaseInfo
 
-  const stripeProductName = stripeProduct.name
+  const stripeProductName = merchantProduct.name
 
-  const purchase = await getSdk().getPurchaseForStripeCharge(stripeChargeId)
+  const purchase = await getSdk().getPurchaseForStripeCharge(chargeIdentifier)
 
   if (!purchase || !email) {
     return {

apps/total-typescript/src/pages/welcome/index.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react'
-import {
-  convertToSerializeForNextResponse,
-  stripeData,
-} from '@skillrecordings/commerce-server'
+import {convertToSerializeForNextResponse} from '@skillrecordings/commerce-server'
 import Balancer from 'react-wrap-balancer'
 import {getProviders, signIn, useSession} from 'next-auth/react'
 import {GetServerSideProps} from 'next'
@@ -20,24 +17,28 @@ import {trpc} from '../../trpc/trpc.client'
 import {Transfer} from '@/purchase-transfer/purchase-transfer'
 import {getProduct} from '@skillrecordings/skill-lesson/path-to-purchase/products.server'
 import {Icon} from '@skillrecordings/skill-lesson/icons'
-import {Twitter} from '@skillrecordings/react'
+import {paymentOptions} from '../api/skill/[...skillRecordings]'
 
 export const getServerSideProps: GetServerSideProps = async ({req, query}) => {
-  const {purchaseId: purchaseQueryParam, session_id, upgrade} = query
+  const {purchaseId: purchaseQueryParam, upgrade} = query
   const token = await getToken({req})
   const providers = await getProviders()
   const {getPurchaseDetails} = getSdk()
 
   let purchaseId = purchaseQueryParam
 
-  if (session_id) {
-    const {stripeChargeId} = await stripeData({
-      checkoutSessionId: session_id as string,
-    })
+  const session_id =
+    query.session_id instanceof Array ? query.session_id[0] : query.session_id
+
+  const paymentProvider = paymentOptions.providers.stripe
+
+  if (session_id && paymentProvider) {
+    const {chargeIdentifier} = await paymentProvider.getPurchaseInfo(session_id)
+
     const purchase = await prisma.purchase.findFirst({
       where: {
         merchantCharge: {
-          identifier: stripeChargeId,
+          identifier: chargeIdentifier,
         },
       },
     })