feat: EP payments configured correctly

Author: samblacklock

examples/spa-elastic-path-payments/README.md

@@ -2,23 +2,34 @@
 
 This example showcases how to implement **Elastic Path payment gateway processing** with **Elastic Path Commerce Cloud** in a Single-Page Application (SPA) written in React. It builds on the `spa-guest-checkout` example, although omits a number of its features.
 
-> **Heads-up:** This project focuses **exclusively** on Elastic Path payment processing workflows. It creates minimal test orders solely to demonstrate payment handling—cart management, product catalogs, customer accounts, etc. are kept deliberately simple and are not the focus.
+> **Heads-up:** This project focuses **exclusively** on Elastic Path payment processing workflows using **Stripe**. It creates minimal test orders solely to demonstrate payment handling—cart management, product catalogs, customer accounts, etc. are kept deliberately simple and are not the focus.
 
 Key capabilities demonstrated:
 
 1. **Test Order Creation** – automatically creates incomplete orders with test products for payment processing demonstration.
-2. **Elastic Path Payment Gateway** – processes payments using Elastic Path's payment gateway for scenarios like:
+2. **Elastic Path Payment Gateway** – processes payments using Elastic Path's payment gateway powered by Stripe for scenarios like:
    • Credit card payments  
-   • Digital wallet payments  
+   • Digital wallet payments (Apple Pay, Google Pay)  
    • Alternative payment methods  
-   • Custom payment workflows
+   • Secure payment processing
 3. **Order State Management** – converts incomplete orders to complete orders after Elastic Path payment processing.
 4. **Payment Status Tracking** – displays real-time order and payment status updates with proper UI indicators.
+5. **Stripe Payment Element** – Uses Stripe's recommended Payment Element for secure payment collection.
 
 > The example purposefully uses simplified order creation and minimal product selection to keep the focus on Elastic Path payment mechanics.
 
 ---
 
+## Prerequisites
+
+Before running this example, you'll need:
+
+1. **Elastic Path Commerce Cloud Store** with Elastic Path Payments enabled
+2. **Stripe Account** - Elastic Path Payments is powered by Stripe
+3. **Stripe Publishable Key** - Get this from your Stripe Dashboard
+
+---
+
 ## Project Structure
 
 ```
@@ -30,7 +41,7 @@ spa-elastic-path-payments/
 │   │   ├── AppHeader.tsx         # Authentication status & cart ID display
 │   │   ├── StepIndicator.tsx     # Multi-step progress indicator
 │   │   ├── OrderCreator.tsx      # Creates test orders for payment demo
-│   │   ├── ElasticPathPayment.tsx # Elastic Path payment processing form
+│   │   ├── ElasticPathPayment.tsx # Elastic Path payment processing with Stripe
 │   │   ├── OrderStatus.tsx       # Order & payment status display
 │   │   └── OrderCompleteView.tsx # Success screen with reset functionality
 │   ├── hooks/
@@ -61,23 +72,34 @@ This generates an incomplete order ready for Elastic Path payment processing.
 
 ### 2. Elastic Path Payment Processing
 
-`ElasticPathPayment` captures payment details and processes them:
+`ElasticPathPayment` captures payment details and processes them using Stripe:
 
 ```tsx
