Skip to content

Commit dfa809f

Browse files
yosh1yosh1
committed
Initial commit
1 parent ffd128a commit dfa809f

9 files changed

+211
-77
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,4 @@ yarn-error.log*
3434
# typescript
3535
*.tsbuildinfo
3636
next-env.d.ts
37+
.env

‎components/Payment.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
2+
import { loadStripe } from "@stripe/stripe-js";
3+
4+
const stripePromise = loadStripe(
5+
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string
6+
);
7+
8+
const Payment = () => {
9+
const stripe = useStripe();
10+
const elements = useElements();
11+
return (
12+
<form
13+
onSubmit={async (e) => {
14+
e.preventDefault();
15+
if (!stripe || !elements) return;
16+
await stripe.confirmSetup({
17+
elements,
18+
confirmParams: {
19+
return_url: "http://localhost:3000",
20+
},
21+
});
22+
}}>
23+
<PaymentElement />
24+
<button type='submit'>Submit</button>
25+
</form>
26+
);
27+
};
28+
29+
export default Payment;

‎package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@stripe/react-stripe-js": "^1.16.4",
13+
"@stripe/stripe-js": "^1.46.0",
1214
"next": "13.1.6",
1315
"react": "18.2.0",
14-
"react-dom": "18.2.0"
16+
"react-dom": "18.2.0",
17+
"stripe": "^11.10.0"
1518
},
1619
"devDependencies": {
20+
"@types/react": "^18.0.27",
1721
"eslint": "8.33.0",
18-
"eslint-config-next": "13.1.6"
22+
"eslint-config-next": "13.1.6",
23+
"typescript": "^4.9.5"
1924
}
2025
}

‎pages/api/hello.js

-5
This file was deleted.

‎pages/api/setup-intent.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/** @format */
2+
3+
import Stripe from "stripe";
4+
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
5+
apiVersion: "2022-11-15",
6+
});
7+
8+
export default async function handler(req, res) {
9+
if (req.method.toLocaleLowerCase() !== "post") {
10+
return res.status(405).end();
11+
}
12+
const customer = await stripe.customers.create({
13+
// payment_method: req.body.payment_method,
14+
metadata: {
15+
app_username: req.body.username,
16+
},
17+
});
18+
const response = await stripe.setupIntents.create({
19+
customer: customer.id,
20+
payment_method_types: ["card"],
21+
});
22+
return res.status(200).json({
23+
client_secret: response.client_secret,
24+
customer_id: customer.id,
25+
});
26+
}

‎pages/index.js

-69
This file was deleted.

‎pages/index.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Elements, PaymentElement } from "@stripe/react-stripe-js";
2+
import { loadStripe } from "@stripe/stripe-js";
3+
import React from "react";
4+
import { useEffect, useState } from "react";
5+
import Payment from "../components/Payment";
6+
7+
const stripePromise = loadStripe(
8+
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string
9+
);
10+
11+
const Home = () => {
12+
const [intent, setIntent] = useState(null);
13+
let options;
14+
15+
useEffect(() => {
16+
fetch("/api/setup-intent", {
17+
method: "post",
18+
headers: {
19+
"Content-Type": "application/json",
20+
},
21+
body: JSON.stringify({
22+
customer_id: window.localStorage.getItem("customer_id") || "TEST",
23+
}),
24+
})
25+
.then((res) => res.json())
26+
.then((data) => {
27+
setIntent(data);
28+
if (data.customer_id) {
29+
window.localStorage.setItem("customer_id", data.customer_id);
30+
}
31+
})
32+
.catch((e) => {
33+
console.log(e);
34+
});
35+
}, []);
36+
37+
if (!intent || !intent.client_secret) return <p>loading</p>;
38+
options = {
39+
appearance: {
40+
theme: "stripe",
41+
},
42+
clientSecret: intent.client_secret,
43+
};
44+
return (
45+
<>
46+
<body>
47+
<div style={{ padding: "20px" }}>
48+
<Elements stripe={stripePromise} options={options}>
49+
<Payment />
50+
</Elements>
51+
</div>
52+
</body>
53+
</>
54+
);
55+
};
56+
57+
export default Home;

‎tsconfig.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"compilerOptions": {
3+
"lib": [
4+
"dom",
5+
"dom.iterable",
6+
"esnext"
7+
],
8+
"allowJs": true,
9+
"skipLibCheck": true,
10+
"strict": false,
11+
"forceConsistentCasingInFileNames": true,
12+
"noEmit": true,
13+
"incremental": true,
14+
"esModuleInterop": true,
15+
"module": "esnext",
16+
"moduleResolution": "node",
17+
"resolveJsonModule": true,
18+
"isolatedModules": true,
19+
"jsx": "preserve"
20+
},
21+
"include": [
22+
"next-env.d.ts",
23+
"**/*.ts",
24+
"**/*.tsx"
25+
],
26+
"exclude": [
27+
"node_modules"
28+
]
29+
}

