Checkout & Payment Integration

What We're Building

A full e-commerce checkout system that replaces Shopify's built-in cart — giving PetalsWings complete control over the buying experience, payment processing, and customer data.

Accepted Payment Methods

Five ways for customers to pay, all working together through a unified checkout experience.

Side-by-Side Comparison

System Design

Three layers working together — a static frontend, serverless backend, and managed database.

The Customer Journey

Six steps from browsing to confirmation — each one designed to minimize friction.

Code Examples

Key integration snippets to show how the pieces fit together.

// Initialize Stripe Elements
const stripe = Stripe('pk_live_your_publishable_key');
const elements = stripe.elements({
  appearance: {
    theme: 'night',
    variables: {
      colorPrimary: '#7c3aed',
      colorBackground: '#12121a',
      fontFamily: 'Inter, sans-serif',
    }
  }
});

// Mount the Payment Element (cards + wallets in one)
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

// Handle form submission
async function handleSubmit() {
  const { error } = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: 'https://petalswings.com/order-confirmed',
    },
  });

  if (error) {
    // Show error to customer
    document.getElementById('error-message').textContent = error.message;
  }
}

// Cloudflare Worker — Create Payment Intent
export default {
  async fetch(request, env) {
    const { items, shipping } = await request.json();

    // Calculate total server-side (never trust the client!)
    const total = calculateTotal(items, shipping);

    // Create Stripe PaymentIntent
    const response = await fetch('https://api.stripe.com/v1/payment_intents', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${env.STRIPE_SECRET_KEY}`,
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: new URLSearchParams({
        amount: Math.round(total * 100), // Stripe uses cents
        currency: 'usd',
        automatic_payment_methods: '{"enabled": true}',
        metadata: JSON.stringify({
          order_items: items.map(i => i.sku).join(','),
        }),
      }),
    });

    const paymentIntent = await response.json();

    return new Response(JSON.stringify({
      clientSecret: paymentIntent.client_secret,
    }));
  }
};

// PayPal Smart Payment Buttons
paypal.Buttons({
  style: {
    layout: 'vertical',
    color: 'black',
    shape: 'rect',
    label: 'paypal',
  },

  async createOrder() {
    const res = await fetch('/api/paypal/create-order', {
      method: 'POST',
      body: JSON.stringify({ cart: getCartItems() }),
    });
    const data = await res.json();
    return data.id;
  },

  async onApprove(data) {
    const res = await fetch(`/api/paypal/capture/${data.orderID}`, {
      method: 'POST',
    });
    const order = await res.json();
    showConfirmation(order);
  },
}).render('#paypal-button-container');

What Chris Needs to Do

Your checklist — complete these before we start building.

• ✓

  Create a Stripe Account

  Go to stripe.com → Sign up with business info for PetalsWings/Aspire Digital. You'll need business name, EIN, bank account for payouts. Takes ~10 minutes. Gives us API keys immediately.

• ✓

  Verify Domain for Apple Pay

  In Stripe Dashboard → Settings → Payment Methods → Apple Pay → Add Domain → Download verification file → Upload to petalswings.com/.well-known/apple-developer-merchantid-domain-association. Link can handle the upload.

• ✓

  Set Up PayPal Business Account

  Go to paypal.com/business → Sign up with business email. Enable "PayPal Checkout" in your account settings. Get Client ID and Secret for API integration.

• ✓

  Apply for Synchrony Merchant Account

  If pursuing BNPL: apply at synchronybusiness.com. Garden/outdoor category = Synchrony HOME card. Chris's internal connections may expedite this. Allow 2-4 weeks for approval.

• ✓

  Decide on Shipping Strategy

  Option A: Flat rate ($X for all orders). Simple. Option B: Weight-based (heavier rhizome bundles cost more). Option C: Real-time carrier rates via USPS/UPS API. Recommend starting with flat rate, upgrading later.

• ✓

  Provide Product Catalog Data

  We have the Etsy CSV export. Chris should review it and confirm: product names, descriptions, prices, weights, images, and stock quantities for each iris variety.

Estimated Build Schedule

A phased approach — start accepting payments in weeks, not months.

What This Costs

Spoiler: setup is free. You only pay per transaction.