Code-Focused Demo

This version emphasizes the code editors and terminal output, great for developer presentations.

// React component example
import React, { useEffect, useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';

const PaymentForm = () => {
  const [stripe, setStripe] = useState(null);
  
  useEffect(() => {
    // Load Stripe.js (or Modo.js)
    loadStripe('pk_test_...').then(setStripe);
  }, []);
  
  const handleSubmit = async (event) => {
    event.preventDefault();
    
    if (!stripe) return;
    
    const {paymentMethod} = await stripe.createPaymentMethod({
      type: 'card',
      card: elements.getElement(CardElement)
    });
    
    // Process payment
    const response = await fetch('/api/process-payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ 
        paymentMethodId: paymentMethod.id,
        amount: 3239
      })
    });
  };
  
  return <PaymentFormComponent onSubmit={handleSubmit} />;
};

const express = require('express');
const stripe = require('stripe')('sk_test_...');

app.post('/api/process-payment', async (req, res) => {
  const { paymentMethodId, amount } = req.body;
  
  try {
    // When using Modo, this request gets automatically routed
    const paymentIntent = await stripe.paymentIntents.create({
      amount,
      currency: 'usd',
      payment_method: paymentMethodId,
      confirm: true,
      metadata: {
        order_id: generateOrderId(),
        customer_id: req.user.id
      }
    });
    
    // Log transaction details
    console.log('Payment processed:', {
      id: paymentIntent.id,
      status: paymentIntent.status,
      processor: 'stripe' // or 'modo' if routed
    });
    
    res.json({ 
      success: true, 
      paymentIntent: {
        id: paymentIntent.id,
        status: paymentIntent.status
      }
    });
    
  } catch (error) {
    console.error('Payment failed:', error);
    res.status(400).json({ 
      error: error.message,
      type: error.type 
    });
  }
});

Ready to process payments...