feat(plugin-stripe): update plugin stripe for v3 (#6019)

packages/plugin-stripe/package.json

@@ -24,8 +24,8 @@
   "exports": {
     ".": {
       "import": "./src/index.ts",
-      "require": "./src/index.ts",
+      "types": "./src/index.ts",
-      "types": "./src/index.ts"
+      "default": "./src/index.ts"
     }
   },
   "main": "./src/index.ts",
@@ -36,12 +36,14 @@
     "types.d.ts"
   ],
   "scripts": {
-    "build": "echo \"Build temporarily disabled.\" && exit 0",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
     "clean": "rimraf {dist,*.tsbuildinfo}",
-    "prepublishOnly": "pnpm clean && pnpm turbo run build && pnpm test",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
-    "test": "echo 'No tests available.'"
+    "lint": "eslint src",
+    "lint:fix": "eslint --fix --ext .ts,.tsx src",
+    "prepublishOnly": "pnpm clean && pnpm turbo build"
   },
   "dependencies": {
     "@payloadcms/ui": "workspace:*",
@@ -51,17 +53,19 @@
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
+    "@payloadcms/next": "workspace:*",
+    "@payloadcms/translations": "workspace:*",
+    "@payloadcms/ui": "workspace:*",
     "@types/express": "^4.17.9",
     "@types/lodash.get": "^4.4.7",
     "@types/react": "18.2.74",
     "@types/uuid": "^9.0.0",
-    "payload": "workspace:*",
+    "payload": "workspace:*"
-    "prettier": "^2.7.1",
-    "webpack": "^5.78.0"
   },
   "peerDependencies": {
-    "payload": "workspace:*",
+    "@payloadcms/translations": "workspace:*",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@payloadcms/ui": "workspace:*",
+    "payload": "workspace:*"
   },
   "publishConfig": {
     "exports": {
@@ -72,6 +76,7 @@
       }
     },
     "main": "./dist/index.js",
+    "registry": "https://registry.npmjs.org/",
     "types": "./dist/index.d.ts"
   },
   "homepage:": "https://payloadcms.com"

packages/plugin-stripe/src/admin.ts

@@ -1,10 +1,10 @@
 import type { Config } from 'payload/config'
 
-import type { SanitizedStripeConfig, StripeConfig } from './types'
+import type { SanitizedStripeConfig, StripeConfig } from './types.js'
 
-import { getFields } from './fields/getFields'
+import { getFields } from './fields/getFields.js'
 
-const stripePlugin =
+export const stripePlugin =
   (incomingStripeConfig: StripeConfig) =>
   (config: Config): Config => {
     const { collections } = config
@@ -42,5 +42,3 @@ const stripePlugin =
       }),
     }
   }
-
-export default stripePlugin

packages/plugin-stripe/src/fields/getFields.ts

@@ -1,8 +1,8 @@
 import type { CollectionConfig, Field } from 'payload/types'
 
-import type { SanitizedStripeConfig } from '../types'
+import type { SanitizedStripeConfig } from '../types.js'
 
