update docs and clean up

README.md

@@ -2,7 +2,9 @@ This is a [Next.js](https://nextjs.org/) project that utilizes Mollie's node JS
 
 ![Mollie Demo App](/.github/assets/mollie-next.png 'Mollie Demo App')
 
-## Payment Flow (hosted Checkout)
+## Payment Flows
+
+### Hosted Checkout
 
 ```mermaid
 sequenceDiagram
@@ -16,6 +18,27 @@ sequenceDiagram
 
 ```
 
+### Components (+auth/capture)
+
+```mermaid
+sequenceDiagram
+    Buyer ->> Merchant: Choose Mollie payment method
+    Buyer ->> Mollie: Load Card Component via mollie.js
+    Buyer ->> Merchant: "Pay Now"
+    Buyer ->> Mollie: Send card data
+    Mollie -->> Buyer: respond with card token
+    Note over Merchant: retrieve card token in payment form
+    Merchant ->>+ Mollie: Create Payment (including card token)
+    Mollie -->>- Merchant: hosted checkout URL
+    Merchant -->> Buyer: Redirect to Mollie hosted checkout
+    Buyer ->>+ Mollie: Interact on Mondu Hosted Checkout
+    Mollie -->> Buyer: Redirect to success page
+    Mollie -->> Merchant: Webhook
+    opt capture flow
+    Merchant ->> Mollie: capture payment
+    end
+```
+
 ## Getting Started
 
 After cloning the project, create your own copy of the environment file:
@@ -28,6 +51,7 @@ nano .env.local
 ### Environment Variables Explained
 
 -   `MOLLIE_API_KEY` is your test API key (starts with `test_`)
+-   `NEXT_PUBLIC_MOLLIE_PROFILE` is your profile ID. This is propagated to the client and is needed for Mollie's components to work
 -   `DOMAIN` is the domain the app is running on, including protocol (`https://` or `http://`)
 -   `WEBHOOK_URL` is a URL where Mollie will send webhooks. Can be different. Recommendation for local development: https://webhook.site
 
@@ -49,7 +73,9 @@ Open [http://localhost:3000](http://localhost:3000) with your browser and start
 
 ✅ log webhooks
 
-▫️ Auth/Capture
+✅ Card Components
+
+✅ Auth/Capture
 
 ✅ Get payment methods from methods API
 

src/app/components/form/checkoutbutton.tsx

@@ -20,18 +20,23 @@ export default function CheckoutButton({
 
     const { mollie } = useMollie();
     const payWithToken = async () => {
+        // get the form data
         const formElement = document.querySelector('form');
         if (!formElement) {
             console.error('Form element not found');
             return;
         }
+        // create a new FormData object
         const formData = new FormData(formElement);
+        // get the card token from mollie
         const { token, error } = await mollie.createToken();
         if (error) {
             console.error('Error creating card token:', error);
             return;
         }
+        // append the card token to the form data
         formData.append('cardToken', token);
+        // submit the form to the createPayment function
         createPayment(formData);
     };
 
@@ -43,7 +48,7 @@ export default function CheckoutButton({
             loading={pending}
             formAction={variant === 'components' ? payWithToken : createPayment}
         >
-            Buy Now ({variant})
+            Buy Now
         </Button>
     );
 }

src/app/lib/MollieContext.js

@@ -8,8 +8,13 @@ import React, {
     useEffect,
 } from 'react';
 
+// create a context to store the Mollie object for components
+
 export const MollieContext = createContext();
 
+// Provider component to wrap the app with
+// this is needed so that the Mollie object is available to all components
+
 export const MollieProvider = ({ children }) => {
     const mollieRef = useRef(null);
     const [mollie, setMollie] = useState(null);
@@ -47,6 +52,7 @@ export const MollieProvider = ({ children }) => {
     );
 };
 
+// Custom hook to use the Mollie object
 export const useMollie = () => {
     return useContext(MollieContext);
 };

src/app/lib/server-actions.ts

@@ -2,12 +2,11 @@
 
 // Lib
 import { validateFormData, validateUrl } from '@/app/lib/validation';
-import { mollieCreatePayment, mollieCapturePayment } from '@/app/lib/mollie';
+import { mollieCreatePayment } from '@/app/lib/mollie';
 import { PaymentMethod, CaptureMethod } from '@mollie/api-client';
 
 // Next.js
 import { redirect } from 'next/navigation';
-import { revalidatePath } from 'next/cache';
 
 export async function createPayment(formData: FormData) {
     // This Server Action takes the form data, validates it and creates a payment