{"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\/zh\/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\u524d\u7aef\u5982\u4f55\u96c6\u6210\u83f2\u5f8b\u5bbe\u652f\u4ed8\u7ec4\u4ef6\uff1f"},"content":{"rendered":"

# React\u524d\u7aef\u96c6\u6210\u83f2\u5f8b\u5bbe\u652f\u4ed8\u7ec4\u4ef6\u6307\u5357<\/p>\n

\u5728React\u5e94\u7528\u4e2d\u96c6\u6210\u83f2\u5f8b\u5bbe\u652f\u4ed8\u7ec4\u4ef6\u901a\u5e38\u6d89\u53ca\u4ee5\u4e0b\u51e0\u4e2a\u5173\u952e\u6b65\u9aa4\uff1a<\/p>\n

1. \u9009\u62e9\u9002\u5408\u7684\u83f2\u5f8b\u5bbe\u652f\u4ed8\u63d0\u4f9b\u5546<\/p>\n

\u5e38\u89c1\u9009\u9879\u5305\u62ec\uff1a
\n\u2013 GCash
\n\u2013 PayMaya
\n\u2013 Dragonpay
\n\u2013 GrabPay
\n\u2013 Coins.ph<\/p>\n

2. \u57fa\u672c\u96c6\u6210\u65b9\u6cd5<\/p>\n

a) SDK\/API\u65b9\u5f0f\u96c6\u6210\uff08\u4ee5PayMaya\u4e3a\u4f8b\uff09<\/p>\n

\u201c`javascript
\nimport { useEffect } from \u2018react\u2019;<\/p>\n

function PaymentComponent() {
\n useEffect(() => {
\n \/\/ Load PayMaya SDK script dynamically
\n const script = document.createElement(\u2018script\u2019);
\n script.src = \u2018https:\/\/payments.paymaya.com\/paymaya-payment-sdk.js\u2019;
\n script.async = true;<\/p>\n

script.onload = () => {
\n \/\/ Initialize payment after SDK loads
\n window.PayMayaSDK.init({
\n publicKey: \u2018YOUR_PUBLIC_KEY\u2019,
\n isSandbox: true, \/\/ false for production
\n });<\/p>\n

window.PayMayaSDK.createPayment({
\n amount: totalAmount,
\n description: \u201cProduct purchase\u201d,
\n successUrl: `${window.location.origin}\/payment-success`,
\n failureUrl: `${window.location.origin}\/payment-failed`
\n });
\n };<\/p>\n

document.body.appendChild(script);<\/p>\n

return () => {
\n document.body.removeChild(script);
\n };
\n }, []);<\/p>\n

return <\/p>\n

<\/div>\n

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

b) Redirect\u65b9\u5f0f\uff08\u9002\u7528\u4e8e\u5927\u591a\u6570\u672c\u5730\u652f\u4ed8\uff09<\/p>\n

\u201c`javascript
\nconst handlePaymentRedirect = async (provider) => {
\n try {
\n const response = await fetch(\u2018\/api\/create-payment\u2019, {
\n method: \u2018POST\u2019,
\n body: JSON.stringify({ provider, amount }),
\n });<\/p>\n

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

if(data.paymentUrl) {
\n window.location.href = data.paymentUrl; \/\/ Redirect to payment page
\n }
\n } catch(error) {
\n console.error(\u2018Payment error:\u2019, error);
\n }
\n}<\/p>\n

\/\/ In your component:
\n