‎yarn.lock

+62-1
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,18 @@
158158
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
159159
integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
160160

161+
"@stripe/react-stripe-js@^1.16.4":
162+
version "1.16.4"
163+
resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.16.4.tgz#d25c9bb93ae2d21d1d5a2d8a275e1e4e2732ba73"
164+
integrity sha512-x+Zstd3mHctNbSATOdbA2rOVXqGhbLU1ziNgcWqYCaFXj2dPKzjkBiUJfDhoARJVXVGOts0oZ8teTkOFY/ZRzQ==
165+
dependencies:
166+
prop-types "^15.7.2"
167+
168+
"@stripe/stripe-js@^1.46.0":
169+
version "1.46.0"
170+
resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.46.0.tgz#2b9acca0dfa7b90aaecd909e678a049f799a27d6"
171+
integrity sha512-dkm0zCEoRLu5rTnsIgwDf/QG2DKcalOT2dk1IVgMySOHWTChLyOvQwMYhEduGgLvyYWTwNhAUV4WOLPQvjwLwA==
172+
161173
"@swc/helpers@0.4.14":
162174
version "0.4.14"
163175
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
@@ -170,6 +182,30 @@
170182
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
171183
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
172184

185+
"@types/node@>=8.1.0":
186+
version "18.13.0"
187+
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.13.0.tgz#0400d1e6ce87e9d3032c19eb6c58205b0d3f7850"
188+
integrity sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==
189+
190+
"@types/prop-types@*":
191+
version "15.7.5"
192+
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
193+
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
194+
195+
"@types/react@^18.0.27":
196+
version "18.0.27"
197+
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.27.tgz#d9425abe187a00f8a5ec182b010d4fd9da703b71"
198+
integrity sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==
199+
dependencies:
200+
"@types/prop-types" "*"
201+
"@types/scheduler" "*"
202+
csstype "^3.0.2"
203+
204+
"@types/scheduler@*":
205+
version "0.16.2"
206+
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
207+
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
208+
173209
"@typescript-eslint/parser@^5.42.0":
174210
version "5.51.0"
175211
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.51.0.tgz#2d74626652096d966ef107f44b9479f02f51f271"
@@ -404,6 +440,11 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
404440
shebang-command "^2.0.0"
405441
which "^2.0.1"
406442

443+
csstype@^3.0.2:
444+
version "3.1.1"
445+
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
446+
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
447+
407448
damerau-levenshtein@^1.0.8:
408449
version "1.0.8"
409450
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -1604,7 +1645,7 @@ prelude-ls@^1.2.1:
16041645
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
16051646
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
16061647

1607-
prop-types@^15.8.1:
1648+
prop-types@^15.7.2, prop-types@^15.8.1:
16081649
version "15.8.1"
16091650
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
16101651
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1618,6 +1659,13 @@ punycode@^2.1.0:
16181659
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
16191660
integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
16201661

1662+
qs@^6.11.0:
1663+
version "6.11.0"
1664+
resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
1665+
integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
1666+
dependencies:
1667+
side-channel "^1.0.4"
1668+
16211669
queue-microtask@^1.2.2:
16221670
version "1.2.3"
16231671
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -1824,6 +1872,14 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
18241872
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
18251873
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
18261874

1875+
stripe@^11.10.0:
1876+
version "11.10.0"
1877+
resolved "https://registry.yarnpkg.com/stripe/-/stripe-11.10.0.tgz#f9f9012e9d78da2734d6ea87cc27e1d62a72487d"
1878+
integrity sha512-uzQuj/Vangpp8fgkaEr6oRNfPToo5xamOhc7wxFGF/RUm7VKm/IGzoZ0cCtnGHCs5/O1AjMQsTZApgUARRVHOw==
1879+
dependencies:
1880+
"@types/node" ">=8.1.0"
1881+
qs "^6.11.0"
1882+
18271883
styled-jsx@5.1.1:
18281884
version "5.1.1"
18291885
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
@@ -1924,6 +1980,11 @@ typed-array-length@^1.0.4:
19241980
for-each "^0.3.3"
19251981
is-typed-array "^1.1.9"
19261982

1983+
typescript@^4.9.5:
1984+
version "4.9.5"
1985+
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
1986+
integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
1987+
19271988
unbox-primitive@^1.0.2:
19281989
version "1.0.2"
19291990
resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"

0 commit comments

Comments
 (0)