Skip to content

Commit

Permalink
add api route to Playground for Pay
Browse files Browse the repository at this point in the history
  • Loading branch information
0xAlec committed Sep 9, 2024
1 parent a91ecf8 commit e9eb0fc
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 7 deletions.
37 changes: 37 additions & 0 deletions playground/nextjs-app-router/app/api/createCharge/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
import axios from 'axios';
import { NextResponse } from 'next/server';

type CommerceCharge = {
data: {
id: string;
};
};

export async function POST() {
// Generates a chargeId
try {
const response = await axios.post<CommerceCharge>(
'https://api.commerce.coinbase.com/charges/',
{
name: 'Test Charge',
description: 'Test Charge Description',
pricing_type: 'fixed_price',
local_price: {
amount: '0.01',
currency: 'USD',
},
},
{
headers: {
'Content-Type': 'application/json',
'X-CC-Api-Key': ENVIRONMENT_VARIABLES[ENVIRONMENT.COMMERCE_API_KEY],
},
},
);
return NextResponse.json({ id: response.data.data.id }, { status: 200 });
} catch (error) {
console.error(error);
}
return NextResponse.json({ status: 500 });
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
'use client';
import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { ReactNode } from 'react';
import { http, createConfig } from 'wagmi';
Expand Down
40 changes: 33 additions & 7 deletions playground/nextjs-app-router/components/demo/Pay.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,43 @@
import { useContext } from 'react';
import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
import { useCallback, useContext, useEffect, useState } from 'react';
import { Pay, PayButton } from '../../onchainkit/src/pay';
import { AppContext } from '../AppProvider';

function PayComponent() {
const { chainId } = useContext(AppContext);
const [chargeId, setChargeId] = useState(null);

const handleOnStatus = useCallback((status) => {
console.log('Playground.Pay.onStatus:', status);
}, []);

const createCharge = useCallback(async () => {
const res = await fetch(
`${ENVIRONMENT_VARIABLES[ENVIRONMENT.API_URL]}/api/createCharge`,
{
method: 'POST',
}
);
const data = await res.json();
console.log('Charge id', data.id);
setChargeId(data.id);
}, []);

useEffect(() => {
createCharge();
}, [createCharge]);

return (
<Pay
chainId={chainId || 8453}
chargeId={'78fad9aa-52d9-4f56-af31-5719e37b1695'}
>
<PayButton />
</Pay>
chargeId && (
<Pay
key={chargeId}
chainId={chainId || 8453}
chargeId={chargeId}
onStatus={handleOnStatus}
>
<PayButton />
</Pay>
)
);
}

Expand Down
7 changes: 7 additions & 0 deletions playground/nextjs-app-router/lib/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export const deployedContracts: Record<number, { click: Address }> = {

export const ENVIRONMENT = {
API_KEY: 'API_KEY',
API_URL: 'API_URL',
COMMERCE_API_KEY: 'COMMERCE_API_KEY',
ENVIRONMENT: 'ENVIRONMENT',
} as const;

Expand All @@ -19,5 +21,10 @@ type EnvironmentKey = (typeof ENVIRONMENT)[keyof typeof ENVIRONMENT];
export const ENVIRONMENT_VARIABLES: Record<EnvironmentKey, string | undefined> =
{
[ENVIRONMENT.API_KEY]: process.env.NEXT_PUBLIC_OCK_API_KEY,
[ENVIRONMENT.API_URL]: process.env.NEXT_PUBLIC_VERCEL_URL
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
: 'http://localhost:3000',
[ENVIRONMENT.COMMERCE_API_KEY]:
process.env.NEXT_PUBLIC_COINBASE_COMMERCE_API_KEY,
[ENVIRONMENT.ENVIRONMENT]: process.env.NEXT_PUBLIC_VERCEL_ENV,
};

0 comments on commit e9eb0fc

Please sign in to comment.