Estoy tratando de agregar el botón de PayPal usando React.
De acuerdo con la guía de desarrollo de paypals, debo incluir
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script> en <head></head> en la etiqueta index.html y luego use
import React from "react"; import ReactDOM from "react-dom" const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM }); function YourComponent() { const createOrder = (data, actions) => { return actions.order.create({ purchase_units: [ { amount: { value: "0.01", }, }, ], }); }; const onApprove = (data, actions) => { return actions.order.capture(); }; return ( <PayPalButton createOrder={(data, actions) => createOrder(data, actions)} onApprove={(data, actions) => onApprove(data, actions)} /> ); } Sin embargo const PayPalButton = paypal.Buttons.driver("react", {React, ReactDOM});
línea arroja error
'paypal' is not defined no-undef
Si el objeto incluido desde el <script> externo no está cargado. ¿Cómo puedo cargar el objeto de carga desde <script> externo en el componente React entonces?
Hay dos formas de cuadrar ese círculo:
const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM }); Recuerde que en Javascript las variables globales también son propiedades del objeto global ( window en el navegador). De hecho, me gusta hacer esto para las variables globales, porque deja muy claro en el código que esta cosa es una variable global en lugar de leerla y decir "¿WTF de dónde vino eso?".
También puede (suponiendo que ESLint) suprimir la advertencia de pelusa directamente (NO recomendado):
// eslint-disable-line no-undef const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });