2 | >
3 | > This project is deprecated and is no longer being actively maintained.
4 | >
5 | > Please see the [accept a payment](https://github.com/stripe-samples/accept-a-payment) sample showing how to accept Card payments and more payment method types with React Stripe.js.
6 |
7 | # Card Payment using React
8 |
9 | This sample shows how to build a card form to take a payment using the [Payment Intents API](https://stripe.com/docs/payments/payment-intents), [Stripe Elements](https://stripe.com/payments/elements) and [React](https://reactjs.org/).
10 |
11 | See a hosted version of the [demo](https://rl6zb.sse.codesandbox.io/) in test mode or [fork on codesandbox.io](https://codesandbox.io/s/github/stripe-samples/react-elements-card-payment/tree/codesandbox)
12 |
13 | 
14 |
15 | ## Features
16 |
17 | This sample consists of a `client` in React and a `server` piece available in 5 common languages.
18 |
19 | The client is implemented using `create-react-app` to provide the boilerplate for React. Stripe Elements is integrated using [`react-stripe-js`](https://github.com/stripe/react-stripe-js), which is the official React library provided by Stripe.
20 |
21 | The server includes [5 server implementations](server/README.md) in Node, Ruby, Python, Java, and PHP in the [/server](/server) directory. We included several RESTful server implementations, each with the same endpoints and logic.
22 |
23 | ## How to run locally
24 |
25 | To run this sample locally you need to start both a local dev server for the `front-end` and another server for the `back-end`.
26 |
27 | You will need a Stripe account with its own set of [API keys](https://stripe.com/docs/development#api-keys).
28 |
29 | Follow the steps below to run locally.
30 |
31 | **1. Clone and configure the sample**
32 |
33 | The Stripe CLI is the fastest way to clone and configure a sample to run locally.
34 |
35 | **Using the Stripe CLI**
36 |
37 | If you haven't already installed the CLI, follow the [installation steps](https://github.com/stripe/stripe-cli#installation) in the project README. The CLI is useful for cloning samples and locally testing webhooks and Stripe integrations.
38 |
39 | In your terminal shell, run the Stripe CLI command to clone the sample:
40 |
41 | ```
42 | stripe samples create react-elements-card-payment
43 | ```
44 |
45 | The CLI will walk you through picking your integration type, server and client languages, and configuring your .env config file with your Stripe API keys.
46 |
47 | **Installing and cloning manually**
48 |
49 | If you do not want to use the Stripe CLI, you can manually clone and configure the sample yourself:
50 |
51 | ```
52 | git clone https://github.com/stripe-samples/react-elements-card-payment
53 | ```
54 |
55 | Copy the .env.example file into a file named .env in the folder of the server you want to use. For example:
56 |
57 | ```
58 | cp .env.example server/node/.env
59 | ```
60 |
61 | You will need a Stripe account in order to run the demo. Once you set up your account, go to the Stripe [developer dashboard](https://stripe.com/docs/development/quickstart#api-keys) to find your API keys.
62 |
63 | ```
64 | STRIPE_PUBLISHABLE_KEY=
16 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/client/src/api.js:
--------------------------------------------------------------------------------
1 | const createPaymentIntent = options => {
2 | return window
3 | .fetch(`/create-payment-intent`, {
4 | method: "POST",
5 | headers: {
6 | "Content-Type": "application/json"
7 | },
8 | body: JSON.stringify(options)
9 | })
10 | .then(res => {
11 | if (res.status === 200) {
12 | return res.json();
13 | } else {
14 | return null;
15 | }
16 | })
17 | .then(data => {
18 | if (!data || data.error) {
19 | console.log("API error:", { data });
20 | throw new Error("PaymentIntent API Error");
21 | } else {
22 | return data.client_secret;
23 | }
24 | });
25 | };
26 |
27 | const getProductDetails = options => {
28 | return window
29 | .fetch(`/product-details`, {
30 | method: "GET",
31 | headers: {
32 | "Content-Type": "application/json"
33 | }
34 | })
35 | .then(res => {
36 | if (res.status === 200) {
37 | return res.json();
38 | } else {
39 | return null;
40 | }
41 | })
42 | .then(data => {
43 | if (!data || data.error) {
44 | console.log("API error:", { data });
45 | throw Error("API Error");
46 | } else {
47 | return data;
48 | }
49 | });
50 | };
51 |
52 | const getPublicStripeKey = options => {
53 | return window
54 | .fetch(`/public-key`, {
55 | method: "GET",
56 | headers: {
57 | "Content-Type": "application/json"
58 | }
59 | })
60 | .then(res => {
61 | if (res.status === 200) {
62 | return res.json();
63 | } else {
64 | return null;
65 | }
66 | })
67 | .then(data => {
68 | if (!data || data.error) {
69 | console.log("API error:", { data });
70 | throw Error("API Error");
71 | } else {
72 | return data.publicKey;
73 | }
74 | });
75 | };
76 |
77 | const api = {
78 | createPaymentIntent,
79 | getPublicStripeKey: getPublicStripeKey,
80 | getProductDetails: getProductDetails
81 | };
82 |
83 | export default api;
84 |
--------------------------------------------------------------------------------
/client/src/components/CheckoutForm.css:
--------------------------------------------------------------------------------
1 | .sr-combo-inputs {
2 | margin: 20px 0;
3 | }
4 |
5 | .sr-input {
6 | font-size: 16px;
7 | }
8 |
9 | .sr-card-element {
10 | padding-top: 12px;
11 | }
12 |
13 | .btn {
14 | font-size: 16px;
15 | }
16 |
--------------------------------------------------------------------------------
/client/src/components/CheckoutForm.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
3 | import "./CheckoutForm.css";
4 | import api from "../api";
5 |
6 | export default function CheckoutForm() {
7 | const [amount, setAmount] = useState(0);
8 | const [currency, setCurrency] = useState("");
9 | const [clientSecret, setClientSecret] = useState(null);
10 | const [error, setError] = useState(null);
11 | const [metadata, setMetadata] = useState(null);
12 | const [succeeded, setSucceeded] = useState(false);
13 | const [processing, setProcessing] = useState(false);
14 | const stripe = useStripe();
15 | const elements = useElements();
16 |
17 | useEffect(() => {
18 | // Step 1: Fetch product details such as amount and currency from
19 | // API to make sure it can't be tampered with in the client.
20 | api.getProductDetails().then((productDetails) => {
21 | setAmount(productDetails.amount / 100);
22 | setCurrency(productDetails.currency);
23 | });
24 |
25 | // Step 2: Create PaymentIntent over Stripe API
26 | api
27 | .createPaymentIntent()
28 | .then((clientSecret) => {
29 | setClientSecret(clientSecret);
30 | })
31 | .catch((err) => {
32 | setError(err.message);
33 | });
34 | }, []);
35 |
36 | const handleSubmit = async (ev) => {
37 | ev.preventDefault();
38 | setProcessing(true);
39 |
40 | // Step 3: Use clientSecret from PaymentIntent and the CardElement
41 | // to confirm payment with stripe.confirmCardPayment()
42 | const payload = await stripe.confirmCardPayment(clientSecret, {
43 | payment_method: {
44 | card: elements.getElement(CardElement),
45 | billing_details: {
46 | name: ev.target.name.value,
47 | },
48 | },
49 | });
50 |
51 | if (payload.error) {
52 | setError(`Payment failed: ${payload.error.message}`);
53 | setProcessing(false);
54 | console.log("[error]", payload.error);
55 | } else {
56 | setError(null);
57 | setSucceeded(true);
58 | setProcessing(false);
59 | setMetadata(payload.paymentIntent);
60 | console.log("[PaymentIntent]", payload.paymentIntent);
61 | }
62 | };
63 |
64 | const renderSuccess = () => {
65 | return (
66 |
17 |
55 |
18 |
19 |
20 |
21 |
22 |
24 |
25 |
26 |
27 |
54 |
28 | 
34 | 
40 | 
46 | 
52 |
53 |
67 |
73 | );
74 | };
75 |
76 | const renderForm = () => {
77 | const options = {
78 | style: {
79 | base: {
80 | color: "#32325d",
81 | fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
82 | fontSmoothing: "antialiased",
83 | fontSize: "16px",
84 | "::placeholder": {
85 | color: "#aab7c4",
86 | },
87 | },
88 | invalid: {
89 | color: "#fa755a",
90 | iconColor: "#fa755a",
91 | },
92 | },
93 | };
94 |
95 | return (
96 |
134 | );
135 | };
136 |
137 | return (
138 | Your test payment succeeded
68 |View PaymentIntent response:
69 |
70 | {JSON.stringify(metadata, null, 2)}
71 |
72 |
139 |
144 | );
145 | }
146 |
--------------------------------------------------------------------------------
/client/src/components/DemoText.css:
--------------------------------------------------------------------------------
1 | .banner {
2 | max-width: 825px;
3 | margin: 0 auto;
4 | padding: 0 22px;
5 | font-size: 14px;
6 | background: white;
7 | color: #6a7c94;
8 | border-radius: 22px;
9 | box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
10 | display: flex;
11 | align-items: center;
12 | box-sizing: border-box;
13 | padding: 10px;
14 | }
15 |
--------------------------------------------------------------------------------
/client/src/components/DemoText.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./DemoText.css";
3 |
4 | export default function DemoText() {
5 | return (
6 |
140 |
141 | {succeeded ? renderSuccess() : renderForm()}
142 |
143 |
7 |
8 | This is a{" "}
9 | Stripe Sample on how
10 | to build a payment form in React to accept card payments.{" "}
11 |
12 | View code on GitHub.
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
1 | /* Variables */
2 | :root {
3 | --gray-offset: rgba(0, 0, 0, 0.03);
4 | --gray-border: rgba(0, 0, 0, 0.15);
5 | --gray-light: rgba(0, 0, 0, 0.4);
6 | --gray-mid: rgba(0, 0, 0, 0.7);
7 | --gray-dark: rgba(0, 0, 0, 0.9);
8 | --body-color: var(--gray-mid);
9 | --headline-color: var(--gray-dark);
10 | --accent-color: #0066f0;
11 | --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
12 | --radius: 6px;
13 | --logo-image: url("https://storage.googleapis.com/stripe-sample-images/KAVHOLM.svg");
14 | --form-width: 343px;
15 | }
16 |
17 | /* Base */
18 | * {
19 | box-sizing: border-box;
20 | }
21 | body {
22 | font-family: var(--body-font-family);
23 | font-size: 16px;
24 | color: var(--body-color);
25 | -webkit-font-smoothing: antialiased;
26 | }
27 | h1,
28 | h2,
29 | h3,
30 | h4,
31 | h5,
32 | h6 {
33 | color: var(--body-color);
34 | margin-top: 2px;
35 | margin-bottom: 4px;
36 | }
37 | h1 {
38 | font-size: 27px;
39 | color: var(--headline-color);
40 | line-height: 30px;
41 | }
42 | h4 {
43 | font-weight: 500;
44 | font-size: 14px;
45 | color: var(--gray-light);
46 | }
47 |
48 | /* Layout */
49 | .App {
50 | min-height: 100vh;
51 | display: flex;
52 | flex-direction: column;
53 | justify-content: center;
54 | }
55 | .sr-root {
56 | display: flex;
57 | flex-direction: row;
58 | width: 100%;
59 | max-width: 980px;
60 | padding: 48px;
61 | align-content: center;
62 | justify-content: center;
63 | height: auto;
64 | margin: 0 auto;
65 | }
66 | .sr-header {
67 | margin-bottom: 32px;
68 | }
69 | .sr-payment-summary {
70 | margin-bottom: 20px;
71 | }
72 | .sr-main,
73 | .sr-content {
74 | display: flex;
75 | flex-direction: column;
76 | justify-content: center;
77 | height: 100%;
78 | align-self: center;
79 | }
80 | .sr-main {
81 | width: var(--form-width);
82 | }
83 | .sr-content {
84 | padding-left: 48px;
85 | }
86 | .sr-header__logo {
87 | background-image: var(--logo-image);
88 | height: 24px;
89 | background-size: contain;
90 | background-repeat: no-repeat;
91 | width: 100%;
92 | }
93 | .sr-legal-text {
94 | color: var(--gray-light);
95 | text-align: center;
96 | font-size: 13px;
97 | line-height: 17px;
98 | margin-top: 12px;
99 | }
100 | .sr-field-error {
101 | color: var(--accent-color);
102 | text-align: left;
103 | font-size: 13px;
104 | line-height: 17px;
105 | margin-top: 12px;
106 | }
107 |
108 | .sr-field-success {
109 | text-align: left;
110 | font-size: 13px;
111 | line-height: 17px;
112 | margin-top: 12px;
113 | }
114 |
115 | /* Form */
116 | .sr-form-row {
117 | margin: 16px 0;
118 | }
119 | label {
120 | font-size: 13px;
121 | font-weight: 500;
122 | margin-bottom: 8px;
123 | display: inline-block;
124 | }
125 |
126 | /* Inputs */
127 | .sr-input,
128 | .sr-select,
129 | input[type="text"] {
130 | border: 1px solid var(--gray-border);
131 | border-radius: var(--radius);
132 | padding: 5px 12px;
133 | height: 44px;
134 | width: 100%;
135 | transition: box-shadow 0.2s ease;
136 | background: white;
137 | -moz-appearance: none;
138 | -webkit-appearance: none;
139 | appearance: none;
140 | color: #32325d;
141 | }
142 | .sr-input:focus,
143 | .StripeElement--focus,
144 | input[type="text"]:focus,
145 | button:focus,
146 | .focused {
147 | box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),
148 | 0 0 0 4px rgba(50, 151, 211, 0.3);
149 | outline: none;
150 | z-index: 9;
151 | }
152 | .sr-input::placeholder,
153 | input[type="text"]::placeholder {
154 | color: var(--gray-light);
155 | }
156 |
157 | /* Checkbox */
158 | .sr-checkbox-label {
159 | position: relative;
160 | cursor: pointer;
161 | }
162 |
163 | .sr-checkbox-label input {
164 | opacity: 0;
165 | margin-right: 6px;
166 | }
167 |
168 | .sr-checkbox-label .sr-checkbox-check {
169 | position: absolute;
170 | left: 0;
171 | height: 16px;
172 | width: 16px;
173 | background-color: white;
174 | border: 1px solid var(--gray-border);
175 | border-radius: 4px;
176 | transition: all 0.2s ease;
177 | }
178 |
179 | .sr-checkbox-label input:focus ~ .sr-checkbox-check {
180 | box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),
181 | 0 0 0 4px rgba(50, 151, 211, 0.3);
182 | outline: none;
183 | }
184 |
185 | .sr-checkbox-label input:checked ~ .sr-checkbox-check {
186 | background-color: var(--accent-color);
187 | background-image: url("https://storage.googleapis.com/stripe-sample-images/icon-checkmark.svg");
188 | background-repeat: no-repeat;
189 | background-size: 16px;
190 | background-position: -1px -1px;
191 | }
192 |
193 | /* Select */
194 | .sr-select {
195 | display: block;
196 | height: 44px;
197 | margin: 0;
198 | background-image: url("https://storage.googleapis.com/stripe-sample-images/icon-chevron-down.svg");
199 | background-repeat: no-repeat, repeat;
200 | background-position: right 12px top 50%, 0 0;
201 | background-size: 0.65em auto, 100%;
202 | }
203 | .sr-select:after {
204 | }
205 | .sr-select::-ms-expand {
206 | display: none;
207 | }
208 | .sr-select:hover {
209 | cursor: pointer;
210 | }
211 | .sr-select:focus {
212 | box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),
213 | 0 0 0 4px rgba(50, 151, 211, 0.3);
214 | outline: none;
215 | }
216 | .sr-select option {
217 | font-weight: 400;
218 | }
219 | .sr-select:invalid {
220 | color: var(--gray-light);
221 | background-opacity: 0.4;
222 | }
223 |
224 | /* Combo inputs */
225 | .sr-combo-inputs {
226 | display: flex;
227 | flex-direction: column;
228 | }
229 | .sr-combo-inputs input,
230 | .sr-combo-inputs .sr-select {
231 | border-radius: 0;
232 | border-bottom: 0;
233 | }
234 | .sr-combo-inputs > input:first-child,
235 | .sr-combo-inputs > .sr-select:first-child {
236 | border-radius: var(--radius) var(--radius) 0 0;
237 | }
238 | .sr-combo-inputs > input:last-child,
239 | .sr-combo-inputs > .sr-select:last-child {
240 | border-radius: 0 0 var(--radius) var(--radius);
241 | border-bottom: 1px solid var(--gray-border);
242 | }
243 | .sr-combo-inputs > .sr-combo-inputs-row:last-child input:first-child {
244 | border-radius: 0 0 0 var(--radius);
245 | border-bottom: 1px solid var(--gray-border);
246 | }
247 | .sr-combo-inputs > .sr-combo-inputs-row:last-child input:last-child {
248 | border-radius: 0 0 var(--radius) 0;
249 | border-bottom: 1px solid var(--gray-border);
250 | }
251 | .sr-combo-inputs > .sr-combo-inputs-row:first-child input:first-child {
252 | border-radius: var(--radius) 0 0 0;
253 | }
254 | .sr-combo-inputs > .sr-combo-inputs-row:first-child input:last-child {
255 | border-radius: 0 var(--radius) 0 0;
256 | }
257 | .sr-combo-inputs > .sr-combo-inputs-row:first-child input:only-child {
258 | border-radius: var(--radius) var(--radius) 0 0;
259 | }
260 | .sr-combo-inputs-row {
261 | width: 100%;
262 | display: flex;
263 | }
264 |
265 | .sr-combo-inputs-row > input {
266 | width: 100%;
267 | border-radius: 0;
268 | }
269 |
270 | .sr-combo-inputs-row > input:first-child:not(:only-child) {
271 | border-right: 0;
272 | }
273 |
274 | .sr-combo-inputs-row:not(:first-of-type) .sr-input {
275 | border-radius: 0 0 var(--radius) var(--radius);
276 | }
277 |
278 | /* Buttons and links */
279 | button {
280 | background: var(--accent-color);
281 | border-radius: var(--radius);
282 | color: white;
283 | border: 0;
284 | padding: 12px 16px;
285 | margin-top: 16px;
286 | font-weight: 600;
287 | cursor: pointer;
288 | transition: all 0.2s ease;
289 | display: block;
290 | }
291 | button:hover {
292 | filter: contrast(115%);
293 | }
294 | button:active {
295 | transform: translateY(0px) scale(0.98);
296 | filter: brightness(0.9);
297 | }
298 | button:disabled {
299 | opacity: 0.5;
300 | cursor: none;
301 | }
302 |
303 | .sr-payment-form button,
304 | .fullwidth {
305 | width: 100%;
306 | }
307 |
308 | a {
309 | color: var(--accent-color);
310 | text-decoration: none;
311 | transition: all 0.2s ease;
312 | }
313 |
314 | a:hover {
315 | filter: brightness(0.8);
316 | }
317 |
318 | a:active {
319 | filter: brightness(0.5);
320 | }
321 |
322 | /* Code block */
323 | .sr-callout {
324 | background: var(--gray-offset);
325 | padding: 12px;
326 | border-radius: var(--radius);
327 | max-height: 200px;
328 | overflow: auto;
329 | }
330 | code,
331 | pre {
332 | font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace;
333 | font-size: 12px;
334 | }
335 |
336 | /* todo: spinner/processing state, errors, animations */
337 |
338 | .spinner,
339 | .spinner:before,
340 | .spinner:after {
341 | border-radius: 50%;
342 | }
343 | .spinner {
344 | color: #ffffff;
345 | font-size: 22px;
346 | text-indent: -99999px;
347 | margin: 0px auto;
348 | position: relative;
349 | width: 20px;
350 | height: 20px;
351 | box-shadow: inset 0 0 0 2px;
352 | -webkit-transform: translateZ(0);
353 | -ms-transform: translateZ(0);
354 | transform: translateZ(0);
355 | }
356 | .spinner:before,
357 | .spinner:after {
358 | position: absolute;
359 | content: "";
360 | }
361 | .spinner:before {
362 | width: 10.4px;
363 | height: 20.4px;
364 | background: var(--accent-color);
365 | border-radius: 20.4px 0 0 20.4px;
366 | top: -0.2px;
367 | left: -0.2px;
368 | -webkit-transform-origin: 10.4px 10.2px;
369 | transform-origin: 10.4px 10.2px;
370 | -webkit-animation: loading 2s infinite ease 1.5s;
371 | animation: loading 2s infinite ease 1.5s;
372 | }
373 | .spinner:after {
374 | width: 10.4px;
375 | height: 10.2px;
376 | background: var(--accent-color);
377 | border-radius: 0 10.2px 10.2px 0;
378 | top: -0.1px;
379 | left: 10.2px;
380 | -webkit-transform-origin: 0px 10.2px;
381 | transform-origin: 0px 10.2px;
382 | -webkit-animation: loading 2s infinite ease;
383 | animation: loading 2s infinite ease;
384 | }
385 |
386 | @-webkit-keyframes loading {
387 | 0% {
388 | -webkit-transform: rotate(0deg);
389 | transform: rotate(0deg);
390 | }
391 | 100% {
392 | -webkit-transform: rotate(360deg);
393 | transform: rotate(360deg);
394 | }
395 | }
396 |
397 | @keyframes loading {
398 | 0% {
399 | -webkit-transform: rotate(0deg);
400 | transform: rotate(0deg);
401 | }
402 | 100% {
403 | -webkit-transform: rotate(360deg);
404 | transform: rotate(360deg);
405 | }
406 | }
407 |
408 | /* Animated form */
409 |
410 | .sr-root {
411 | animation: 0.4s form-in;
412 | animation-fill-mode: both;
413 | animation-timing-function: ease;
414 | }
415 |
416 | .sr-payment-form .sr-form-row {
417 | animation: 0.4s field-in;
418 | animation-fill-mode: both;
419 | animation-timing-function: ease;
420 | transform-origin: 50% 0%;
421 | }
422 |
423 | /* need saas for loop :D */
424 | .sr-payment-form .sr-form-row:nth-child(1) {
425 | animation-delay: 0;
426 | }
427 | .sr-payment-form .sr-form-row:nth-child(2) {
428 | animation-delay: 60ms;
429 | }
430 | .sr-payment-form .sr-form-row:nth-child(3) {
431 | animation-delay: 120ms;
432 | }
433 | .sr-payment-form .sr-form-row:nth-child(4) {
434 | animation-delay: 180ms;
435 | }
436 | .sr-payment-form .sr-form-row:nth-child(5) {
437 | animation-delay: 240ms;
438 | }
439 | .sr-payment-form .sr-form-row:nth-child(6) {
440 | animation-delay: 300ms;
441 | }
442 |
443 | .hidden {
444 | display: none;
445 | }
446 |
447 | @keyframes field-in {
448 | 0% {
449 | opacity: 0;
450 | transform: translateY(8px) scale(0.95);
451 | }
452 | 100% {
453 | opacity: 1;
454 | transform: translateY(0px) scale(1);
455 | }
456 | }
457 |
458 | @keyframes form-in {
459 | 0% {
460 | opacity: 0;
461 | transform: scale(0.98);
462 | }
463 | 100% {
464 | opacity: 1;
465 | transform: scale(1);
466 | }
467 | }
468 |
469 | /* Responsiveness */
470 | @media (max-width: 720px) {
471 | .sr-root {
472 | flex-direction: column;
473 | justify-content: flex-start;
474 | padding: 48px 20px;
475 | min-width: 320px;
476 | }
477 |
478 | .sr-header__logo {
479 | background-position: center;
480 | }
481 |
482 | .sr-payment-summary {
483 | text-align: center;
484 | }
485 |
486 | .sr-content {
487 | display: none;
488 | }
489 |
490 | .sr-main {
491 | margin-top: 120px;
492 | width: 100%;
493 | }
494 | }
495 |
--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 |
6 | ReactDOM.render(