{"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\/ru\/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":"\u041a\u0430\u043a \u0444\u0440\u043e\u043d\u0442-\u044d\u043d\u0434 React \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c Philippine Payments?"},"content":{"rendered":"

# React Frontend Integration Guide for Philippine Payment Components<\/p>\n

\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0444\u0438\u043b\u0438\u043f\u043f\u0438\u043d\u0441\u043a\u0438\u0445 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 React \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0448\u0430\u0433\u0438:<\/p>\n

1. \u0412\u044b\u0431\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430 \u0444\u0438\u043b\u0438\u043f\u043f\u0438\u043d\u0441\u043a\u0438\u0445 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439<\/p>\n

\u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442:
\n- GCash
\n- PayMaya
\n- Dragonpay
\n- GrabPay
\n- Coins.ph<\/p>\n

2. \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438<\/p>\n

a) \u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SDK\/API (\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 PayMaya)<\/p>\n

\"javascript
\nimport { useEffect } \u0438\u0437 'react' ;<\/p>\n

function PaymentComponent() {
\n useEffect(() => {
\n \/\/ \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0441\u043a\u0440\u0438\u043f\u0442 PayMaya SDK \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438.
\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 \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u043b\u0430\u0442\u0435\u0436 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 SDK
\n window.PayMayaSDK.init({
\n publicKey: 'YOUR_PUBLIC_KEY',
\n isSandbox: true, \/\/ false \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430
\n });<\/p>\n

window.PayMayaSDK.createPayment({
\n \u0441\u0443\u043c\u043c\u0430: totalAmount,
\n \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435: \"\u041f\u043e\u043a\u0443\u043f\u043a\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\",
\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

\u0432\u043e\u0437\u0432\u0440\u0430\u0442 <\/p>\n

<\/div>\n

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

b) \u041c\u0435\u0442\u043e\u0434 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u043c\u0435\u0441\u0442\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439)<\/p>\n

\"javascript
\nconst handlePaymentRedirect = async (provider) => {
\n \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 {
\n const response = await fetch('\/api\/create-payment', {
\n \u043c\u0435\u0442\u043e\u0434: 'POST',
\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; \/\/ \u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u043f\u043b\u0430\u0442\u044b
\n }
\n } catch(error) {
\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u043b\u0430\u0442\u0435\u0436\u0430:', error);
\n }
\n}<\/p>\n

\/\/ \u0412 \u0432\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.
\n