payload-code · ianhalpern · Mar 14, 2024 · Feb 29, 2024 · Mar 13, 2024
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -7,7 +7,7 @@ on:
     branches: ["master"]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -17,8 +17,8 @@ jobs:
       - name: install
         run: npm i
       - name: ESLint
-        run: npm run eslint
+        run: npx eslint src --ext .js
       - name: Prettier
-        run: npm run prettier
+        run: npx prettier -c 'src/**/*.js'
       - name: Tests
         run: npm t
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -0,0 +1,18 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/README.md b/README.md
@@ -24,7 +24,9 @@ import {
     Expiry,
     CardCode,
     RoutingNumber,
-    AccountNumber
+    AccountNumber,
+    ProcessingAccountForm,
+    openProcessingAccountForm
 } from 'payload-react';
 ```
 
@@ -85,6 +87,31 @@ function CheckoutForm() {
 }
 ```
 
+### Processing Account Form
+
+Below is an example of how to open the Payload.js ProcessingAccountForm modal from react.
+
+```javascript
+import {
+    openProcessingAccountForm
+} from 'payload-react';
+
+function OnboardButton() {
+    return <button
+        className="btn btn-primary"
+        onClick={(e) =>
+          openProcessingAccountForm({
+            clientToken: 'client_key_2zsp9Pske5l2Bgcy3bySES',
+            onSuccess(evt) {
+                console.log(evt.account.id)
+            }
+          })
+        }>
+        Open Processing Account Form Modal
+    </button>
+}
+```
+
 ## Documentation
 
 To get further information on the Payload.js Secure Input library and capabilities,

