API Playground

This is the main API playground demonstrating Modo’s payment routing capabilities.

Example Co

Purchase for Widget

Item	$15.99
Shipping	$5.00
Sales Tax	$1.75
Total	$22.74

Waiting for a request...

This is the Modo Podium visualization.

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...

Dashboard Demo

This version focuses on the Modo Podium dashboard, showing transaction routing and processing analytics.

Monitoring payment routing...

Timestamp	Amount	Currency	Input API Format	Output API Format	Status
14:32:15	$22.74	USD	Stripe	Chase	Success
14:31:42	$15.99	USD	Stripe	PayPal	Success
14:30:18	$89.00	USD	Square	Chase	Success
14:29:55	$45.50	EUR	Stripe	SEPA	Success
14:28:33	$12.99	USD	Stripe	Amex	Failed

Frontend Only Demo

This version shows only the frontend payment form, perfect for showcasing the user experience.

Acme Corp

Premium Subscription

Minimal Demo

A simplified version showing just the payment form and terminal output.

Quick Store

Digital Download