How to Integrate Bolt.new with Braintree

1# .env — Braintree sandbox credentials
2# Find in Braintree Control Panel → Account → API Keys
3BRAINTREE_MERCHANT_ID=your_merchant_id
4BRAINTREE_PUBLIC_KEY=your_public_key
5BRAINTREE_PRIVATE_KEY=your_private_key
6BRAINTREE_ENVIRONMENT=sandbox
7
8# For Next.js server-side: process.env.BRAINTREE_PRIVATE_KEY
9# For production, change BRAINTREE_ENVIRONMENT to 'production'
10# and replace all three keys with production credentials

1// app/api/braintree/client-token/route.ts
2import { NextResponse } from 'next/server';
3import braintree from 'braintree';
4
5function getGateway() {
6  const environment = process.env.BRAINTREE_ENVIRONMENT === 'production'
7    ? braintree.Environment.Production
8    : braintree.Environment.Sandbox;
9
10  return new braintree.BraintreeGateway({
11    environment,
12    merchantId: process.env.BRAINTREE_MERCHANT_ID!,
13    publicKey: process.env.BRAINTREE_PUBLIC_KEY!,
14    privateKey: process.env.BRAINTREE_PRIVATE_KEY!,
15  });
16}
17
18export async function POST(request: Request) {
19  const gateway = getGateway();
20
21  // Optional: pass customerId to show saved payment methods
22  const body = await request.json().catch(() => ({}));
23  const generateParams = body.customerId
24    ? { customerId: body.customerId }
25    : {};
26
27  const response = await gateway.clientToken.generate(generateParams);
28
29  if (!response.success) {
30    return NextResponse.json(
31      { error: 'Failed to generate client token' },
32      { status: 500 }
33    );
34  }
35
36  return NextResponse.json({ clientToken: response.clientToken });
37}

1// components/BraintreeCheckout.tsx
2'use client';
3import { useEffect, useRef, useState } from 'react';
4import type { Dropin } from 'braintree-web-drop-in';
5
6interface BraintreeCheckoutProps {
7  amount: string; // e.g. '29.99'
8  onSuccess: (transactionId: string) => void;
9}
10
11export function BraintreeCheckout({ amount, onSuccess }: BraintreeCheckoutProps) {
12  const dropinInstanceRef = useRef<Dropin | null>(null);
13  const [loading, setLoading] = useState(true);
14  const [processing, setProcessing] = useState(false);
15  const [error, setError] = useState<string | null>(null);
16
17  useEffect(() => {
18    let mounted = true;
19
20    async function initDropin() {
21      // Fetch client token from server
22      const tokenRes = await fetch('/api/braintree/client-token', {
23        method: 'POST',
24        headers: { 'Content-Type': 'application/json' },
25        body: JSON.stringify({}),
26      });
27      const { clientToken } = await tokenRes.json();
28
29      // Dynamically import to avoid SSR issues
30      const dropin = await import('braintree-web-drop-in');
31
32      if (!mounted) return;
33
34      const instance = await dropin.default.create({
35        authorization: clientToken,
36        container: '#dropin-container',
37        paypal: { flow: 'checkout', amount, currency: 'USD' },
38      });
39
40      dropinInstanceRef.current = instance;
41      setLoading(false);
42    }
43
44    initDropin().catch((err) => {
45      setError('Failed to load payment form');
46      setLoading(false);
47    });
48
49    return () => { mounted = false; };
50  }, [amount]);
51
52  async function handleSubmit() {
53    if (!dropinInstanceRef.current) return;
54    setProcessing(true);
55    setError(null);
56
57    const { nonce } = await dropinInstanceRef.current.requestPaymentMethod();
58
59    const checkoutRes = await fetch('/api/braintree/checkout', {
60      method: 'POST',
61      headers: { 'Content-Type': 'application/json' },
62      body: JSON.stringify({ nonce, amount }),
63    });
64
65    const result = await checkoutRes.json();
66
67    if (result.success) {
68      onSuccess(result.transactionId);
69    } else {
70      setError(result.error ?? 'Payment failed');
71      setProcessing(false);
72    }
73  }
74
75  return (
76    <div className="max-w-md mx-auto">
77      {loading && <p className="text-gray-500 text-center py-8">Loading payment form...</p>}
78      <div id="dropin-container" />
79      {error && <p className="text-red-600 text-sm mt-2">{error}</p>}
80      {!loading && (
81        <button
82          onClick={handleSubmit}
83          disabled={processing}
84          className="w-full mt-4 bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50"
85        >
86          {processing ? 'Processing...' : `Pay $${amount}`}
87        </button>
88      )}
89    </div>
90  );
91}

1// app/api/braintree/checkout/route.ts
2import { NextResponse } from 'next/server';
3import braintree from 'braintree';
4
5const gateway = new braintree.BraintreeGateway({
6  environment: process.env.BRAINTREE_ENVIRONMENT === 'production'
7    ? braintree.Environment.Production
8    : braintree.Environment.Sandbox,
9  merchantId: process.env.BRAINTREE_MERCHANT_ID!,
10  publicKey: process.env.BRAINTREE_PUBLIC_KEY!,
11  privateKey: process.env.BRAINTREE_PRIVATE_KEY!,
12});
13
14export async function POST(request: Request) {
15  const { nonce, amount } = await request.json();
16
17  const result = await gateway.transaction.sale({
18    amount,
19    paymentMethodNonce: nonce,
20    options: {
21      submitForSettlement: true,
22    },
23  });
24
25  if (result.success) {
26    return NextResponse.json({
27      success: true,
28      transactionId: result.transaction.id,
29      status: result.transaction.status,
30    });
31  }
32
33  // Extract validation errors
34  const errorMessage = result.errors?.deepErrors()?.[0]?.message
35    ?? result.message
36    ?? 'Transaction failed';
37
38  return NextResponse.json({ success: false, error: errorMessage }, { status: 400 });
39}