Card Checkout

Step 1: Install the SDK

Install the Hedge Payments React SDK to get started with card checkout:

npm install @hedgepayments/react

yarn add @hedgepayments/react

Step 2: Configure the Provider

Wrap your application with the HedgePaymentsProvider:

import { HedgePaymentsProvider } from '@hedgepayments/react'

function App() {
  return (
    <HedgePaymentsProvider
      merchantId="your_merchant_id"
      env="sandbox" // or 'prod' for production
    >
      <YourApp />
    </HedgePaymentsProvider>
  )
}

Step 3: Add the Card Form

Use the HedgeCardForm component to collect card details securely:

import { HedgeCardForm, useHedgePayments } from '@hedgepayments/react'

function CheckoutPage() {
  const { tokenize, processing } = useHedgePayments()

  const handleSubmit = async () => {
    try {
      // Tokenize the card details
      const token = await tokenize()

      // Send token to your backend to create the charge
      const response = await fetch('/api/charge', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          token,
          amount: 9999, // $99.99 in cents
          currency: 'USD'
        })
      })

      const result = await response.json()
      console.log('Payment successful:', result)
    } catch (error) {
      console.error('Payment failed:', error)
    }
  }

  return (
    <div className="max-w-md mx-auto">
      <h2>Payment Details</h2>

      <HedgeCardForm
        onReady={() => console.log('Form ready')}
        onError={(error) => console.error('Form error:', error)}
        styles={{
          input: {
            fontSize: '16px',
            color: '#333',
          }
        }}
      />

      <button
        onClick={handleSubmit}
        disabled={processing}
        className="w-full mt-4 py-3 bg-green-600 text-white rounded"
      >
        {processing ? 'Processing...' : 'Pay $99.99'}
      </button>
    </div>
  )
}

Step 4: Create the Charge (Backend)

On your backend, use the token to create a charge:

import { HedgePayments } from '@hedgepayments/node'

const hedge = new HedgePayments({
  apiKey: process.env.HEDGE_API_KEY,
  apiSecret: process.env.HEDGE_API_SECRET
})

app.post('/api/charge', async (req, res) => {
  const { token, amount, currency } = req.body

  try {
    const charge = await hedge.charges.create({
      token,
      amount,
      currency,
      description: 'Order #12345',
      metadata: {
        orderId: '12345',
        customerId: 'cust_abc123'
      }
    })

    res.json({
      success: true,
      chargeId: charge.id,
      status: charge.status
    })
  } catch (error) {
    res.status(400).json({
      success: false,
      error: error.message
    })
  }
})

curl -X POST https://api.hedgepayments.com/v1/charges \
  -H "Authorization: Bearer YOUR_API_SECRET" \
  -H "Content-Type: application/json" \
  -d '{
    "token": "tok_abc123...",
    "amount": 9999,
    "currency": "USD",
    "description": "Order #12345"
  }'

Apple Pay & Google Pay

Enable digital wallet payments with minimal additional configuration:

import { HedgeCardForm, ApplePayButton, GooglePayButton } from '@hedgepayments/react'

function CheckoutPage() {
  const handlePaymentComplete = (result) => {
    console.log('Payment completed:', result)
  }

  return (
    <div className="max-w-md mx-auto">
      {/* Digital Wallet Buttons */}
      <div className="flex gap-4 mb-6">
        <ApplePayButton
          amount={9999}
          currency="USD"
          onComplete={handlePaymentComplete}
          className="flex-1"
        />
        <GooglePayButton
          amount={9999}
          currency="USD"
          onComplete={handlePaymentComplete}
          className="flex-1"
        />
      </div>

      <div className="text-center text-gray-500 my-4">
        — or pay with card —
      </div>

      {/* Card Form */}
      <HedgeCardForm />

      <button className="w-full mt-4 py-3 bg-green-600 text-white rounded">
        Pay $99.99
      </button>
    </div>
  )
}

3D Secure Authentication

3D Secure is automatically enabled for all card transactions. When required, customers will see a verification step from their bank:

const charge = await hedge.charges.create({
  token,
  amount: 9999,
  currency: 'USD',
  // 3D Secure options
  threeDSecure: {
    required: true, // Force 3DS for all transactions
    challengePreference: 'challenge_requested' // or 'no_preference'
  },
  // Return URL after 3DS verification
  returnUrl: 'https://yoursite.com/checkout/complete'
})

Test Cards

Use these test card numbers in sandbox mode:

Use any future expiration date and any 3-digit CVC (4-digit for Amex).