One-Time Payments

// config/payment-methods.ts

interface CustomPaymentMethodConfig {
  id: string;                     // Stripe CPM Type ID (cpmt_xxx)
  hitpayMethod: string;           // HitPay payment method
  displayName: string;
}

export const CUSTOM_PAYMENT_METHODS: CustomPaymentMethodConfig[] = [
  {
    id: 'cpmt_YOUR_PAYNOW_ID',      // Replace with your CPM Type ID
    hitpayMethod: 'paynow_online',
    displayName: 'PayNow',
  },
  {
    id: 'cpmt_YOUR_SHOPEEPAY_ID',
    hitpayMethod: 'shopee_pay',
    displayName: 'ShopeePay',
  },
  {
    id: 'cpmt_YOUR_GRABPAY_ID',
    hitpayMethod: 'grabpay',
    displayName: 'GrabPay',
  },
];

export function getHitpayMethod(cpmTypeId: string): string | undefined {
  return CUSTOM_PAYMENT_METHODS.find(pm => pm.id === cpmTypeId)?.hitpayMethod;
}

// lib/stripe-client.ts
import { loadStripe } from '@stripe/stripe-js';

export const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
  {
    betas: ['custom_payment_methods_beta_1'],
  }
);

// Add CPMs to Elements provider
import { CUSTOM_PAYMENT_METHODS } from '@/config/payment-methods';

const elementsOptions = {
  clientSecret,
  customPaymentMethods: CUSTOM_PAYMENT_METHODS.map(pm => ({
    id: pm.id,
    options: { type: 'static' as const },
  })),
};

<Elements stripe={stripePromise} options={elementsOptions}>
  <CheckoutForm />
</Elements>

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx

# HitPay
HITPAY_API_KEY=xxx
HITPAY_SALT=xxx
NEXT_PUBLIC_HITPAY_ENV=sandbox  # or 'production'
NEXT_PUBLIC_BASE_URL=https://your-domain.com

// app/api/hitpay/create/route.ts
import { NextResponse } from 'next/server';

const HITPAY_API_URL = process.env.NEXT_PUBLIC_HITPAY_ENV === 'production'
  ? 'https://api.hit-pay.com/v1'
  : 'https://api.sandbox.hit-pay.com/v1';

export async function POST(request: Request) {
  const { amount, currency, paymentMethod, paymentIntentId } = await request.json();

  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;

  const response = await fetch(`${HITPAY_API_URL}/payment-requests`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-BUSINESS-API-KEY': process.env.HITPAY_API_KEY!,
    },
    body: JSON.stringify({
      amount: (amount / 100).toFixed(2),  // Convert cents to dollars
      currency,
      payment_methods: [paymentMethod],
      reference_number: paymentIntentId,
      webhook: `${baseUrl}/api/hitpay/webhook`,
      generate_qr: true,
    }),
  });

  const data = await response.json();

  return NextResponse.json({
    paymentRequestId: data.id,
    qrCode: data.qr_code_data?.qr_code,
    checkoutUrl: data.url,
  });
}

// components/CheckoutForm.tsx
'use client';

import { useState } from 'react';
import { PaymentElement } from '@stripe/react-stripe-js';
import { QRCodeSVG } from 'qrcode.react';
import { CUSTOM_PAYMENT_METHODS, getHitpayMethod } from '@/config/payment-methods';

export function CheckoutForm({ amount, currency, paymentIntentId }) {
  const [qrCode, setQrCode] = useState<string | null>(null);
  const [selectedCpm, setSelectedCpm] = useState<string | null>(null);

  const handlePaymentElementChange = async (event: any) => {
    const paymentType = event.value?.type;

    // Check if selected payment method is a CPM
    const isCpm = CUSTOM_PAYMENT_METHODS.some(pm => pm.id === paymentType);

    if (isCpm) {
      setSelectedCpm(paymentType);

      // Create HitPay payment request
      const hitpayMethod = getHitpayMethod(paymentType);
      const response = await fetch('/api/hitpay/create', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          amount,
          currency,
          paymentMethod: hitpayMethod,
          paymentIntentId,
        }),
      });

      const data = await response.json();
      setQrCode(data.qrCode);
    } else {
      setSelectedCpm(null);
      setQrCode(null);
    }
  };

  return (
    <div>
      <PaymentElement onChange={handlePaymentElementChange} />

      {qrCode && (
        <div className="qr-container">
          <h3>Scan to Pay</h3>
          <QRCodeSVG value={qrCode} size={256} />
          <p>Waiting for payment...</p>
        </div>
      )}
    </div>
  );
}