Card and PayPal (beta)

import { MomoCheckout } from "@/components/mpui-kit/momo-checkout"
import { defaultPaymentMethods } from "@/lib/mpui-kit/payment-methods"

const methods = [
  ...defaultPaymentMethods(cm, { card: false, cash: false }), // MTN, Orange...
  { id: "card", kind: "card" },
  { id: "paypal", kind: "other", label: "PayPal", description: "Pay with your PayPal account" },
]

<MomoCheckout
  amount={25000}
  methods={methods}
  panels={{
    card: { component: StripeCardPanel },
    paypal: { component: PayPalPanel, submit: "panel" },
  }}
  onPay={async ({ methodId, phone, payload }) => {
    // Your server creates the charge. It never trusts an amount sent from the browser.
    const res = await fetch("/api/pay", {
      method: "POST",
      body: JSON.stringify({ methodId, phone, payload }),
    })
    if (!res.ok) return { status: "failed", reason: "gateway_error" }
    const { reference } = await res.json()
    return { status: "success", reference } // or "pending", then onCheckStatus
  }}
/>

interface MethodPanelProps {
  method: PaymentMethod
  amount: number
  currency: "XAF" | "XOF"
  disabled: boolean                    // true while the token is being made
  setReady(ready: boolean): void       // "the fields are complete enough to pay"
  setCollect(fn: (() => Promise<unknown>) | null): void // runs when Pay is pressed, returns the token
  submit(payload?: unknown): void      // for a panel that pays by itself (submit: "panel")
  setError(message: string | undefined): void           // shown under the panel
}

interface MethodPanel {
  component: ComponentType<MethodPanelProps>
  submit?: "checkout" | "panel"        // "checkout" (default) uses the Pay button
}

"use client"
import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js"
import { loadStripe } from "@stripe/stripe-js"
import { useEffect } from "react"
import type { MethodPanelProps } from "@/components/mpui-kit/method-panel"

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)

function Fields({ disabled, setReady, setCollect, setError }: MethodPanelProps) {
  const stripe = useStripe()
  const elements = useElements()

  useEffect(() => {
    if (!stripe || !elements) return
    setCollect(async () => {
      const { error: submitError } = await elements.submit()
      if (submitError) {
        setError(submitError.message)
        throw submitError
      }
      const { error, confirmationToken } = await stripe.createConfirmationToken({ elements })
      if (error) {
        setError(error.message)
        throw error
      }
      // Only this id leaves the panel. Your server confirms the payment with it.
      return { confirmationTokenId: confirmationToken.id }
    })
    return () => setCollect(null)
  }, [stripe, elements, setCollect, setError])

  return (
    <PaymentElement
      onChange={(event) => setReady(event.complete)}
      options={{ readOnly: disabled }}
    />
  )
}

export function StripeCardPanel(props: MethodPanelProps) {
  return (
    <Elements
      stripe={stripePromise}
      options={{ mode: "payment", amount: 1000, currency: "usd" }} // your price, converted
    >
      <Fields {...props} />
    </Elements>
  )
}

// On your server, for the card flow
// 1. Read the price from YOUR data. Ignore any amount sent by the browser.
// 2. Create the payment with the token from payload, and confirm it.
// 3. Answer { status: "success", reference } or { status: "failed", reason }.
// 4. Also handle the provider's webhook: that is the source of truth.

"use client"
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js"
import type { MethodPanelProps } from "@/components/mpui-kit/method-panel"

export function PayPalPanel({ disabled, submit, setError }: MethodPanelProps) {
  return (
    <PayPalScriptProvider
      options={{
        clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID!,
        currency: "USD",
        components: "buttons",
      }}
    >
      <PayPalButtons
        disabled={disabled}
        createOrder={async () => {
          // Your server creates the order from ITS record of the price.
          const res = await fetch("/api/paypal/orders", { method: "POST" })
          return (await res.json()).id
        }}
        onApprove={async (data) => submit({ orderId: data.orderID })}
        onError={() => setError("PayPal could not start. Please try again.")}
      />
    </PayPalScriptProvider>
  )
}
// Register it with { submit: "panel" }: PayPal's buttons are the Pay button.
// Your onPay then receives { payload: { orderId } }, and your server captures the order.