0
198
Views¿Cómo tener un controlador personalizado en lugar de un botón de PayPal en React?
Tengo un sitio web con múltiples formas de pago. Puedo cambiar entre ellos y luego tengo un botón con la etiqueta "Continuar con el pago" que cuando haces clic, hace algo dependiendo del método de pago elegido. La función del controlador se parece a esto:
const handlePayment = (method) => { if(method === paymentMethods.STRIPE){ // do something } if(method === paymentMethods.PAYPAL){ // do something else } }El problema es que miré los documentos y siempre se trata de mostrar un botón de PayPal, no quiero un botón de PayPal, quiero abrir el formulario de PayPal directamente desde mi botón, cuando se selecciona un método.
Quiero decir que quiero hacerlo programáticamente. ¿Hay alguna manera de hacer esto? No quiero hacer una solución pirateada ocultando el botón o activando el clic o alguna cosa rara...
El componente React PayPal es solo un envoltorio para JS SDK .
Mi interfaz de usuario se parece a esto: Me gustaría abrir el formulario de pago de PayPal cuando hago clic en Pagar, solo si se selecciona PayPal.
1 answers
Answer question0
Si usa el SDK de PayPal JS para abrir el pago, debe usar su botón y el usuario debe hacer clic en él. PayPal hace esto intencionalmente para que el botón que se muestra use su marca coherente.
Si desea una alternativa, puede realizar la integración sin JS SDK (solo API REST) y tener su propio botón que redirige a la página de PayPal para su aprobación, que luego regresará a su sitio. Este es un patrón de integración antiguo, para sitios web antiguos, y no se recomienda.
A pesar de sus dudas y de su deseo de no utilizarlo, JS SDK y su botón en un contenedor del tamaño de sus requisitos es, de hecho, la mejor solución disponible.
Según la interfaz de usuario que se muestra, lo que podría optar por hacer es ocultar su botón "Pagar" y reemplazarlo con uno que diga "Pagar con PayPal" cuando se seleccione ese método, que podría verse así (dimensionado para adaptarse a su contenedor): 
Aquí hay una muestra de HTML/JS para eso, puede hacer lo mismo desde react-paypal-js:
<script src="https://www.paypal.com/sdk/js?client-id=test¤cy=USD"></script> <div id="paypal-button-container"></div> <script> paypal.Buttons({ fundingSource: paypal.FUNDING.PAYPAL, style: { color: "blue", label: "pay" }, // Set up the transaction createOrder: function(data, actions) { return actions.order.create({ purchase_units: [{ amount: { value: '88.44' } }] }); }, // Finalize the transaction onApprove: function(data, actions) { return actions.order.capture().then(function(orderData) { // Successful capture! For demo purposes: console.log('Capture result', orderData, JSON.stringify(orderData, null, 2)); var transaction = orderData.purchase_units[0].payments.captures[0]; alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details'); // Replace the above to show a success message within this page, eg // const element = document.getElementById('paypal-button-container'); // element.innerHTML = ''; // element.innerHTML = '<h3>Thank you for your payment!</h3>'; // Or go to another URL: actions.redirect('thank_you.html'); }); } }).render('#paypal-button-container'); </script>