-const paymentData = {
-  gateway: "manual",
-  method: "purchase",
-  // if the user supplies a reference
-  paymentmethod_meta: {
-    custom_reference: paymentReference,
-    name: "Elastic Path Payment",
+// 1. Initialize payment with Elastic Path
+const paymentResponse = await paymentSetup({
+  path: { orderID: order.id },
+  body: {
+    data: {
+      gateway: "elastic_path_payments_stripe",
+      method: "purchase",
+      payment: {
+        currency: order.meta?.display_price?.with_tax?.currency,
+        amount: order.meta?.display_price?.with_tax?.amount,
+      },
+    },
   },
-}
+})
 
-await paymentSetup({
-  path: { orderID: order.id },
-  body: { data: paymentData },
+// 2. Confirm payment with Stripe
+const { error, paymentIntent } = await stripe.confirmPayment({
+  elements,
+  clientSecret,
+  confirmParams: { return_url: window.location.origin },
+  redirect: "if_required",
 })
+
+// 3. Confirm with Elastic Path
+await confirmOrder({ path: { orderID: order.id } })
 ```
 
 ### 3. Status Display
@@ -94,21 +116,94 @@ await paymentSetup({
 pnpm i   # or npm install / yarn
 ```
 
-2. **Set environment variables** – create a `.env` file in `examples/spa-elastic-path-payments` (or export in your shell):
+2. **Set environment variables** – create a `.env` file in `examples/spa-elastic-path-payments`:
 
-```
+```env
+# Elastic Path Commerce Cloud
 VITE_APP_EPCC_ENDPOINT_URL=https://YOUR_EP_DOMAIN.elasticpath.com
 VITE_APP_EPCC_CLIENT_ID=YOUR_CLIENT_ID
+
+# Stripe (required for Elastic Path Payments)
+VITE_STRIPE_PUBLISHABLE_KEY=pk_test_YOUR_STRIPE_PUBLISHABLE_KEY
 ```
 
-3. **Start Vite dev server**:
+**Important**: Make sure you're using your **Stripe publishable key** (starts with `pk_test_` for test mode or `pk_live_` for live mode).
+
+3. **Configure Elastic Path Payments** in your Elastic Path store:
+
+   - Enable Elastic Path Payments in your store settings
+   - Connect your Stripe account
+   - Ensure the payment gateway is configured properly
+
+4. **Start Vite dev server**:
 
 ```bash
 pnpm --filter spa-elastic-path-payments dev
 ```
 
+The app will be available at `http://localhost:5173`
+
+---
+
+## Environment Variables Reference
+
+| Variable                      | Required | Description                                         |
+| ----------------------------- | -------- | --------------------------------------------------- |
+| `VITE_APP_EPCC_ENDPOINT_URL`  | ✅       | Your Elastic Path Commerce Cloud store URL          |
+| `VITE_APP_EPCC_CLIENT_ID`     | ✅       | Your Elastic Path store's client ID                 |
+| `VITE_STRIPE_PUBLISHABLE_KEY` | ✅       | Your Stripe publishable key (from Stripe Dashboard) |
+
+---
+
+## Payment Flow
+
+1. **Order Creation**: App creates a test order with sample products
+2. **Payment Initialization**: Call Elastic Path to setup payment with `elastic_path_payments_stripe` gateway
+3. **Stripe Elements**: Render Stripe Payment Element for secure payment collection
+4. **Payment Submission**: Submit payment form using Stripe Elements
+5. **Payment Confirmation**: Confirm payment with Stripe using client secret
+6. **Order Confirmation**: Confirm completed payment with Elastic Path
+7. **Success**: Display payment success and order completion
+
+---
+
+## Troubleshooting
+
+### Common Issues
+
+**"No client secret received"**
+
+- Ensure Elastic Path Payments is enabled in your store
+- Verify your Stripe account is connected to Elastic Path
+- Check that the payment gateway configuration is correct
+
+**"Payment system not ready"**
+
+- Verify `VITE_STRIPE_PUBLISHABLE_KEY` is set correctly
+- Ensure you're using the publishable key (not secret key)
+- Check browser console for Stripe loading errors
+
+**Payment fails**
+
+- Check Stripe Dashboard for failed payment details
+- Verify test card numbers if using test mode
+- Ensure order amount and currency are valid
+
+**404 Resource Not Found (Inventory/Products)**
+
+- Ensure you have products in your Elastic Path Commerce Cloud store
+- Make sure products are published and not just in draft state
+- Check that your store has at least one simple product (not just base products with variants)
+- Verify your `VITE_APP_EPCC_ENDPOINT_URL` and `VITE_APP_EPCC_CLIENT_ID` are correct
+
+**"No products available in your store"**
+
+- Add at least one product to your Elastic Path Commerce Cloud store
+- Ensure the product is published and available
+- If you only have base products, create some child products or simple products
+
 ## Learn More
 
-- [Elastic Path Payment Gateway Documentation](https://elasticpath.dev/docs/api/carts/cart-management)
-- [Order Management with Elastic Path](https://elasticpath.dev/docs/api/carts/cart-management)
-- [Payment Processing APIs](https://elasticpath.dev/docs/api/carts/cart-management)
+- [Elastic Path Payments Documentation](https://elasticpath.dev/docs/developer-tools/fundamentals/checkout/payments/elastic-path-payments/implement-payments)
+- [Stripe Payment Element Guide](https://stripe.com/docs/payments/payment-element)
+- [Elastic Path Commerce Cloud Docs](https://elasticpath.dev/docs)

examples/spa-elastic-path-payments/package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@epcc-sdk/sdks-shopper": "workspace:*",
+    "@stripe/react-stripe-js": "^2.4.0",
+    "@stripe/stripe-js": "^2.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/spa-elastic-path-payments/pnpm-lock.yaml

@@ -1,5 +1,7 @@
 import { useState } from "react"
 import { type OrderResponse } from "@epcc-sdk/sdks-shopper"
+import { Elements } from "@stripe/react-stripe-js"
+import { loadStripe } from "@stripe/stripe-js"
 import { AppHeader } from "./components/AppHeader"
 import { StepIndicator } from "./components/StepIndicator"
 import { OrderCreator } from "./components/OrderCreator"
@@ -9,6 +11,14 @@ import { OrderCompleteView } from "./components/OrderCompleteView"
 import { useAppInitialization } from "./hooks/useAppInitialization"
 import { useOrderCreation } from "./hooks/useOrderCreation"
 
+// Initialize Stripe with account ID (like payments example)
+const stripePromise = loadStripe(
+  import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || "",
+  {
+    stripeAccount: import.meta.env.VITE_STRIPE_ACCOUNT_ID || "",
+  },
+)
+
 function App() {
   const [currentStep, setCurrentStep] = useState<
     "create" | "payment" | "complete"
@@ -61,11 +71,26 @@ function App() {
           {currentStep === "payment" && order && (
             <div className="space-y-6">
               <OrderStatus order={order} />
-              <ElasticPathPayment
-                order={order}
-                onPaymentComplete={handlePaymentComplete}
-                onError={clearError}
-              />
+              <Elements
+                stripe={stripePromise}
+                options={{
+                  mode: "payment",
+                  currency:
+                    order.meta?.display_price?.with_tax?.currency?.toLowerCase() ||
+                    "usd",
+                  amount: order.meta?.display_price?.with_tax?.amount || 100,
+                  payment_method_types: ["card"],
+                  appearance: {
+                    theme: "stripe",
+                  },
+                }}
+              >
+                <ElasticPathPayment
+                  order={order}
+                  onPaymentComplete={handlePaymentComplete}
+                  onError={clearError}
+                />
+              </Elements>
             </div>
           )}