feat: randomId implementation

portone-io · Dec 4, 2024 · 3e39fd6 · 3e39fd6
1 parent 0317005
commit 3e39fd6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/routes/(root)/opi/ko/quick-guide/payment/_preview/frontend/html/index.html.ts b/src/routes/(root)/opi/ko/quick-guide/payment/_preview/frontend/html/index.html.ts
@@ -112,6 +112,13 @@ export default code<{
           window.checkoutDialog.onsubmit = async (e) => {
             e.preventDefault()
             this.setWaitingPayment(true)
+
+            function randomId() {
+              return [...crypto.getRandomValues(new Uint32Array(2))]
+                .map((word) => word.toString(16).padStart(8, "0"))
+                .join("")
+            }
+
             ${({ section }) => section("client:request-payment")`
               ${({ section }) => section("client:request-payment:payment-id")`
             const paymentId = randomId()
@@ -226,11 +233,6 @@ export default code<{
           window.virtualAccountDialog.open = true
         }
         `}
-        function randomId() {
-          return [...crypto.getRandomValues(new Uint32Array(2))]
-            .map((word) => word.toString(16).padStart(8, "0"))
-            .join("")
-        }
       }
     </script>
   </body>

diff --git a/src/routes/(root)/opi/ko/quick-guide/payment/_preview/frontend/react/app.jsx.ts b/src/routes/(root)/opi/ko/quick-guide/payment/_preview/frontend/react/app.jsx.ts
@@ -17,7 +17,6 @@ ${({ section }) => section("client:import-portone-sdk")`
 import PortOne from "@portone/browser-sdk/v2"
 `}
 import { useEffect, useState } from "react"
-import { randomId } from "./random"
 
 export function App() {
   const [item, setItem] = useState(null)
@@ -44,6 +43,12 @@ export function App() {
     )
   }
 
+  function randomId() {
+    return [...crypto.getRandomValues(new Uint32Array(2))]
+      .map((word) => word.toString(16).padStart(8, "0"))
+      .join("")
+  }
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     setPaymentStatus({ status: "PENDING" })