{"id":3288,"date":"2025-06-12T08:07:51","date_gmt":"2025-06-12T00:07:51","guid":{"rendered":"https:\/\/www.deekpay.com\/?p=3288"},"modified":"2025-06-12T08:07:51","modified_gmt":"2025-06-12T00:07:51","slug":"react%e5%89%8d%e7%ab%af%e5%a6%82%e4%bd%95%e9%9b%86%e6%88%90%e8%8f%b2%e5%be%8b%e5%ae%be%e6%94%af%e4%bb%98%e7%bb%84%e4%bb%b6%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/www.deekpay.com\/ko\/2025\/06\/12\/react%e5%89%8d%e7%ab%af%e5%a6%82%e4%bd%95%e9%9b%86%e6%88%90%e8%8f%b2%e5%be%8b%e5%ae%be%e6%94%af%e4%bb%98%e7%bb%84%e4%bb%b6%ef%bc%9f\/","title":{"rendered":"React \ud504\ub860\ud2b8\uc5d4\ub4dc\ub294 \ud544\ub9ac\ud540 \uacb0\uc81c \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc5b4\ub5bb\uac8c \ud1b5\ud569\ub418\ub098\uc694?"},"content":{"rendered":"

# \ud544\ub9ac\ud540 \uacb0\uc81c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc704\ud55c React \ud504\ub860\ud2b8\uc5d4\ub4dc \ud1b5\ud569 \uac00\uc774\ub4dc<\/p>\n

React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ud544\ub9ac\ud540 \uacb0\uc81c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud1b5\ud569\ud558\ub824\uba74 \uc77c\ubc18\uc801\uc73c\ub85c \ub2e4\uc74c\uacfc \uac19\uc740 \uc8fc\uc694 \ub2e8\uacc4\uac00 \ud3ec\ud568\ub429\ub2c8\ub2e4:<\/p>\n

1. \uc62c\ubc14\ub978 \ud544\ub9ac\ud540 \uacb0\uc81c \uc11c\ube44\uc2a4 \uc81c\uacf5\uc5c5\uccb4 \uc120\ud0dd\ud558\uae30<\/p>\n

\uc77c\ubc18\uc801\uc778 \uc635\uc158\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:
\n- GCash
\n- PayMaya
\n- \ub4dc\ub798\uace4\ud398\uc774
\n- GrabPay
\n- Coins.ph<\/p>\n

2. \uae30\ubcf8 \ud1b5\ud569 \ubc29\ubc95\ub860<\/p>\n

a) SDK\/API\ub97c \ud1b5\ud55c \ud1b5\ud569(PayMaya\ub97c \uc608\ub85c \ub4e4 \uc218 \uc788\uc74c)<\/p>\n

\"`javascript
\n'react'\uc5d0\uc11c { useEffect }\ub97c \uac00\uc838\uc635\ub2c8\ub2e4;<\/p>\n

\ud568\uc218 PaymentComponent() {
\n \uc0ac\uc6a9 \ud6a8\uacfc(() => {
\n \/\/ PayMaya SDK \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ub3d9\uc801\uc73c\ub85c \ub85c\ub4dc\ud569\ub2c8\ub2e4.
\n const script = document.createElement('script');
\n script.src = 'https:\/\/payments.paymaya.com\/paymaya-payment-sdk.js';
\n script.async = true;<\/p>\n

script.onload = () => {
\n \/\/ SDK \ub85c\ub4dc \ud6c4 \uacb0\uc81c \ucd08\uae30\ud654\ud558\uae30
\n window.PayMayaSDK.init({
\n publicKey: 'YOUR_PUBLIC_KEY',
\n isSandbox: true, \/\/ \ud504\ub85c\ub355\uc158\uc758 \uacbd\uc6b0 false
\n });<\/p>\n

window.PayMayaSDK.createPayment({
\n \uae08\uc561: \ucd1d\uc561
\n \uc124\uba85: \"\uc81c\ud488 \uad6c\ub9e4\",
\n \uc131\uacf5 URL: `${window.location.origin}\/payment-success`,
\n failureUl: `${window.location.origin}\/payment-failed`
\n });
\n };<\/p>\n

document.body.appendChild(\uc2a4\ud06c\ub9bd\ud2b8);<\/p>\n

\ubc18\ud658 () => {
\n document.body.removeChild(\uc2a4\ud06c\ub9bd\ud2b8);
\n };
\n }, []);<\/p>\n

\ubc18\ud658 <\/p>\n

<\/div>\n

;
\n}
\n“`<\/p>\n

b) \ub9ac\ub514\ub809\uc158 \ubc29\ubc95(\ub300\ubd80\ubd84\uc758 \ud604\uc9c0 \uacb0\uc81c\uc758 \uacbd\uc6b0)<\/p>\n

\"`javascript
\nconst handlePaymentRedirect = async (provider) => {
\n \uc2dc\ub3c4 {
\n const response = await fetch('\/api\/create-payment', {
\n \uba54\uc11c\ub4dc: 'POST',
\n body: JSON.stringify({ \uacf5\uae09\uc790, \uae08\uc561 }),
\n });<\/p>\n

const data = await response.json();<\/p>\n

if(data.paymentUl) {
\n window.location.href = data.paymentUrl; \/\/ \uacb0\uc81c \ud398\uc774\uc9c0\ub85c \ub9ac\ub514\ub809\uc158\ud569\ub2c8\ub2e4.
\n }
\n } catch(error) {
\n console.error('\uacb0\uc81c \uc624\ub958:', error);
\n }
\n}<\/p>\n

\/\/ \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c.
\n