Ch&agrave;o mừng bạn đến với Kh&oacute;a học ReactJS từ cơ bản đến n&acirc;ng cao tại TEK4VN!
Kh&oacute;a học n&agrave;y sẽ trang bị cho bạn mọi kiến thức cần biết để l&agrave;m việc với React.
C&aacute;c b&agrave;i học được thiết kế để cung cấp những th&ocirc;ng tin ngắn gọn m&agrave; bạn sẽ &aacute;p dụng trực tiếp trong c&aacute;c b&agrave;i tập.
Bạn sẽ học c&aacute;ch x&acirc;y dựng giao diện cho website thương mại điện tử sử dụng cổng thanh to&aacute;n Stripe.
Bạn sẽ học tất cả c&aacute;c kh&aacute;i niệm quan trọng. Ch&uacute;ng ta sẽ bắt đầu với một số b&agrave;i &ocirc;n tập nhanh về JavaScript, sau đ&oacute; l&agrave; những kh&aacute;i niệm cơ bản của React, tiếp theo sẽ đi s&acirc;u v&agrave;o c&aacute;c kh&aacute;i niệm React n&acirc;ng cao
Trước khi bắt đầu kh&oacute;a học, h&atilde;y đảm bảo bạn đ&atilde; nắm chắc kiến thức về:
<ul>
<li style="text-align: justify;" aria-level="1"><a href="https://tek4.vn/khoa-hoc/lap-trinh-giao-dien-voi-html-css" target="_blank" rel="noopener">HTML/CSS</a></li>
<li style="text-align: justify;" aria-level="1"><a href="https://tek4.vn/khoa-hoc/lap-trinh-javascript-co-ban-den-nang-cao" target="_blank" rel="noopener">JavaScript</a> (Kh&oacute;a JavaScript TEK4VN đang trong qu&aacute; tr&igrave;nh ho&agrave;n thiện...)</li>
</ul>

ReactJS từ cơ bản đến nâng cao

