Stripe South Africa setup guide.

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-06-20',
});

export async function createPaymentIntent(order: {
  id: string;
  amountRands: number;
  email: string;
}) {
  return stripe.paymentIntents.create({
    amount: Math.round(order.amountRands * 100), // cents
    currency: 'zar',
    automatic_payment_methods: { enabled: true },
    metadata: { orderId: order.id },
    receipt_email: order.email,
  });
}

<script src="https://js.stripe.com/v3/"></script>
<script type="module">
  const stripe = Stripe('pk_live_...');
  const elements = stripe.elements({ clientSecret: 'pi_..._secret_...' });
  elements.create('payment').mount('#payment-element');

  document.querySelector('#pay').addEventListener('click', async () => {
    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: { return_url: 'https://yourstore.co.za/checkout/return' },
    });
    if (error) document.querySelector('#err').textContent = error.message;
  });
</script>
<div id="payment-element"></div>
<button id="pay">Pay</button>
<div id="err"></div>

export async function handleStripeWebhook(req: Request) {
  const raw = await req.text();
  const sig = req.headers.get('stripe-signature') || '';

  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(
      raw,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET!,
    );
  } catch {
    return new Response('bad signature', { status: 400 });
  }

  switch (event.type) {
    case 'payment_intent.succeeded': {
      const pi = event.data.object as Stripe.PaymentIntent;
      await markOrderPaid(pi.metadata.orderId!, pi.id);
      break;
    }
    case 'charge.dispute.created':
      await flagOrderForDispute(event.data.object as Stripe.Dispute);
      break;
  }
  return new Response('ok');
}