Skip to content

Commit a5ae09f

Browse files
pbennett1-godaddywcole1-godaddy
pbennett1-godaddy
and
wcole1-godaddy
authored
Checkout nextjs example app (#1207)
* enforce new biome length rules * update biome fix rules * fix lock file * Add prepublishOnly hook * Add changeset for small fixes * add nextjs example * set up nextjs example checkout app * next app name * remove old changeset * remove environments * remove session environment * fix type issue for targets --------- Co-authored-by: Wes Cole <[email protected]>
1 parent 0aafb0f commit a5ae09f

File tree

27 files changed

+1130
-45
lines changed

27 files changed

+1130
-45
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,5 @@ schema.graphql
4646

4747
# macOS
4848
.DS_Store
49+
.env
50+
.env.local

‎examples/nextjs/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎examples/nextjs/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

‎examples/nextjs/app/checkout.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
'use client';
2+
3+
import type { CheckoutFormSchema, CheckoutSession } from '@godaddy/react';
4+
import { Checkout, GoDaddyProvider } from '@godaddy/react';
5+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
6+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
7+
import { useState } from 'react';
8+
import { z } from 'zod';
9+
10+
/* Override the checkout form schema to make shippingPhone required */
11+
const customSchema: CheckoutFormSchema = {
12+
shippingPhone: z.string().min(1, 'Phone number is required'),
13+
};
14+
15+
export function CheckoutPage({ session }: { session: CheckoutSession }) {
16+
const [queryClient] = useState(() => new QueryClient());
17+
18+
return (
19+
<QueryClientProvider client={queryClient}>
20+
<GoDaddyProvider>
21+
<Checkout
22+
session={session}
23+
checkoutFormSchema={customSchema}
24+
squareConfig={{
25+
appId: process.env.NEXT_PUBLIC_SQUARE_APP_ID || '',
26+
locationId: process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID || '',
27+
}}
28+
stripeConfig={{
29+
publishableKey:
30+
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '',
31+
}}
32+
godaddyPaymentsConfig={{
33+
businessId: process.env.NEXT_PUBLIC_GODADDY_BUSINESS_ID || '',
34+
appId: process.env.NEXT_PUBLIC_GODADDY_APP_ID || '',
35+
}}
36+
paypalConfig={{
37+
clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID || '',
38+
}}
39+
/>
40+
<ReactQueryDevtools initialIsOpen={false} />
41+
</GoDaddyProvider>
42+
</QueryClientProvider>
43+
);
44+
}

‎examples/nextjs/app/favicon.ico‎

25.3 KB
Binary file not shown.

‎examples/nextjs/app/globals.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@import "tailwindcss";
2+
3+
:root {
4+
--background: #ffffff;
5+
--foreground: #171717;
6+
}
7+
8+
@theme inline {
9+
--color-background: var(--background);
10+
--color-foreground: var(--foreground);
11+
--font-sans: var(--font-geist-sans);
12+
--font-mono: var(--font-geist-mono);
13+
}
14+
15+
@media (prefers-color-scheme: dark) {
16+
:root {
17+
--background: #0a0a0a;
18+
--foreground: #ededed;
19+
}
20+
}
21+
22+
body {
23+
background: var(--background);
24+
color: var(--foreground);
25+
font-family: Arial, Helvetica, sans-serif;
26+
}

‎examples/nextjs/app/layout.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { Metadata } from 'next';
2+
import { Geist, Geist_Mono } from 'next/font/google';
3+
import './globals.css';
4+
import '@godaddy/react/styles.css';
5+
6+
const geistSans = Geist({
7+
variable: '--font-geist-sans',
8+
subsets: ['latin'],
9+
});
10+
11+
const geistMono = Geist_Mono({
12+
variable: '--font-geist-mono',
13+
subsets: ['latin'],
14+
});
15+
16+
export const metadata: Metadata = {
17+
title: 'Unified Checkout NextJS Example',
18+
description: 'An example NextJS application using GoDaddy Unified Checkout',
19+
};
20+
21+
export default function RootLayout({
22+
children,
23+
}: Readonly<{
24+
children: React.ReactNode;
25+
}>) {
26+
return (
27+
<html lang='en'>
28+
<body
29+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30+
>
31+
{children}
32+
</body>
33+
</html>
34+
);
35+
}

‎examples/nextjs/app/page.tsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { createCheckoutSession } from '@godaddy/react/server';
2+
import { unstable_noStore } from 'next/cache';
3+
import { notFound } from 'next/navigation';
4+
import { CheckoutPage } from './checkout';
5+
6+
export const dynamic = 'force-dynamic';
7+
8+
export default async function Home() {
9+
unstable_noStore();
10+
const session = await createCheckoutSession(
11+
{
12+
returnUrl: 'https://godaddy.com',
13+
successUrl: 'https://godaddy.com/success',
14+
draftOrderId: process.env.NEXT_PUBLIC_GODADDY_DRAFT_ORDER_ID || '',
15+
storeId: process.env.NEXT_PUBLIC_GODADDY_STORE_ID || '',
16+
channelId: process.env.NEXT_PUBLIC_GODADDY_CHANNEL_ID || '',
17+
enableLocalPickup: true,
18+
enableShippingAddressCollection: true,
19+
enableBillingAddressCollection: true,
20+
enablePhoneCollection: true,
21+
enableTaxCollection: true,
22+
enableNotesCollection: true,
23+
enablePromotionCodes: true,
24+
shipping: {
25+
fulfillmentLocationId: 'default-location',
26+
originAddress: {
27+
addressLine1: '1600 Pennsylvania Ave NW',
28+
adminArea1: 'DC',
29+
adminArea3: 'Washington',
30+
countryCode: 'US',
31+
postalCode: '20500',
32+
},
33+
},
34+
taxes: {
35+
originAddress: {
36+
addressLine1: '1600 Pennsylvania Ave NW',
37+
adminArea1: 'DC',
38+
adminArea3: 'Washington',
39+
countryCode: 'US',
40+
postalCode: '20500',
41+
},
42+
},
43+
locations: [
44+
{
45+
id: 'default-location',
46+
isDefault: true,
47+
address: {
48+
addressLine1: '1600 Pennsylvania Ave NW',
49+
adminArea1: 'DC',
50+
adminArea3: 'Washington',
51+
countryCode: 'US',
52+
postalCode: '20500',
53+
},
54+
},
55+
],
56+
paymentMethods: {
57+
card: {
58+
processor: 'godaddy',
59+
checkoutTypes: ['standard'],
60+
},
61+
express: {
62+
processor: 'godaddy',
63+
checkoutTypes: ['express'],
64+
},
65+
paypal: {
66+
processor: 'paypal',
67+
checkoutTypes: ['standard'],
68+
},
69+
offline: {
70+
processor: 'offline',
71+
checkoutTypes: ['standard'],
72+
},
73+
},
74+
operatingHours: {
75+
default: {
76+
timeZone: 'America/New_York', // CDT timezone
77+
leadTime: 60, // 60 minutes lead time
78+
pickupWindowInDays: 7,
79+
hours: {
80+
monday: { enabled: true, openTime: '09:00', closeTime: '17:00' },
81+
tuesday: { enabled: true, openTime: '09:00', closeTime: '17:00' },
82+
wednesday: { enabled: false, openTime: null, closeTime: null },
83+
thursday: { enabled: true, openTime: '09:00', closeTime: '17:00' },
84+
friday: { enabled: true, openTime: '09:00', closeTime: '18:00' },
85+
saturday: { enabled: true, openTime: '10:00', closeTime: '16:00' },
86+
sunday: { enabled: true, openTime: '12:00', closeTime: '15:00' },
87+
},
88+
},
89+
},
90+
},
91+
{
92+
auth: {
93+
clientId: process.env.GODADDY_CLIENT_ID || '',
94+
clientSecret: process.env.GODADDY_CLIENT_SECRET || '',
95+
},
96+
}
97+
);
98+
99+
if (!session) {
100+
throw notFound();
101+
}
102+
103+
return <CheckoutPage session={session} />;
104+
}

‎examples/nextjs/biome.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/2.3.2/schema.json",
3+
"extends": ["biome-config-godaddy/biome.json"],
4+
"css": {
5+
"parser": {
6+
"cssModules": true,
7+
"tailwindDirectives": true
8+
}
9+
},
10+
"files": {
11+
"includes": ["**/*", "!!**/src/globals.css"]
12+
},
13+
"linter": {
14+
"rules": {
15+
"correctness": {
16+
"useUniqueElementIds": "off"
17+
}
18+
}
19+
}
20+
}

‎examples/nextjs/env.sample‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# GoDaddy API Credentials
2+
GODADDY_CLIENT_ID=
3+
GODADDY_CLIENT_SECRET=
4+
NEXT_PUBLIC_GODADDY_ENV=prod
5+
NEXT_PUBLIC_GODADDY_HOST=api.godaddy.com
6+
7+
# Store and Order Identifiers
8+
NEXT_PUBLIC_GODADDY_STORE_ID=
9+
NEXT_PUBLIC_GODADDY_CHANNEL_ID=
10+
NEXT_PUBLIC_GODADDY_DRAFT_ORDER_ID=
11+
12+
# Stripe Payment Credentials
13+
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
14+
STRIPE_SECRET=
15+
16+
# GoDaddy Payment Credentials
17+
NEXT_PUBLIC_GODADDY_APP_ID=
18+
#NEXT_PUBLIC_GODADDY_BUSINESS_ID=
19+
20+
# Square Credentials
21+
NEXT_PUBLIC_SQUARE_APP_ID=
22+
NEXT_PUBLIC_SQUARE_LOCATION_ID=
23+
NEXT_PUBLIC_PAYPAL_CLIENT_ID=

0 commit comments

Comments
 (0)