-import { LinkToDoc } from '../ui/LinkToDoc'
+import { LinkToDoc } from '../ui/LinkToDoc.js'
 
 interface Args {
   collection: CollectionConfig
@@ -39,13 +39,12 @@ export const getFields = ({ collection, stripeConfig, syncConfig }: Args): Field
     type: 'ui',
     admin: {
       components: {
-        Field: (args) =>
+        Field: LinkToDoc,
-          LinkToDoc({
+      },
-            ...args,
+      custom: {
         isTestKey: stripeConfig.isTestKey,
         nameOfIDField: 'stripeID',
         stripeResourceType: syncConfig.stripeResourceType,
-          }),
       },
       position: 'sidebar',
     },

packages/plugin-stripe/src/hooks/createNewInStripe.ts

@@ -3,11 +3,12 @@ import type { CollectionBeforeValidateHook, CollectionConfig } from 'payload/typ
 import { APIError } from 'payload/errors'
 import Stripe from 'stripe'
 
-import type { StripeConfig } from '../types'
+import type { StripeConfig } from '../types.js'
 
-import { deepen } from '../utilities/deepen'
+import { deepen } from '../utilities/deepen.js'
 
 const stripeSecretKey = process.env.STRIPE_SECRET_KEY
+// api version can only be the latest, stripe recommends ts ignoring it
 const stripe = new Stripe(stripeSecretKey || '', { apiVersion: '2022-08-01' })
 
 type HookArgsWithCustomCollection = Omit<
@@ -52,12 +53,15 @@ export const createNewInStripe: CollectionBeforeValidateHookWithArgs = async (ar
 
       if (syncConfig) {
         // combine all fields of this object and match their respective values within the document
-        let syncedFields = syncConfig.fields.reduce((acc, field) => {
+        let syncedFields = syncConfig.fields.reduce(
+          (acc, field) => {
             const { fieldPath, stripeProperty } = field
 
             acc[stripeProperty] = dataRef[fieldPath]
             return acc
-        }, {} as Record<string, any>)
+          },
+          {} as Record<string, any>,
+        )
 
         syncedFields = deepen(syncedFields)
 
@@ -72,6 +76,7 @@ export const createNewInStripe: CollectionBeforeValidateHookWithArgs = async (ar
             try {
               // NOTE: Typed as "any" because the "create" method is not standard across all Stripe resources
               const stripeResource = await stripe?.[syncConfig.stripeResourceType]?.create(
+                // @ts-expect-error
                 syncedFields,
               )
 
@@ -105,6 +110,7 @@ export const createNewInStripe: CollectionBeforeValidateHookWithArgs = async (ar
 
             // NOTE: Typed as "any" because the "create" method is not standard across all Stripe resources
             const stripeResource = await stripe?.[syncConfig.stripeResourceType]?.create(
+              // @ts-expect-error
               syncedFields,
             )
 

packages/plugin-stripe/src/hooks/deleteFromStripe.ts

@@ -3,9 +3,10 @@ import type { CollectionAfterDeleteHook, CollectionConfig } from 'payload/types'
 import { APIError } from 'payload/errors'
 import Stripe from 'stripe'
 
-import type { StripeConfig } from '../types'
+import type { StripeConfig } from '../types.js'
 
 const stripeSecretKey = process.env.STRIPE_SECRET_KEY
+// api version can only be the latest, stripe recommends ts ignoring it
 const stripe = new Stripe(stripeSecretKey || '', { apiVersion: '2022-08-01' })
 
 type HookArgsWithCustomCollection = Omit<Parameters<CollectionAfterDeleteHook>[0], 'collection'> & {

packages/plugin-stripe/src/hooks/syncExistingWithStripe.ts

@@ -3,11 +3,12 @@ import type { CollectionBeforeChangeHook, CollectionConfig } from 'payload/types
 import { APIError } from 'payload/errors'
 import Stripe from 'stripe'
 
-import type { StripeConfig } from '../types'
+import type { StripeConfig } from '../types.js'
 
-import { deepen } from '../utilities/deepen'
+import { deepen } from '../utilities/deepen.js'
 
 const stripeSecretKey = process.env.STRIPE_SECRET_KEY
+// api version can only be the latest, stripe recommends ts ignoring it
 const stripe = new Stripe(stripeSecretKey || '', { apiVersion: '2022-08-01' })
 
 type HookArgsWithCustomCollection = Omit<
@@ -39,12 +40,15 @@ export const syncExistingWithStripe: CollectionBeforeChangeHookWithArgs = async
     if (syncConfig) {
       if (operation === 'update') {
         // combine all fields of this object and match their respective values within the document
-        let syncedFields = syncConfig.fields.reduce((acc, field) => {
+        let syncedFields = syncConfig.fields.reduce(
+          (acc, field) => {
             const { fieldPath, stripeProperty } = field
 
             acc[stripeProperty] = data[fieldPath]
             return acc
-        }, {} as Record<string, any>)
+          },
+          {} as Record<string, any>,
+        )
 
         syncedFields = deepen(syncedFields)
 

packages/plugin-stripe/src/index.ts

@@ -9,7 +9,10 @@ import { syncExistingWithStripe } from './hooks/syncExistingWithStripe.js'
 import { stripeREST } from './routes/rest.js'
 import { stripeWebhooks } from './routes/webhooks.js'
 
-const stripePlugin =
+export { LinkToDoc } from './ui/LinkToDoc.js'
+export { stripeProxy } from './utilities/stripeProxy.js'
+
+export const stripePlugin =
   (incomingStripeConfig: StripeConfig) =>
   (config: Config): Config => {
     const { collections } = config
@@ -112,5 +115,3 @@ const stripePlugin =
       endpoints,
     }
   }
-
-export default stripePlugin

packages/plugin-stripe/src/mocks/mockFile.js

@@ -1,9 +0,0 @@
-export const createNewInStripe = () => null
-export const deleteFromStripe = () => null
-export const stripeREST = () => null
-export const stripeWebhooks = () => null
-export const syncExistingWithStripe = () => null
-
-export default {
-  raw: () => {}, // mock express fn
-}

packages/plugin-stripe/src/routes/rest.ts

@@ -33,7 +33,9 @@ export const stripeREST = async (args: {
     }
 
     responseJSON = await stripeProxy({
+      // @ts-expect-error
       stripeArgs,
+      // @ts-expect-error
       stripeMethod,
       stripeSecretKey,
     })

packages/plugin-stripe/src/routes/webhooks.ts

@@ -19,6 +19,7 @@ export const stripeWebhooks = async (args: {
 
   if (stripeWebhooksEndpointSecret) {
     const stripe = new Stripe(stripeSecretKey, {
+      // api version can only be the latest, stripe recommends ts ignoring it
       apiVersion: '2022-08-01',
       appInfo: {
         name: 'Stripe Payload Plugin',
@@ -26,17 +27,14 @@ export const stripeWebhooks = async (args: {
       },
     })
 
+    const body = await req.text()
     const stripeSignature = req.headers.get('stripe-signature')
 
     if (stripeSignature) {
       let event: Stripe.Event | undefined
 
       try {
-        event = stripe.webhooks.constructEvent(
+        event = stripe.webhooks.constructEvent(body, stripeSignature, stripeWebhooksEndpointSecret)
-          await req.text(),
-          stripeSignature,
-          stripeWebhooksEndpointSecret,
-        )
       } catch (err: unknown) {
         const msg: string = err instanceof Error ? err.message : JSON.stringify(err)
         req.payload.logger.error(`Error constructing Stripe event: ${msg}`)

packages/plugin-stripe/src/ui/LinkToDoc.tsx

@@ -1,17 +1,15 @@
+'use client'
+import type { CustomComponent } from 'payload/config'
 import type { UIField } from 'payload/types'
 
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 // import CopyToClipboard from 'payload/dist/admin/components/elements/CopyToClipboard'
 import { useFormFields } from '@payloadcms/ui/forms/Form'
 import React from 'react'
 
-export const LinkToDoc: React.FC<
+export const LinkToDoc: CustomComponent<UIField> = () => {
-  UIField & {
+  const { custom } = useFieldProps()
-    isTestKey: boolean
+  const { isTestKey, nameOfIDField, stripeResourceType } = custom
-    nameOfIDField: string
-    stripeResourceType: string
-  }
-> = (props) => {
-  const { isTestKey, nameOfIDField, stripeResourceType } = props
 
   const field = useFormFields(([fields]) => fields[nameOfIDField])
   const { value: stripeID } = field || {}

packages/plugin-stripe/src/utilities/stripeProxy.ts

@@ -1,7 +1,7 @@
 import lodashGet from 'lodash.get'
 import Stripe from 'stripe'
 
-import type { StripeProxy } from '../types'
+import type { StripeProxy } from '../types.js'
 
 export const stripeProxy: StripeProxy = async ({ stripeArgs, stripeMethod, stripeSecretKey }) => {
   const stripe = new Stripe(stripeSecretKey, {

packages/plugin-stripe/src/webhooks/handleCreatedOrUpdated.ts

@@ -1,8 +1,8 @@
 import { v4 as uuid } from 'uuid'
 
-import type { SanitizedStripeConfig, StripeWebhookHandler } from '../types'
+import type { SanitizedStripeConfig, StripeWebhookHandler } from '../types.js'
 
-import { deepen } from '../utilities/deepen'
+import { deepen } from '../utilities/deepen.js'
 
 type HandleCreatedOrUpdated = (
   args: Parameters<StripeWebhookHandler>[0] & {
@@ -62,12 +62,15 @@ export const handleCreatedOrUpdated: HandleCreatedOrUpdated = async (args) => {
     const foundDoc = payloadQuery.docs[0] as any
 
     // combine all properties of the Stripe doc and match their respective fields within the document
-    let syncedData = syncConfig.fields.reduce((acc, field) => {
+    let syncedData = syncConfig.fields.reduce(
+      (acc, field) => {
         const { fieldPath, stripeProperty } = field
 
         acc[fieldPath] = stripeDoc[stripeProperty]
         return acc
-    }, {} as Record<string, any>)
+      },
+      {} as Record<string, any>,
+    )
 
     syncedData = deepen({
       ...syncedData,

packages/plugin-stripe/src/webhooks/handleDeleted.ts

@@ -1,4 +1,4 @@
-import type { SanitizedStripeConfig, StripeWebhookHandler } from '../types'
+import type { SanitizedStripeConfig, StripeWebhookHandler } from '../types.js'
 
 type HandleDeleted = (
   args: Parameters<StripeWebhookHandler>[0] & {
@@ -58,6 +58,7 @@ export const handleDeleted: HandleDeleted = async (args) => {
         if (logs) payload.logger.info(`- Deleting Payload document with ID: '${foundDoc.id}'...`)
 
         try {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
           payload.delete({
             id: foundDoc.id,
             collection: collectionSlug,

packages/plugin-stripe/src/webhooks/index.ts

@@ -1,9 +1,9 @@
-import type { StripeWebhookHandler } from '../types'
+import type { StripeWebhookHandler } from '../types.js'
 
-import { handleCreatedOrUpdated } from './handleCreatedOrUpdated'
+import { handleCreatedOrUpdated } from './handleCreatedOrUpdated.js'
-import { handleDeleted } from './handleDeleted'
+import { handleDeleted } from './handleDeleted.js'
 
-export const handleWebhooks: StripeWebhookHandler = async (args) => {
+export const handleWebhooks: StripeWebhookHandler = (args) => {
   const { event, payload, stripeConfig } = args
 
   if (stripeConfig?.logs)
@@ -21,7 +21,7 @@ export const handleWebhooks: StripeWebhookHandler = async (args) => {
   if (syncConfig) {
     switch (method) {
       case 'created': {
-        await handleCreatedOrUpdated({
+        void handleCreatedOrUpdated({
           ...args,
           resourceType,
           stripeConfig,
@@ -30,7 +30,7 @@ export const handleWebhooks: StripeWebhookHandler = async (args) => {
         break
       }
       case 'updated': {
-        await handleCreatedOrUpdated({
+        void handleCreatedOrUpdated({
           ...args,
           resourceType,
           stripeConfig,
@@ -39,7 +39,7 @@ export const handleWebhooks: StripeWebhookHandler = async (args) => {
         break
       }
       case 'deleted': {
-        await handleDeleted({
+        void handleDeleted({
           ...args,
           resourceType,
           stripeConfig,

pnpm-lock.yaml

@@ -1188,9 +1188,6 @@ importers:
       lodash.get:
         specifier: ^4.4.2
         version: 4.4.2
-      react:
-        specifier: ^18.0.0
-        version: 18.2.0
       stripe:
         specifier: ^10.2.0
         version: 10.17.0
@@ -1201,6 +1198,12 @@ importers:
       '@payloadcms/eslint-config':
         specifier: workspace:*
         version: link:../eslint-config-payload
+      '@payloadcms/next':
+        specifier: workspace:*
+        version: link:../next
+      '@payloadcms/translations':
+        specifier: workspace:*
+        version: link:../translations
       '@types/express':
         specifier: ^4.17.9
         version: 4.17.21
@@ -1216,12 +1219,6 @@ importers:
       payload:
         specifier: workspace:*
         version: link:../payload
-      prettier:
-        specifier: ^2.7.1
-        version: 2.8.8
-      webpack:
-        specifier: ^5.78.0
-        version: 5.91.0(@swc/core@1.4.13)(esbuild@0.19.12)(webpack-cli@5.1.4)
 
   packages/richtext-lexical:
     dependencies:
@@ -13875,6 +13872,7 @@ packages:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
     hasBin: true
+    dev: false
 
   /prettier@3.2.5:
     resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}

scripts/release.ts

@@ -52,7 +52,7 @@ const packageWhitelist = [
   'plugin-redirects',
   'plugin-search',
   'plugin-seo',
-  // 'plugin-stripe',
+  'plugin-stripe',
   // 'plugin-sentry',
 ]
 

test/plugin-stripe/collections/Customers.ts

@@ -1,6 +1,7 @@
 import type { CollectionConfig } from 'payload/types'
 
-import { LinkToDoc } from '../../../packages/plugin-stripe/src/ui/LinkToDoc.js'
+import { LinkToDoc } from '@payloadcms/plugin-stripe'
+
 import { customersSlug } from '../shared.js'
 
 export const Customers: CollectionConfig = {
@@ -31,13 +32,12 @@ export const Customers: CollectionConfig = {
           type: 'ui',
           admin: {
             components: {
-              Field: (args) =>
+              Field: LinkToDoc,
-                LinkToDoc({
+            },
-                  ...args,
+            custom: {
               isTestKey: process.env.PAYLOAD_PUBLIC_IS_STRIPE_TEST_KEY === 'true',
-                  nameOfIDField: `${args.path}.stripeSubscriptionID`,
+              nameOfIDField: `stripeSubscriptionID`,
               stripeResourceType: 'subscriptions',
-                }),
             },
           },
           label: 'Link',

test/plugin-stripe/config.ts

@@ -1,4 +1,4 @@
-import stripePlugin from '@payloadcms/plugin-stripe'
+import { stripePlugin } from '@payloadcms/plugin-stripe'
 
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'