Do đăng k&yacute; API thanh to&aacute;n tại VN hơi phức tạp về thủ tục do đ&oacute; chọn strippe. V&agrave; về cơ bản th&igrave; c&aacute;ch thức sử dụng v&agrave; nguy&ecirc;n l&yacute; diễn ra tương tự.
Khi sử dụng Stripe Checkout, bạn sẽ cần tạo danh s&aacute;ch <code>products</code> trong Bảng điều khiển Stripe. Tek4 đ&atilde; tạo sẵn một sản phẩm m&agrave; bạn sẽ sử dụng trong dự &aacute;n n&agrave;y.
Nếu bạn muốn t&igrave;m hiểu c&aacute;ch tự triển khai, h&atilde;y l&agrave;m theo quy tr&igrave;nh dưới đ&acirc;y:
<h2 style="text-align: justify;">Bước 0: Cấu h&igrave;nh một lần</h2>
Bước n&agrave;y cần được thực hiện một lần. Bạn cần x&aacute;c minh t&agrave;i khoản với Stripe bằng c&aacute;ch cung cấp th&ocirc;ng tin kinh doanh của bạn. Sau đ&oacute;, bạn cần truy cập phần c&agrave;i đặt Checkout theo li&ecirc;n kết: dashboard.stripe.com/settings/checkout, h&atilde;y cuộn xuống v&agrave; nhấp v&agrave;o Enable client-only integration.
T&ugrave;y chọn n&agrave;y sẽ cho ph&eacute;p bạn sử dụng Stripe Checkout m&agrave; kh&ocirc;ng cần bất kỳ phần mềm back-end n&agrave;o. H&atilde;y nhớ rằng điều n&agrave;y kh&ocirc;ng lu&ocirc;n lu&ocirc;n được khuyến nghị v&igrave; n&oacute; phụ thuộc v&agrave;o trường hợp sử dụng của bạn v&agrave; c&aacute;ch bạn xử l&yacute; thanh to&aacute;n.
<h2 style="text-align: justify;">Bước 1: Truy cập trang sản phẩm (thử nghiệm)</h2>
Truy cập dashboard.stripe.com/test/products để đến trang sản phẩm trong m&ocirc;i trường thử nghiệm.
Trang sản phẩm sẽ tr&ocirc;ng như sau:
<img style="width: 100%;" src="https://tek4.vn/public_files/1bca3b51-42dc-41ab-8033-4410da7be946" alt="stripe-step1" />
Tr&ecirc;n trang n&agrave;y, h&atilde;y nhấp v&agrave;o n&uacute;t Add product (Th&ecirc;m sản phẩm).
<h2 style="text-align: justify;">Bước 2: Th&ecirc;m sản phẩm</h2>
Tr&ecirc;n trang, bạn c&oacute; thể m&ocirc; tả sản phẩm bằng c&aacute;ch nhập t&ecirc;n, m&ocirc; tả v&agrave; h&igrave;nh ảnh.
<img style="width: 100%;" src="https://tek4.vn/public_files/286b1cd3-d456-4043-b9e8-a9aa0c8648b3" alt="stripe-step2" />
Sau đ&oacute;, h&atilde;y cuộn xuống v&agrave; chọn Pricing (Định gi&aacute;) cho sản phẩm. Đ&oacute; l&agrave; h&igrave;nh thức thanh to&aacute;n một lần (One time) hay thanh to&aacute;n định kỳ (Recurring)?
Ở đ&acirc;y ch&uacute;ng ta đ&atilde; chọn h&igrave;nh thức thanh to&aacute;n một lần với gi&aacute; 10 USD:
<img style="width: 100%;" src="https://tek4.vn/public_files/5a6b4141-d2ef-402a-91ce-932c96304ef7" alt="stripe-step3" />
Sau khi ho&agrave;n th&agrave;nh, h&atilde;y nhấp v&agrave;o n&uacute;t Save product (Lưu sản phẩm).
<h2 style="text-align: justify;">Bước 3: Lấy price_id</h2>
Sau khi lưu sản phẩm, bạn sẽ được đưa đến trang xem trước sản phẩm, nơi bạn c&oacute; thể xem tất cả c&aacute;c th&ocirc;ng tin bạn đ&atilde; nhập.
Khi cuộn xuống một ch&uacute;t, bạn sẽ nh&igrave;n thấy phần Pricing (Định gi&aacute;). Ở đ&oacute;, bạn cần sao ch&eacute;p price_id như trong ảnh chụp m&agrave;n h&igrave;nh. <code>price_id</code> n&agrave;y sẽ được sử dụng để li&ecirc;n kết với Stripe Checkout để x&aacute;c định sản phẩm (v&agrave; mức gi&aacute;) m&agrave; người d&ugrave;ng đang mua.
Bạn sẽ được cung cấp sẵn <code>price_id</code>, nhưng nếu bạn muốn l&agrave;m theo c&aacute;ch ri&ecirc;ng của bạn, h&atilde;y sao ch&eacute;p id n&agrave;y.
<img style="width: 100%;" src="https://tek4.vn/public_files/8582fb13-6ebe-4339-9f76-557741663f8c" alt="stripe-step4" />
Sau khi quay trở lại trang Products (Sản phẩm), bạn sẽ thấy danh s&aacute;ch sản phẩm tr&ecirc;n trang n&agrave;y.
<img style="width: 100%;" src="https://tek4.vn/public_files/a3b52acf-d782-4d73-8571-372b129f3dbe" alt="stripe-step5" />
Bạn c&oacute; thể th&ecirc;m nhiều sản phẩm t&ugrave;y th&iacute;ch. Ch&uacute;ng ta sẽ l&agrave;m việc với Stripe Checkout để th&ecirc;m c&aacute;c sản phẩm trong dự &aacute;n tổng kết.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>price_id</code> sẽ được sử dụng để li&ecirc;n kết với Stripe Checkout để x&aacute;c định sản phẩm (v&agrave; mức gi&aacute;) m&agrave; người d&ugrave;ng đang mua.</li>
</ul>

Tạo sản phẩm