diff --git a/examples/react-16/src/App.css b/examples/react-16/src/App.css
@@ -1,6 +1,7 @@
 .App {
   max-width: 800px;
   margin: auto;
+  padding: 2rem 0;
 }
 
 .App-logo {

diff --git a/examples/react-16/src/App.js b/examples/react-16/src/App.js
@@ -5,14 +5,17 @@ import {
   Expiry,
   PayloadInput,
   PaymentForm,
+  ProcessingAccountForm,
+  openProcessingAccountForm,
 } from 'payload-react'
 import React, { useState } from 'react'
 
 import './App.css'
 
 function Example1() {
   return (
-    <div>
+    <div className="mt-5">
+      <h3>Card Payment Example - deprecated</h3>
       {/* eslint-disable-next-line */}
       <PayloadReact.form.payment
         clientToken={process.env.REACT_APP_PAYLOAD_CLIENT_TOKEN}
@@ -42,7 +45,8 @@ function Example2() {
   const [invalidCardCode, setInvalidCardCode] = useState(false)
 
   return (
-    <div>
+    <div className="mt-5">
+      <h3>Card Payment Example - New Component Design</h3>
       <PaymentForm
         clientToken={process.env.REACT_APP_PAYLOAD_CLIENT_TOKEN}
         className="container"
@@ -111,11 +115,50 @@ function Example2() {
   )
 }
 
+function Example3() {
+  return (
+    <div className="mt-5">
+      <h3>Embedded Processing Form Example</h3>
+      <ProcessingAccountForm
+        clientToken={process.env.REACT_APP_PAYLOAD_CLIENT_TOKEN}
+        onLoaded={() => {
+          console.log('loaded')
+        }}
+        onCreated={() => {
+          console.log('created')
+        }}
+      />
+    </div>
+  )
+}
+
+function Example4() {
+  return (
+    <div className="mt-5">
+      <h3>Processing Form Modal Example</h3>
+      <button
+        className="btn btn-primary"
+        onClick={(e) =>
+          openProcessingAccountForm({
+            clientToken: process.env.REACT_APP_PAYLOAD_CLIENT_TOKEN,
+          })
+        }>
+        Open Processing Form Modal
+      </button>
+    </div>
+  )
+}
+
 function App() {
   return (
     <div className="App">
       <Example1 />
+      <hr />
       <Example2 />
+      <hr />
+      <Example3 />
+      <hr />
+      <Example4 />
     </div>
   )
 }

diff --git a/examples/react-18/.env b/examples/react-18/.env
@@ -1 +1,2 @@
 SKIP_PREFLIGHT_CHECK=true
+REACT_APP_PAYLOAD_CLIENT_TOKEN=test_client_key_1234567
diff --git a/examples/react-18/src/App.css b/examples/react-18/src/App.css
@@ -1,6 +1,7 @@
 .App {
   max-width: 800px;
   margin: auto;
+  padding: 2rem 0;
 }
 
 .App-logo {

diff --git a/examples/react-18/src/App.js b/examples/react-18/src/App.js
@@ -5,14 +5,17 @@ import {
   Expiry,
   PayloadInput,
   PaymentForm,
+  ProcessingAccountForm,
+  openProcessingAccountForm,
 } from 'payload-react'
 import React, { useState } from 'react'
 
 import './App.css'
 
 function Example1() {
   return (
-    <div>
+    <div className="mt-5">
+      <h3>Card Payment Example - deprecated</h3>
       {/* eslint-disable-next-line */}
       <PayloadReact.form.payment
         clientToken={process.env.REACT_APP_PAYLOAD_CLIENT_TOKEN}
@@ -42,7 +45,8 @@ function Example2() {
   const [invalidCardCode, setInvalidCardCode] = useState(false)
 
   return (
-    <div>
+    <div className="mt-5">
+      <h3>Card Payment Example - New Component Design</h3>
       <PaymentForm
         clientToken={process.env.REACT_APP_PAYLOAD_CLIENT_TOKEN}
         className="container"
@@ -111,11 +115,50 @@ function Example2() {
   )
 }
 
+function Example3() {
+  return (
+    <div className="mt-5">
+      <h3>Embedded Processing Form Example</h3>
+      <ProcessingAccountForm
+        clientToken={process.env.REACT_APP_PAYLOAD_CLIENT_TOKEN}
+        onLoaded={() => {
+          console.log('loaded')
+        }}
+        onCreated={() => {
+          console.log('created')
+        }}
+      />
+    </div>
+  )
+}
+
+function Example4() {
+  return (
+    <div className="mt-5">
+      <h3>Processing Form Modal Example</h3>
+      <button
+        className="btn btn-primary"
+        onClick={(e) =>
+          openProcessingAccountForm({
+            clientToken: process.env.REACT_APP_PAYLOAD_CLIENT_TOKEN,
+          })
+        }>
+        Open Processing Account Form Modal
+      </button>
+    </div>
+  )
+}
+
 function App() {
   return (
     <div className="App">
       <Example1 />
+      <hr />
       <Example2 />
+      <hr />
+      <Example3 />
+      <hr />
+      <Example4 />
     </div>
   )
 }

diff --git a/src/payload-react.js b/src/payload-react.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 
 import { getPayload } from './utils.js'
 
@@ -38,6 +38,18 @@ const inputEventsMap = {
   blur: 'onBlur',
 }
 
+const processingFormEventsMap = {
+  success: 'onSuccess',
+  account_created: 'onAccountCreated',
+  loaded: 'onLoaded',
+  closed: 'onClosed',
+}
+
+const processingFormAttributeMap = {
+  form: 'form',
+  legal_entity_id: 'legalEntityId',
+}
+
 function getPropAttrs(props, ignore) {
   const attrs = {}
   for (const key in props) {
@@ -242,6 +254,93 @@ export const AccountNumber = (props) => {
   return <PayloadInput pl-input="account_number" {...props} />
 }
 
+export class ProcessingAccountForm extends React.Component {
+  constructor(props) {
+    super(props)
+    this.props = props
+    this.state = {
+      Payload: props.Payload ? props.Payload : null,
+    }
+    this.procFormRef = React.createRef()
+    this.processingAccount = null
+    this.excludeProps = Object.values(processingFormAttributeMap)
+      .concat(Object.values(processingFormEventsMap))
+      .concat(['Payload', 'clientToken'])
+  }
+
+  async componentDidMount() {
+    if (!this.props.clientToken) {
+      return
+    }
+
+    if (!this.state.Payload) {
+      if (!window.Payload) {
+        await getPayload()
+      }
+      this.setState((state) => ({ ...state, Payload: window.Payload }))
+    } else {
+      this.initalizePayload()
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (!prevState.Payload && this.state.Payload) {
+      // Payload is set in our state we can initialize it
+      this.initalizePayload()
+
+      const props = {}
+      Object.entries(processingFormAttributeMap).forEach(([key, value]) => {
+        if (value in this.props) props[key] = this.props[value]
+      })
+
+      this.processingAccount = new this.state.Payload.ProcessingAccount({
+        container: this.procFormRef.current,
+        ...props,
+      })
+
+      Object.entries(processingFormEventsMap).forEach(([key, value]) => {
+        this.processingAccount.on(key, (evt, ...args) => {
+          if (value in this.props) this.props[value](evt, ...args)
+        })
+      })
+    }
+  }
+
+  initalizePayload() {
+    this.state.Payload(this.props.clientToken)
+  }
+
+  render() {
+    const props = {}
+    Object.entries(this.props).forEach(([key, value]) => {
+      if (!this.excludeProps.includes(key)) props[key] = value
+    })
+
+    return <div ref={this.procFormRef} {...props}></div>
+  }
+}
+
+export const openProcessingAccountForm = async (props) => {
+  await getPayload()
+
+  window.Payload(props.clientToken)
+
+  const transformedProps = {}
+  Object.entries(processingFormAttributeMap).forEach(([key, value]) => {
+    if (value in props) transformedProps[key] = props[value]
+  })
+
+  const processingAccount = new window.Payload.ProcessingAccount({
+    ...transformedProps,
+  })
+
+  Object.entries(processingFormEventsMap).forEach(([key, value]) => {
+    if (value in props) processingAccount.on(key, props[value])
+  })
+
+  return processingAccount
+}
+
 PayloadForm.propTypes = {
   clientToken: PropTypes.string.isRequired,
   Payload: PropTypes.func,
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		SKIP_PREFLIGHT_CHECK=true
		REACT_APP_PAYLOAD_CLIENT_TOKEN=test_client_key_1234567