{"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\/en\/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":"How does the React front-end integrate with the Philippine Payments component?"},"content":{"rendered":"

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

Integrating a Philippine payment component in a React application usually involves the following key steps:<\/p>\n

1. Choosing the right Philippine payment provider<\/p>\n

Common options include:
\n- GCash
\n- PayMaya
\n- Dragonpay
\n- GrabPay
\n- Coins.ph<\/p>\n

2. Basic integration methodology<\/p>\n

a) Integration by SDK\/API (PayMaya as an example)<\/p>\n

\"`javascript
\nimport { useEffect } from 'react' ;<\/p>\n

function PaymentComponent() {
\n useEffect(() => {
\n \/\/ Load the PayMaya SDK script dynamically.
\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 \/\/ Initialize payment after SDK loads
\n window.PayMayaSDK.init({
\n publicKey: 'YOUR_PUBLIC_KEY',
\n isSandbox: true, \/\/ false for production
\n });<\/p>\n

window.PayMayaSDK.createPayment({
\n amount: totalAmount,
\n description: \"Product purchase\",
\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 method (for most local payments)<\/p>\n

\"`javascript
\nconst handlePaymentRedirect = async (provider) => {
\n try {
\n const response = await fetch('\/api\/create-payment', {
\n method: '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; \/\/ Redirect to payment page
\n }
\n } catch(error) {
\n console.error('Payment error:', error);
\n }
\n}<\/p>\n

\/\/ In your component.
\n