{"id":29198,"date":"2023-07-04T18:30:06","date_gmt":"2023-07-04T15:00:06","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/"},"modified":"2023-07-04T18:30:06","modified_gmt":"2023-07-04T15:00:06","slug":"building-a-pricing-page-with-nextjs-1b1f","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/","title":{"rendered":"\ud83e\udd84 \u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0647 \u0642\u06cc\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0628\u0627 NextJS \ud83e\udd2f \ud83e\udd2f"},"content":{"rendered":"<div data-article-id=\"1513500\" id=\"article-body\">\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0635\u0641\u062d\u0647 \u0627\u06cc \u0628\u0627 \u0633\u0637\u0648\u062d \u0642\u06cc\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0645\u062a\u0639\u062f\u062f \u0645\u06cc \u0633\u0627\u0632\u06cc\u0645.<br \/>\u0628\u0627\u0632\u062f\u06cc\u062f\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u0646\u062f <strong>&#8220;\u062e\u0631\u06cc\u062f&#8221;<\/strong> \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0628\u0647 \u0635\u0641\u062d\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0631\u0648\u06cc\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644\u060c \u0645\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p><strong>\u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f:<\/strong><\/p>\n<ul>\n<li>\u062e\u0631\u06cc\u062f \u062f\u0648\u0631\u0647<\/li>\n<li>\u062e\u0631\u06cc\u062f \u0627\u0634\u062a\u0631\u0627\u06a9<\/li>\n<li>\u06cc\u06a9 \u06a9\u0627\u0644\u0627\u06cc \u0641\u06cc\u0632\u06cc\u06a9\u06cc \u0628\u062e\u0631\u06cc\u062f<\/li>\n<li>\u067e\u0648\u0644 \u0627\u0647\u062f\u0627 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0628\u0631\u0627\u062a\u0648\u0646 \u06cc\u0647 \u0642\u0647\u0648\u0647 \u0628\u062e\u0631\u0645\ud83d\ude09<\/li>\n<\/ul>\n<p>\u0648 \u0628\u0633\u06cc\u0627\u0631\u06cc \u062f\u06cc\u06af\u0631.<\/p>\n<p><\/p>\n<hr\/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D9%85%DB%8C_%D8%AA%D9%88%D8%A7%D9%86%DB%8C%D8%AF_%D8%A8%D9%87_%D9%85%D9%86_%DA%A9%D9%85%DA%A9_%DA%A9%D9%86%DB%8C%D8%AF%D8%9F_%E2%9D%A4%EF%B8%8F\" >\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u06cc\u062f\u061f  \u2764\ufe0f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D8%A8%DB%8C%D8%A7_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C%D8%B4_%DA%A9%D9%86%DB%8C%D9%85%F0%9F%94%A5\" >\u0628\u06cc\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc\u0634 \u06a9\u0646\u06cc\u0645\ud83d\udd25<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%D9%86%D8%AF%D9%87_%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%F0%9F%A4%91_%F0%9F%92%B0\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u062e\u0648\u062f \u0631\u0627 \ud83e\udd11 \ud83d\udcb0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D8%A7%D8%B1%D8%B3%D8%A7%D9%84_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A8%D9%87_%D8%B5%D9%81%D8%AD%D9%87_%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA_%F0%9F%9A%80\" >\u0627\u0631\u0633\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u0635\u0641\u062d\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \ud83d\ude80<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D8%A8%DB%8C%D8%A7%DB%8C%DB%8C%D8%AF_%D9%BE%D8%B4%D8%AA_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%A8%D8%A7%D8%B2_%DA%A9%D9%86%DB%8C%D9%85_packagescomponenttsx_%D8%AC%D8%B2%D8%A1_%D9%88_%D9%81%D8%B1%D8%A7%D8%AE%D9%88%D8%A7%D9%86%DB%8C_api_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0628\u06cc\u0627\u06cc\u06cc\u062f \u067e\u0634\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u0645 packages.component.tsx \u062c\u0632\u0621 \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc api \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D8%AA%D8%B5%D9%88%D8%B1_%D8%B0%D9%87%D9%86%D9%85_%D8%B1%D8%A7_%D8%A8%D9%87_%D9%87%D9%85_%D8%B1%DB%8C%D8%AE%D8%AA%F0%9F%A4%AF\" >\u062a\u0635\u0648\u0631 \u0630\u0647\u0646\u0645 \u0631\u0627 \u0628\u0647 \u0647\u0645 \u0631\u06cc\u062e\u062a\ud83e\udd2f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D9%BE%D8%B1%D8%AF%D8%A7%D8%B2%D8%B4_%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA_%D8%AE%D8%B1%DB%8C%D8%AF_%D9%88_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%B3%D8%B1%D9%86%D8%AE_%D9%87%D8%A7_%D8%A8%D9%87_Notion_%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8F\" >\u062f\u0631 \u062d\u0627\u0644 \u067e\u0631\u062f\u0627\u0632\u0634 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062e\u0631\u06cc\u062f \u0648 \u0627\u0641\u0632\u0648\u062f\u0646 \u0633\u0631\u0646\u062e \u0647\u0627 \u0628\u0647 Notion \ud83d\ude4b\ud83c\udffb\u200d\u2642\ufe0f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%85%D9%81%D9%87%D9%88%D9%85_%E2%9C%8D%F0%9F%8F%BB\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0641\u0647\u0648\u0645 \u270d\ud83c\udffb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D9%85%DB%8C%D8%AE%DA%A9%D9%88%D8%A8_%DA%A9%D8%B1%D8%AF%DB%8C_%F0%9F%9A%80\" >\u0645\u06cc\u062e\u06a9\u0648\u0628 \u06a9\u0631\u062f\u06cc \ud83d\ude80<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/building-a-pricing-page-with-nextjs-1b1f\/#%D9%85%DB%8C_%D8%AA%D9%88%D8%A7%D9%86%DB%8C%D8%AF_%D8%A8%D9%87_%D9%85%D9%86_%DA%A9%D9%85%DA%A9_%DA%A9%D9%86%DB%8C%D8%AF%D8%9F_%E2%9D%A4%EF%B8%8F-2\" >\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u06cc\u062f\u061f  \u2764\ufe0f<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%DB%8C_%D8%AA%D9%88%D8%A7%D9%86%DB%8C%D8%AF_%D8%A8%D9%87_%D9%85%D9%86_%DA%A9%D9%85%DA%A9_%DA%A9%D9%86%DB%8C%D8%AF%D8%9F_%E2%9D%A4%EF%B8%8F\"><\/span>\n<p>  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u06cc\u062f\u061f  \u2764\ufe0f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0646 \u0639\u0627\u0634\u0642 \u0633\u0627\u062e\u062a\u0646 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0645\u062a\u0646 \u0628\u0627\u0632 \u0648 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0622\u0646\u0647\u0627 \u0628\u0627 \u0647\u0645\u0647 \u0647\u0633\u062a\u0645.<\/p>\n<p>\u0627\u06af\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u06cc\u062f \u0648 <strong>\u0633\u062a\u0627\u0631\u0647 \u067e\u0631\u0648\u0698\u0647<\/strong> \u0645\u0646 \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647\u060c \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631 \u062e\u0648\u0627\u0647\u0645 \u0628\u0648\u062f! <\/p>\n<p>(\u0627\u06cc\u0646 \u0646\u06cc\u0632 \u06a9\u062f \u0645\u0646\u0628\u0639 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a)<br \/>https:\/\/github.com\/github-20k\/growchief<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_748_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.gif\" alt=\"stargif\" loading=\"lazy\" width=\"360\" height=\"78\" data-animated=\"true\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_826_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.gif\" alt=\"\u06af\u0631\u0628\u0647\" loading=\"lazy\" width=\"498\" height=\"375\" data-animated=\"true\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%DB%8C%D8%A7_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C%D8%B4_%DA%A9%D9%86%DB%8C%D9%85%F0%9F%94%A5\"><\/span>\n<p>  \u0628\u06cc\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc\u0634 \u06a9\u0646\u06cc\u0645\ud83d\udd25<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 NextJS \u062c\u062f\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx create-next-app@latest\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u0686\u0646\u062f\u06cc\u0646 \u0628\u0627\u0631 \u0631\u0648\u06cc enter \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<br \/>\u0645\u0646 \u0637\u0631\u0641\u062f\u0627\u0631 \u0628\u0632\u0631\u06af \u0631\u0648\u062a\u0631 App \u062c\u062f\u06cc\u062f Next.JS \u0646\u06cc\u0633\u062a\u0645 &#8211; \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u0632 \u0646\u0633\u062e\u0647 \u0642\u062f\u06cc\u0645\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f <code>pages<\/code> \u067e\u0648\u0634\u0647\u060c \u0627\u0645\u0627 \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0634 \u062e\u0648\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062c\u0644\u0648 \u0628\u0631\u0648\u06cc\u0645 \u0648 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0642\u06cc\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<br \/>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u062c\u0632\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645 \u0648 \u062c\u0632\u0621 \u0642\u06cc\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">mkdir <\/span>components\n<span class=\"nb\">cd <\/span>components\n<span class=\"nb\">touch <\/span>pricing.component.tsx\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0645\u0637\u0627\u0644\u0628 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">PackagesComponent<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"mt-28\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-center text-6xl max-sm:text-5xl font-bold\"<\/span><span class=\"p\">&gt;<\/span>\n        Packages\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex sm:space-x-4 max-sm:space-y-4 max-sm:flex-col\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex-1 text-xl mt-14 rounded-xl border border-[#4E67E5]\/25 bg-[#080C23] p-10 w-full\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-[#4d66e5]\"<\/span><span class=\"p\">&gt;<\/span>Package one<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-6xl my-5 font-light\"<\/span><span class=\"p\">&gt;<\/span>$600<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n            Short description\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"my-5 w-full text-black p-5 max-sm:p-2 rounded-3xl bg-[#4E67E5] text-xl max-sm:text-lg hover:bg-[#8a9dfc] transition-all\"<\/span>\n          <span class=\"p\">&gt;<\/span>\n            Purchase\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>First feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Second feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex-1 text-xl mt-14 rounded-xl border border-[#9966FF]\/25 bg-[#120d1d] p-10 w-full\"<\/span>\n        <span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-[#9967FF]\"<\/span><span class=\"p\">&gt;<\/span>Package 2<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-6xl my-5 font-light\"<\/span><span class=\"p\">&gt;<\/span>$1500<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n            Short Description\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"my-5 w-full text-black p-5 max-sm:p-2 rounded-3xl bg-[#9966FF] text-xl max-sm:text-lg hover:bg-[#BB99FF] transition-all\"<\/span>\n          <span class=\"p\">&gt;<\/span>\n            Purchase\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>First Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Second Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Thired Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex-1 text-xl mt-14 rounded-xl border border-[#F7E16F]\/25 bg-[#19170d] p-10 w-full\"<\/span>\n        <span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-[#F7E16F]\"<\/span><span class=\"p\">&gt;<\/span>Package 3<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-6xl my-5 font-light\"<\/span><span class=\"p\">&gt;<\/span>$1800<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n            Short Description\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"my-5 w-full text-black p-5 max-sm:p-2 rounded-3xl bg-[#F7E16F] text-xl max-sm:text-lg hover:bg-[#fdf2bb] transition-all\"<\/span>\n          <span class=\"p\">&gt;<\/span>\n            Purchase\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>First Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Second Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Thired Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Fourth Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Fifth Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u062c\u0632\u0621 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0628\u0627 Tailwind (CSS) \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0633\u0647 \u0646\u0648\u0639 \u0628\u0633\u062a\u0647 (600 \u062f\u0644\u0627\u0631\u060c 1500 \u062f\u0644\u0627\u0631 \u0648 1800 \u062f\u0644\u0627\u0631) \u0627\u0633\u062a.  \u067e\u0633 \u0627\u0632 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0628\u0633\u062a\u0647 \u0647\u0627\u060c \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u0646\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u062e\u0631\u06cc\u062f \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u062f \u0628\u0633\u062a\u0647 \u0631\u0627 \u062e\u0631\u06cc\u062f\u0627\u0631\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0647 root dir \u0628\u0631\u0648\u06cc\u062f \u0648 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0641\u0647\u0631\u0633\u062a \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f (\u0627\u06af\u0631 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f)<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>pages\n<span class=\"nb\">touch <\/span>index.tsx\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">PackagesComponent<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/components\/pricing.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Index<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n   <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n   <span class=\"p\">&lt;&gt;<\/span>\n     <span class=\"p\">&lt;<\/span><span class=\"nc\">PackagesComponent<\/span> <span class=\"p\">\/&gt;<\/span>\n   <span class=\"p\">&lt;\/&gt;<\/span>\n   <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u0642\u06cc\u0645\u062a \u06af\u0630\u0627\u0631\u06cc\" loading=\"lazy\" width=\"800\" height=\"349\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%D9%86%D8%AF%D9%87_%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%F0%9F%A4%91_%F0%9F%92%B0\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u062e\u0648\u062f \u0631\u0627 \ud83e\udd11 \ud83d\udcb0<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u062b\u0631 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0631\u0648\u0634 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<ol>\n<li>\n<p>\u06cc\u06a9 \u062a\u0645\u0627\u0633 API \u0628\u0627 \u0645\u0628\u0644\u063a\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u0627\u0631\u0698 \u06a9\u0646\u06cc\u062f \u0648 \u0635\u0641\u062d\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633 \u0627\u0632 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0647 \u0627\u0631\u0627\u0626\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0634\u0645\u0627 \u06cc\u06a9 URL \u0627\u0632 \u062a\u0645\u0627\u0633 API \u0628\u0627 \u067e\u06cc\u0648\u0646\u062f\u06cc \u0628\u0647 \u0635\u0641\u062d\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u06cc\u062f (\u06a9\u0627\u0631\u0628\u0631 \u06a9\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0631\u0627 \u062a\u0631\u06a9 \u0645\u06cc \u06a9\u0646\u062f).<\/p>\n<\/li>\n<li>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u062e\u0631\u06cc\u062f\u060c \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0627\u0631\u0627\u0626\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u06cc\u06a9 \u062a\u0645\u0627\u0633 API \u0631\u0627 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u062e\u0627\u0635\u06cc \u06a9\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0637\u0644\u0627\u0639 \u062f\u0647\u062f \u062e\u0631\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a (\u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646)<\/p>\n<\/li>\n<\/ol>\n<p>\u0645\u0646 \u0627\u0632 Stripe \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645 &#8211; \u062f\u0631 \u062f\u0631\u062c\u0647 \u0627\u0648\u0644 \u062f\u0631 \u0647\u0645\u0647 \u062c\u0627 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0627\u0632 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0647 Stripe \u0628\u0631\u0648\u06cc\u062f\u060c \u0631\u0648\u06cc \u0628\u0631\u06af\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0647 \u00ab\u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc API\u00bb \u0628\u0631\u0648\u06cc\u062f \u0648 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u0639\u0645\u0648\u0645\u06cc \u0648 \u0645\u062e\u0641\u06cc \u0631\u0627 \u0627\u0632 \u0628\u062e\u0634 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_478_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.gif\" alt=\"\u0631\u0627\u0647 \u0631\u0627\u0647\" loading=\"lazy\" width=\"600\" height=\"278\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u0628\u0647 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f \u0648 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>.env<\/code> \u0648 \u062f\u0648 \u06a9\u0644\u06cc\u062f \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>PAYMENT_PUBLIC_KEY=pk_test_....\nPAYMENT_SECRET_KEY=sk_test_....\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u062e\u0627\u0637\u0631 \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u06af\u0641\u062a\u06cc\u0645 Stripe \u0628\u0639\u062f\u0627\u064b \u062f\u0631 \u0645\u0648\u0631\u062f \u067e\u0631\u062f\u0627\u062e\u062a \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0627 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a HTTP \u0628\u0647 \u0645\u0627 \u0627\u0637\u0644\u0627\u0639 \u0645\u06cc \u062f\u0647\u062f\u061f<\/p>\n<p>\u062e\u0648\u0628 &#8230; \u0645\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645<\/p>\n<ol>\n<li>\u0645\u0633\u06cc\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0632 \u067e\u0631\u062f\u0627\u062e\u062a \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u06a9\u0644\u06cc\u062f \u0645\u062d\u0627\u0641\u0638\u062a \u06a9\u0646\u06cc\u062f<\/li>\n<\/ol>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u062f\u0627\u0634\u0628\u0648\u0631\u062f Stripe \u0647\u0633\u062a\u06cc\u062f\u060c \u0628\u0647 \u00abWebhooks\u00bb \u0628\u0631\u0648\u06cc\u062f \u0648 \u06cc\u06a9 \u0648\u0628 \u0647\u0648\u06a9 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_36_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u0627\u064a\u062c\u0627\u062f \u0643\u0631\u062f\u0646\" loading=\"lazy\" width=\"800\" height=\"204\" title=\"\"><\/p>\n<p>\u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 &#8220;URL \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc&#8221; \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.  \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c Stripe \u062a\u0646\u0647\u0627 \u0632\u0645\u0627\u0646\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u062f \u06a9\u0647 \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0645\u062d\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06cc\u0627 \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 ngrok \u062f\u0631 \u0645\u0639\u0631\u0636 \u0648\u0628 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645.<\/p>\n<p>\u0645\u0646 \u06af\u0632\u06cc\u0646\u0647 ngrok \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc \u062f\u0647\u0645 \u0632\u06cc\u0631\u0627\u060c \u0628\u0647 \u062f\u0644\u0627\u06cc\u0644\u06cc\u060c \u0634\u0646\u0648\u0646\u062f\u0647 \u0645\u062d\u0644\u06cc \u0647\u0645\u06cc\u0634\u0647 \u0628\u0631\u0627\u06cc \u0645\u0646 \u06a9\u0627\u0631 \u0646\u0645\u06cc \u06a9\u0646\u062f (\u06af\u0627\u0647\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f\u060c \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u0646\u0647).<\/p>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 Next.JS \u0634\u0645\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f\u060c \u0641\u0642\u0637 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm install -g ngrok\nngrok http 3000\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f \u06a9\u0647 \u0646\u06af\u0631\u0648\u06a9 \u0628\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u062f\u0631 \u062f\u0627\u0645\u0646\u0647 \u062e\u0648\u062f \u0633\u0631\u0648\u06cc\u0633 \u0645\u06cc \u062f\u0647\u062f.  \u0641\u0642\u0637 \u06a9\u067e\u06cc\u0634 \u06a9\u0646<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_492_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u062f\u0627\u0645\u0646\" loading=\"lazy\" width=\"800\" height=\"278\" title=\"\"><\/p>\n<p>\u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0648\u0628 \u0647\u0648\u06a9 Stripe &#8220;Endpoint URL&#8221; \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f\u060c \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u062a\u06a9\u0645\u06cc\u0644 \u062e\u0631\u06cc\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>\/api\/purchase<\/code><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_330_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u062e\u0631\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"692\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0622\u0646\u060c \u0631\u0648\u06cc &#8220;\u0627\u0646\u062a\u062e\u0627\u0628 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627&#8221; \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<br \/>&#8220;checkout.session.async_payment_succeeded&#8221; \u0648 &#8220;checkout.session.completed&#8221; \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_32_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"373\" title=\"\"><\/p>\n<p>\u0631\u0648\u06cc \u00ab\u0627\u0641\u0632\u0648\u062f\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u00bb \u0648 \u0633\u067e\u0633 \u00ab\u0627\u0641\u0632\u0648\u062f\u0646 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc\u00bb \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0631\u0648\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_504_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"130\" title=\"\"><\/p>\n<p>\u0631\u0648\u06cc &#8220;Reveal&#8221; \u0631\u0648\u06cc &#8220;Signing Key&#8221; \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_358_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u0622\u0634\u06a9\u0627\u0631 \u0633\u0627\u062e\u062a\u0646\" loading=\"lazy\" width=\"800\" height=\"222\" title=\"\"><\/p>\n<p>\u0622\u0646 \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>.env<\/code>\u060c \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>PAYMENT_SIGNING_SECRET=key\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B1%D8%B3%D8%A7%D9%84_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A8%D9%87_%D8%B5%D9%81%D8%AD%D9%87_%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA_%F0%9F%9A%80\"><\/span>\n<p>  \u0627\u0631\u0633\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u0635\u0641\u062d\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \ud83d\ude80<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0646\u0635\u0628 Stripe \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0646\u0648\u0627\u0639 (\u0686\u0648\u0646 \u0645\u0646 \u0627\u0632 \u062a\u0627\u06cc\u067e \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645) \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install <\/span>stripe <span class=\"nt\">--save<\/span>\nnpm <span class=\"nb\">install<\/span> <span class=\"nt\">-D<\/span> stripe-event-types\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0645\u0633\u06cc\u0631 API \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u06cc\u0648\u0646\u062f URL \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062e\u0648\u062f\u060c \u0628\u0633\u062a\u0647 \u0628\u0647 \u0642\u06cc\u0645\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>pages\/api\n<span class=\"nb\">touch <\/span>prepare.tsx\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646\u0645 \u0645\u062d\u062a\u0648\u0627\u06cc \u0641\u0627\u06cc\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">type<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NextApiRequest<\/span><span class=\"p\">,<\/span> <span class=\"nx\">NextApiResponse<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next<\/span><span class=\"dl\">'<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">stripe<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Stripe<\/span><span class=\"p\">(<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">PAYMENT_SECRET_KEY<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span> <span class=\"p\">{}<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">any<\/span><span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">handler<\/span><span class=\"p\">(<\/span>\n    <span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextApiRequest<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">res<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextApiResponse<\/span>\n<span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">method<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">status<\/span><span class=\"p\">(<\/span><span class=\"mi\">405<\/span><span class=\"p\">).<\/span><span class=\"nx\">json<\/span><span class=\"p\">({<\/span><span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Method not allowed<\/span><span class=\"dl\">\"<\/span><span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">query<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span> <span class=\"o\">||<\/span> <span class=\"o\">+<\/span><span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">query<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span> <span class=\"o\">&lt;=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">status<\/span><span class=\"p\">(<\/span><span class=\"mi\">400<\/span><span class=\"p\">).<\/span><span class=\"nx\">json<\/span><span class=\"p\">({<\/span><span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Please enter a valid price<\/span><span class=\"dl\">\"<\/span><span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">url<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">stripe<\/span><span class=\"p\">.<\/span><span class=\"nx\">checkout<\/span><span class=\"p\">.<\/span><span class=\"nx\">sessions<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">payment_method_types<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">card<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n      <span class=\"na\">line_items<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n        <span class=\"p\">{<\/span>\n        <span class=\"na\">price_data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">currency<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">USD<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">product_data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">GrowChief<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Charging you`<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n          <span class=\"na\">unit_amount<\/span><span class=\"p\">:<\/span> <span class=\"mi\">100<\/span> <span class=\"o\">*<\/span> <span class=\"o\">+<\/span><span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">query<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n        <span class=\"na\">quantity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">],<\/span>\n    <span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">payment<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">success_url<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/localhost:3000\/success?session_id={CHECKOUT_SESSION_ID}<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">cancel_url<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/localhost:3000<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">({<\/span><span class=\"nx\">url<\/span><span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646\u062c\u0627 \u0686\u0647 \u062e\u0628\u0631 \u0627\u0633\u062a:<\/p>\n<ol>\n<li>\u0645\u0627 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 Stripe \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0627 \u06a9\u0644\u06cc\u062f SECRET \u0627\u0632 \u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u06cc\u0645 <code>.env<\/code> \u0641\u0627\u06cc\u0644.<\/li>\n<li>\u0645\u0627 \u0645\u0637\u0645\u0626\u0646 \u0645\u06cc \u0634\u0648\u06cc\u0645 \u06a9\u0647 <code>METHOD<\/code> \u0627\u0632 \u0645\u0633\u06cc\u0631 \u0627\u0633\u062a <code>GET.<\/code>\n<\/li>\n<li>\u0645\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u0645 <code>price<\/code> \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u0632 0.<\/li>\n<li>\u0645\u0627 \u06cc\u06a9 \u062a\u0645\u0627\u0633 Stripe \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f URL \u067e\u0631\u062f\u0627\u062e\u062a \u062e\u0637 \u062e\u0637\u06cc \u0628\u0631\u0642\u0631\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0627 1 \u0645\u0648\u0631\u062f \u062e\u0631\u06cc\u062f\u06cc\u0645.  \u0634\u0645\u0627 \u0627\u062d\u062a\u0645\u0627\u0644\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 <code>unit_amount<\/code> \u062f\u0631 100 \u0636\u0631\u0628 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06af\u0631 1 \u0628\u0641\u0631\u0633\u062a\u06cc\u0645 0.01 \u062f\u0644\u0627\u0631 \u0645\u06cc \u0634\u0648\u062f.  \u0636\u0631\u0628 \u062f\u0631 \u0635\u062f \u0628\u0647 1 \u062f\u0644\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u0645\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>URL<\/code> \u0628\u0631\u06af\u0634\u062a \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%DB%8C%D8%A7%DB%8C%DB%8C%D8%AF_%D9%BE%D8%B4%D8%AA_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%A8%D8%A7%D8%B2_%DA%A9%D9%86%DB%8C%D9%85_packagescomponenttsx_%D8%AC%D8%B2%D8%A1_%D9%88_%D9%81%D8%B1%D8%A7%D8%AE%D9%88%D8%A7%D9%86%DB%8C_api_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u067e\u0634\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u0645 <code>packages.component.tsx<\/code> \u062c\u0632\u0621 \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc api \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">purchase<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useCallback<\/span><span class=\"p\">(<\/span><span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">price<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n   <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span><span class=\"nx\">url<\/span><span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"p\">(<\/span><span class=\"k\">await<\/span> <span class=\"nx\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`http:\/\/localhost:3000\/api\/prepare?price=<\/span><span class=\"p\">${<\/span><span class=\"nx\">price<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)).<\/span><span class=\"nx\">json<\/span><span class=\"p\">();<\/span>\n\n   <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">href<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">url<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0628\u0631\u0627\u06cc \u06a9\u062f \u06a9\u0627\u0645\u0644 \u0635\u0641\u062d\u0647<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">PackagesComponent<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">purchase<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useCallback<\/span><span class=\"p\">(<\/span><span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"na\">price<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n     <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span><span class=\"nx\">url<\/span><span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"p\">(<\/span><span class=\"k\">await<\/span> <span class=\"nx\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`http:\/\/localhost:3000\/api\/prepare?price=<\/span><span class=\"p\">${<\/span><span class=\"nx\">price<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)).<\/span><span class=\"nx\">json<\/span><span class=\"p\">();<\/span>\n\n     <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">href<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">url<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"mt-28\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-center text-6xl max-sm:text-5xl font-bold\"<\/span><span class=\"p\">&gt;<\/span>\n        Packages\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex sm:space-x-4 max-sm:space-y-4 max-sm:flex-col\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex-1 text-xl mt-14 rounded-xl border border-[#4E67E5]\/25 bg-[#080C23] p-10 w-full\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-[#4d66e5]\"<\/span><span class=\"p\">&gt;<\/span>Package one<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-6xl my-5 font-light\"<\/span><span class=\"p\">&gt;<\/span>$600<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n            Short description\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">purchase<\/span><span class=\"p\">(<\/span><span class=\"mi\">600<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"my-5 w-full text-black p-5 max-sm:p-2 rounded-3xl bg-[#4E67E5] text-xl max-sm:text-lg hover:bg-[#8a9dfc] transition-all\"<\/span>\n          <span class=\"p\">&gt;<\/span>\n            Purchase\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>First feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Second feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex-1 text-xl mt-14 rounded-xl border border-[#9966FF]\/25 bg-[#120d1d] p-10 w-full\"<\/span>\n        <span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-[#9967FF]\"<\/span><span class=\"p\">&gt;<\/span>Package 2<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-6xl my-5 font-light\"<\/span><span class=\"p\">&gt;<\/span>$1500<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n            Short Description\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">purchase<\/span><span class=\"p\">(<\/span><span class=\"mi\">1200<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"my-5 w-full text-black p-5 max-sm:p-2 rounded-3xl bg-[#9966FF] text-xl max-sm:text-lg hover:bg-[#BB99FF] transition-all\"<\/span>\n          <span class=\"p\">&gt;<\/span>\n            Purchase\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>First Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Second Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Thired Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex-1 text-xl mt-14 rounded-xl border border-[#F7E16F]\/25 bg-[#19170d] p-10 w-full\"<\/span>\n        <span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-[#F7E16F]\"<\/span><span class=\"p\">&gt;<\/span>Package 3<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-6xl my-5 font-light\"<\/span><span class=\"p\">&gt;<\/span>$1800<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n            Short Description\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">purchase<\/span><span class=\"p\">(<\/span><span class=\"mi\">1800<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"my-5 w-full text-black p-5 max-sm:p-2 rounded-3xl bg-[#F7E16F] text-xl max-sm:text-lg hover:bg-[#fdf2bb] transition-all\"<\/span>\n          <span class=\"p\">&gt;<\/span>\n            Purchase\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>First Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Second Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Thired Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Fourth Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>Fifth Feature<span class=\"p\">&lt;\/<\/span><span class=\"nt\">li<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">ul<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code>onClick<\/code> \u062f\u0631 \u0647\u0631 \u062f\u06a9\u0645\u0647 \u0627\u0632 \u0635\u0641\u062d\u0647 \u0628\u0627 \u0642\u06cc\u0645\u062a \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0647 \u067e\u0631\u062f\u0627\u062e\u062a.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D8%B5%D9%88%D8%B1_%D8%B0%D9%87%D9%86%D9%85_%D8%B1%D8%A7_%D8%A8%D9%87_%D9%87%D9%85_%D8%B1%DB%8C%D8%AE%D8%AA%F0%9F%A4%AF\"><\/span>\n<p>  \u062a\u0635\u0648\u0631 \u0630\u0647\u0646\u0645 \u0631\u0627 \u0628\u0647 \u0647\u0645 \u0631\u06cc\u062e\u062a\ud83e\udd2f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Notion \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u062f\u0627\u0646\u0634 \u0648 \u0645\u0633\u062a\u0646\u062f\u0633\u0627\u0632\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u0645\u0646 \u0628\u06cc\u0634 \u0627\u0632 \u06cc\u06a9 \u0633\u0627\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc Novu \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0645 \u0648 \u062f\u0631 \u062f\u0631\u062c\u0647 \u0627\u0648\u0644 \u0628\u0631\u0627\u06cc \u062a\u06cc\u0645 \u062e\u0648\u062f \u0627\u0632 Novu \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645.<\/p>\n<p>\u0627\u06af\u0631 \u062a\u0627 \u0628\u0647 \u062d\u0627\u0644 \u0628\u0627 Notion \u0628\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0647 \u0627\u06cc\u062f \u06a9\u0647 \u0622\u0646\u0647\u0627 \u06cc\u06a9 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0646\u0631\u0645 \u062f\u0627\u0631\u0646\u062f &#8211; \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062a\u0627 \u0628\u0647 \u062d\u0627\u0644 \u0628\u0627 \u0622\u0646 \u0628\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u0645 (\u062d\u062f\u0627\u0642\u0644 \u0628\u0631\u0627\u06cc \u0645\u0646).<\/p>\n<p><strong>\u0645\u0646 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0641\u0647\u0648\u0645\u06cc \u0628\u0627 \u06cc\u06a9 API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/strong><\/p>\n<p>\u0645\u0646 \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u062f\u0648\u0646 \u0645\u0641\u0647\u0648\u0645 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0645 \u0648 \u0628\u06cc\u0631\u0648\u0646 \u0631\u0641\u062a\u0645 \u062a\u0627 \u0642\u06cc\u0645\u062a \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u0645 &#8211; \u0645\u0637\u0645\u0626\u0646 \u0628\u0648\u062f\u0645 \u06a9\u0647 \u0622\u0646\u0647\u0627 API \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0641 \u0631\u0627\u06cc\u06af\u0627\u0646 \u062e\u0648\u062f \u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u06cc \u062f\u0647\u0646\u062f.  \u0645\u0646 \u062e\u06cc\u0644\u06cc \u0627\u0634\u062a\u0628\u0627\u0647 \u06a9\u0631\u062f\u0645\u060c \u0622\u0646\u0647\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0648 \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0633\u0631\u06cc\u0639 \u0627\u0633\u062a.<\/p>\n<p>\u0645\u0647\u0645 \u062a\u0631\u06cc\u0646 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0622\u0646\u0647\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f \u062d\u062f\u0627\u06a9\u062b\u0631 3 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631 \u062b\u0627\u0646\u06cc\u0647 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f &#8211; \u0627\u0645\u0627 \u0627\u06af\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u06a9\u0634 \u06a9\u0646\u06cc\u062f \u0645\u0634\u06a9\u0644 \u0628\u0632\u0631\u06af\u06cc \u0646\u06cc\u0633\u062a. <code>getStaticProps.<\/code><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_85_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u0627\u06cc\u062f\u0647\" loading=\"lazy\" width=\"800\" height=\"400\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D9%BE%D8%B1%D8%AF%D8%A7%D8%B2%D8%B4_%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA_%D8%AE%D8%B1%DB%8C%D8%AF_%D9%88_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%B3%D8%B1%D9%86%D8%AE_%D9%87%D8%A7_%D8%A8%D9%87_Notion_%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8F\"><\/span>\n<p>  \u062f\u0631 \u062d\u0627\u0644 \u067e\u0631\u062f\u0627\u0632\u0634 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062e\u0631\u06cc\u062f \u0648 \u0627\u0641\u0632\u0648\u062f\u0646 \u0633\u0631\u0646\u062e \u0647\u0627 \u0628\u0647 Notion \ud83d\ude4b\ud83c\udffb\u200d\u2642\ufe0f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u062e\u0627\u0637\u0631 \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0645\u0627 \u06cc\u06a9 \u0648\u0628 \u0647\u0648\u06a9 \u0628\u0631\u0627\u06cc Stripe \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u06cc\u0645 \u062a\u0627 \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u067e\u0631\u062f\u0627\u062e\u062a\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u062f\u061f<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645\u060c \u0622\u0646 \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0647 Notion \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u062e\u0634\u06cc \u0627\u0632 \u0633\u0641\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0646\u06cc\u0633\u062a \u0648 \u062f\u0631 \u0645\u0633\u06cc\u0631 \u062f\u06cc\u06af\u0631\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f\u060c \u062f\u0631 \u0645\u0639\u0631\u0636 \u062f\u06cc\u062f \u0639\u0645\u0648\u0645 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0628\u0627\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0645\u062d\u0627\u0641\u0638\u062a \u06a9\u0646\u06cc\u0645 &#8211; Stripe \u06cc\u06a9 \u0631\u0627\u0647 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u0622\u0646 \u0628\u0627 Express \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u0627\u0645\u0627 \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0632 NextJS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u06a9\u0645\u06cc \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0627 \u0646\u0635\u0628 Micro \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install <\/span>micro@^10.0.1\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u062e\u0631\u06cc\u062f \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>pages\n<span class=\"nb\">touch <\/span>purchase.tsx\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0622\u0646 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/\/ &lt;reference types=\"stripe-event-types\" \/&gt;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">Stripe<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">stripe<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">buffer<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">micro<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">type<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NextApiRequest<\/span><span class=\"p\">,<\/span> <span class=\"nx\">NextApiResponse<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">stripe<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Stripe<\/span><span class=\"p\">(<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">PAYMENT_SECRET_KEY<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span> <span class=\"p\">{}<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">any<\/span><span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">config<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">api<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">bodyParser<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">}<\/span> <span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">handler<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextApiRequest<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">res<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextApiResponse<\/span>\n<span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">signature<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">headers<\/span><span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">stripe-signature<\/span><span class=\"dl\">\"<\/span><span class=\"p\">]<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">string<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">reqBuffer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">buffer<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">event<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stripe<\/span><span class=\"p\">.<\/span><span class=\"nx\">webhooks<\/span><span class=\"p\">.<\/span><span class=\"nx\">constructEvent<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">reqBuffer<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">signature<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">PAYMENT_SIGNING_SECRET<\/span><span class=\"o\">!<\/span>\n    <span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">Stripe<\/span><span class=\"p\">.<\/span><span class=\"nx\">DiscriminatedEvent<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span>\n      <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">type<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">checkout.session.async_payment_succeeded<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">&amp;&amp;<\/span>\n      <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">type<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">checkout.session.completed<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">({<\/span><span class=\"na\">invalid<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">});<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">?.<\/span><span class=\"nx\">data<\/span><span class=\"p\">?.<\/span><span class=\"nx\">object<\/span><span class=\"p\">?.<\/span><span class=\"nx\">payment_status<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">paid<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">({<\/span><span class=\"na\">invalid<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">});<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/\/ request is valid, let's add it to notion<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u0628\u0631\u0627\u06cc \u062a\u0627\u06cc\u06cc\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0633\u062a.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0647 \u062e\u0628\u0631 \u0627\u0633\u062a:<\/p>\n<ol>\n<li>\u0645\u0627 \u0628\u0627 \u062a\u0627\u06cc\u067e \u0648\u0627\u0631\u062f\u0627\u062a \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u06cc\u0645 (\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0646\u0635\u0628 \u06a9\u0631\u062f\u06cc\u0645 <code>stripe-event-types<\/code> \u0642\u0628\u0644 \u0627\u0632).<\/li>\n<li>\u0645\u0627 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u062c\u062f\u06cc\u062f Stripe \u0631\u0627 \u0628\u0627 \u06a9\u0644\u06cc\u062f \u0645\u062e\u0641\u06cc \u062e\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u06cc\u0645.<\/li>\n<li>\u0645\u0627 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u0645\u06cc \u06af\u0648\u06cc\u06cc\u0645 \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0647 JSON \u062a\u062c\u0632\u06cc\u0647 \u0646\u06a9\u0646\u062f \u0632\u06cc\u0631\u0627 Stripe \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0631\u0627 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>stripe-signature<\/code> \u0627\u0632 \u0633\u0631\u0628\u0631\u06af \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>constructEvent<\/code> \u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648 \u0627\u0637\u0644\u0627\u0639 \u0627\u0632 \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u06a9\u0647 Stripe \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<li>\u0645\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u0645 <code>checkout.session.async_payment_succeeded<\/code>;  \u0627\u06af\u0631 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u0645\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0646\u0627\u062f\u06cc\u062f\u0647 \u0645\u06cc \u06af\u06cc\u0631\u06cc\u0645.<\/li>\n<li>\u0627\u06af\u0631 \u0645\u0648\u0641\u0642 \u0634\u062f\u06cc\u0645\u060c \u0627\u0645\u0627 \u0645\u0634\u062a\u0631\u06cc \u067e\u0631\u062f\u0627\u062e\u062a \u0646\u06a9\u0631\u062f\u060c \u0645\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062a\u0648\u062c\u0647 \u0646\u06a9\u0631\u062f\u06cc\u0645.<\/li>\n<li>\u0645\u0627 \u062c\u0627\u06cc\u06cc \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0645\u0646\u0637\u0642 \u062e\u0631\u06cc\u062f \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645.<\/li>\n<\/ol>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0627\u06cc\u0646 \u0634\u0627\u0646\u0633 \u0634\u0645\u0627\u0633\u062a \u06a9\u0647 \u0645\u0646\u0637\u0642 \u0633\u0641\u0627\u0631\u0634\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.  \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0628\u0627\u0634\u062f:<\/p>\n<ul>\n<li>\u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u06cc\u06a9 \u062e\u0628\u0631\u0646\u0627\u0645\u0647<\/li>\n<li>\u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062b\u0628\u062a \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0627\u0634\u062a\u0631\u0627\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u06cc\u06a9 \u0644\u06cc\u0646\u06a9 \u0628\u0627 \u0622\u062f\u0631\u0633 \u062f\u0648\u0631\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<p>\u0648 \u0628\u0633\u06cc\u0627\u0631\u06cc \u062f\u06cc\u06af\u0631.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0645\u0648\u0631\u062f \u0645\u0627\u060c \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 Notion \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%85%D9%81%D9%87%D9%88%D9%85_%E2%9C%8D%F0%9F%8F%BB\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0641\u0647\u0648\u0645 \u270d\ud83c\udffb<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0628\u0627\u0632\u06cc \u0628\u0627 Notion\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0627\u062f\u063a\u0627\u0645 Notion \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0647 \u00ab\u0627\u062f\u063a\u0627\u0645\u200c\u0647\u0627\u06cc \u0645\u0646\u00bb \u0628\u0631\u0648\u06cc\u062f.<br \/>https:\/\/www.notion.so\/my-integrations<\/p>\n<p>\u0648 \u0631\u0648\u06cc &#8220;\u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u062c\u062f\u06cc\u062f&#8221; \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_984_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u0627\u062f\u063a\u0627\u0645\" loading=\"lazy\" width=\"800\" height=\"440\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0622\u0646 \u0641\u0642\u0637 \u0647\u0631 \u0646\u0627\u0645\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0631\u0648\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_654_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u0627\u0631\u0633\u0627\u0644\" loading=\"lazy\" width=\"800\" height=\"731\" title=\"\"><\/p>\n<p>\u0631\u0648\u06cc Show \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0644\u06cc\u062f \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_601_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"492\" title=\"\"><\/p>\n<p>\u0628\u0647 \u0641\u0627\u06cc\u0644 .env \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f \u0648 \u06a9\u0644\u06cc\u062f \u062c\u062f\u06cc\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>NOTION_KEY=secret_...\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0645\u0641\u0647\u0648\u0645 \u0633\u0631 \u0628\u0632\u0646\u06cc\u0645 \u0648 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_638_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.gif\" alt=\"\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\" loading=\"lazy\" width=\"600\" height=\"348\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062f\u0631 \u0645\u0639\u0631\u0636 API \u0642\u0631\u0627\u0631 \u0646\u0645\u06cc \u06af\u06cc\u0631\u062f \u0645\u06af\u0631 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0631\u0648\u06cc &#8220;&#8230;&#8221; \u0648 \u0633\u067e\u0633 &#8220;Add connections&#8221; \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0631\u0648\u06cc \u0627\u062f\u063a\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062c\u062f\u06cc\u062f \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482806_78_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.gif\" alt=\"\u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"600\" height=\"398\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0634\u0646\u0627\u0633\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>.env<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482806_274_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"306\" title=\"\"><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>NOTION_CUSTOMERS_DB=your_id\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0641\u06cc\u0644\u062f \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0647 \u0647\u0631 \u0634\u06a9\u0644\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u0646 \u0641\u06cc\u0644\u062f &#8220;\u0646\u0627\u0645&#8221; \u0631\u0627 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u0645 \u0648 \u0646\u0627\u0645 \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u0632 \u062e\u0631\u06cc\u062f Stripe \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0645.<\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u0646\u062f\u0647\u06cc\u062f \u0628\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0631\u062f\u0646\u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u0645<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> @notionhq\/client <span class=\"nt\">--save<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0646\u0637\u0642 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0646\u0627\u0645 \u0645\u0634\u062a\u0631\u06cc \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Client<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@notionhq\/client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">notion<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Client<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">auth<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NOTION_KEY<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"k\">await<\/span> <span class=\"nx\">notion<\/span><span class=\"p\">.<\/span><span class=\"nx\">pages<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">({<\/span>\n   <span class=\"na\">parent<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">database_id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NOTION_CUSTOMERS_DB<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n   <span class=\"p\">},<\/span>\n   <span class=\"na\">properties<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">Name<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n         <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n            <span class=\"p\">{<\/span>\n               <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n                  <span class=\"na\">content<\/span><span class=\"p\">:<\/span> <span class=\"nx\">event<\/span><span class=\"p\">?.<\/span><span class=\"nx\">data<\/span><span class=\"p\">?.<\/span><span class=\"nx\">object<\/span><span class=\"p\">?.<\/span><span class=\"nx\">customer_details<\/span><span class=\"p\">?.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n               <span class=\"p\">},<\/span>\n            <span class=\"p\">},<\/span>\n         <span class=\"p\">],<\/span>\n      <span class=\"p\">},<\/span>\n   <span class=\"p\">},<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a.<br \/>\u0645\u0627 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 Notion \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0627 \u06a9\u0644\u06cc\u062f \u0645\u062e\u0641\u06cc Notion \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0633\u067e\u0633 \u06cc\u06a9 \u0631\u062f\u06cc\u0641 \u062c\u062f\u06cc\u062f \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0628\u0627 \u0646\u0627\u0645 \u0645\u0634\u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0648 \u06a9\u062f \u062e\u0631\u06cc\u062f \u06a9\u0627\u0645\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/\/ &lt;reference types=\"stripe-event-types\" \/&gt;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">Stripe<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">stripe<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">buffer<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">micro<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">type<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NextApiRequest<\/span><span class=\"p\">,<\/span> <span class=\"nx\">NextApiResponse<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Client<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@notionhq\/client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">notion<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Client<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">auth<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NOTION_KEY<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">stripe<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Stripe<\/span><span class=\"p\">(<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">PAYMENT_SECRET_KEY<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span> <span class=\"p\">{}<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">any<\/span><span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">config<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">api<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">bodyParser<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">}<\/span> <span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">handler<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextApiRequest<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">res<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextApiResponse<\/span>\n<span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">signature<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">headers<\/span><span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">stripe-signature<\/span><span class=\"dl\">\"<\/span><span class=\"p\">]<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">string<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">reqBuffer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">buffer<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">event<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stripe<\/span><span class=\"p\">.<\/span><span class=\"nx\">webhooks<\/span><span class=\"p\">.<\/span><span class=\"nx\">constructEvent<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">reqBuffer<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">signature<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">PAYMENT_SIGNING_SECRET<\/span><span class=\"o\">!<\/span>\n    <span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">Stripe<\/span><span class=\"p\">.<\/span><span class=\"nx\">DiscriminatedEvent<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span>\n      <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">type<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">checkout.session.async_payment_succeeded<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">&amp;&amp;<\/span>\n      <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">type<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">checkout.session.completed<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">({<\/span><span class=\"na\">invalid<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">});<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">?.<\/span><span class=\"nx\">data<\/span><span class=\"p\">?.<\/span><span class=\"nx\">object<\/span><span class=\"p\">?.<\/span><span class=\"nx\">payment_status<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">paid<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">({<\/span><span class=\"na\">invalid<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">});<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">await<\/span> <span class=\"nx\">notion<\/span><span class=\"p\">.<\/span><span class=\"nx\">pages<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">parent<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">database_id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NOTION_CUSTOMERS_DB<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n        <span class=\"na\">properties<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">Name<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n              <span class=\"p\">{<\/span>\n                <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n                  <span class=\"na\">content<\/span><span class=\"p\">:<\/span> <span class=\"nx\">event<\/span><span class=\"p\">?.<\/span><span class=\"nx\">data<\/span><span class=\"p\">?.<\/span><span class=\"nx\">object<\/span><span class=\"p\">?.<\/span><span class=\"nx\">customer_details<\/span><span class=\"p\">?.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n                <span class=\"p\">},<\/span>\n              <span class=\"p\">},<\/span>\n            <span class=\"p\">],<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">({<\/span><span class=\"na\">success<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0686\u06cc\u0632\u06cc \u0645\u0634\u0627\u0628\u0647 \u0627\u06cc\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482806_429_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.png\" alt=\"\u0646\u062a\u0627\u06cc\u062c \u0646\u0647\u0627\u06cc\u06cc\" loading=\"lazy\" width=\"800\" height=\"234\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%DB%8C%D8%AE%DA%A9%D9%88%D8%A8_%DA%A9%D8%B1%D8%AF%DB%8C_%F0%9F%9A%80\"><\/span>\n<p>  \u0645\u06cc\u062e\u06a9\u0648\u0628 \u06a9\u0631\u062f\u06cc \ud83d\ude80<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0645\u06cc\u0646.<br \/>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0644 \u06a9\u062f \u0645\u0646\u0628\u0639 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f:<br \/>https:\/\/github.com\/github-20k\/growchief<\/p>\n<p>\u062f\u0631 \u0622\u0646\u062c\u0627 \u0686\u06cc\u0632\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u067e\u06cc\u062f\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f\u060c \u0645\u0627\u0646\u0646\u062f<\/p>\n<ul>\n<li>\u0646\u0645\u0627\u06cc\u0634 \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 DEV.TO<\/li>\n<li>\u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0632 Notion \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646 \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a (\u0633\u0628\u06a9 CMS)<\/li>\n<li>\u06a9\u0644 \u062c\u0631\u06cc\u0627\u0646 \u062e\u0631\u06cc\u062f<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482806_206_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.gif\" alt=\"\u067e\u0631\u0648\u0698\u0647 \u06a9\u0627\u0645\u0644\" loading=\"lazy\" width=\"600\" height=\"307\" data-animated=\"true\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%DB%8C_%D8%AA%D9%88%D8%A7%D9%86%DB%8C%D8%AF_%D8%A8%D9%87_%D9%85%D9%86_%DA%A9%D9%85%DA%A9_%DA%A9%D9%86%DB%8C%D8%AF%D8%9F_%E2%9D%A4%EF%B8%8F-2\"><\/span>\n<p>  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u06cc\u062f\u061f  \u2764\ufe0f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u0641\u06cc\u062f \u0628\u0648\u062f\u0647 \u0628\u0627\u0634\u062f \ud83d\ude80<br \/>\u0647\u0631 \u0633\u062a\u0627\u0631\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u0646 \u0628\u062f\u0647\u06cc\u062f \u06a9\u0645\u06a9 \u0628\u0632\u0631\u06af\u06cc \u0628\u0647 \u0645\u0646 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f <br \/>https:\/\/github.com\/github-20k\/growchief<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482805_748_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.gif\" alt=\"stargif\" loading=\"lazy\" width=\"360\" height=\"78\" data-animated=\"true\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1688482806_413_\u0633\u0627\u062e\u062a-\u0635\u0641\u062d\u0647-\u0642\u06cc\u0645\u062a-\u06af\u0630\u0627\u0631\u06cc-\u0628\u0627-NextJS.gif\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"487\" height=\"498\" data-animated=\"true\" title=\"\"><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0635\u0641\u062d\u0647 \u0627\u06cc \u0628\u0627 \u0633\u0637\u0648\u062d \u0642\u06cc\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0645\u062a\u0639\u062f\u062f \u0645\u06cc \u0633\u0627\u0632\u06cc\u0645.\u0628\u0627\u0632\u062f\u06cc\u062f\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u0646\u062f &#8220;\u062e\u0631\u06cc\u062f&#8221; \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0628\u0647 \u0635\u0641\u062d\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u0631\u0648\u06cc\u062f. \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644\u060c \u0645\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":29199,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-29198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/29198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=29198"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/29198\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/29199"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=29198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=29198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=29198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}