Estoy teniendo el problema de actualizar la informacion del los botones creados con el SDK de Paypal en react.
En mi app.js creo la vista con los componentes y uno de estos crea los botones de Paypal
usando Javascript, al rellenar el monto a pagar que deseo y hacer click en el boton la informacion actualizada del monto no esta llegando, solo la informacion que obtiene de mi api al levantar la vista.
De esta forma estoy llamando el Boton de paypal con react: En el state tengo la info que viene por api y se la asigno mediante el constructor.
<Col xs={12} className="mt-3">
<Row className="mt-3">
<Col xs={3}>
</Col>
<Col xs={6} >
<ButtonPaypal
IdLink={this.state.IdLink}
IdCredito={this.state.IdCredito}
Dolares={this.state.MontoCargado}
/>
</Col>
</Row>
</Col>
En el Componente de texto tengo un evento que actualiza la informacion mediante el evento, y lo cambia correctamente ya que hasta el archivo que contiene los botones de paypal lleva bien la info.
EventoIngresarColones(event) {
this.setState({ MontoCargado: event.target.value });
console.log('Log:' + this.state.MontoCargado);
}
<Form.Control placeholder='Ingresar Colones'
id="InputMonto"
onChange={this.EventoIngresarColones}
style={{ backgroundColor: "#d6f0fa", color: "#4ebce9", borderStyle: "none" }} />
Aqui en la creacion del boton con JavaScript, que al momento de dibujar estos botones en pantalla obtiene la info que viene de la api pero no la cantidad de dolares que ingreso a mano, entonces esa info no la logro actualizar.
export function ButtonPaypal(IdLink) {
const paypalReferencia = React.useRef();
React.useEffect(() => {
window.paypal.Buttons({
createOrder: function () {
return fetch(`https://localhost:44386/Api/Paypal/ObtenerPagoPaypal?IdCredito=${IdLink.IdCredito}&Dolares=${IdLink.Dolares}&IdLink=${IdLink.IdLink}`, {
method: 'post',
headers: {
'content-type': 'application/json'
}
}).then(function (res) {
return res.json();
}).then(function (data) {
return data.id; // Use the key sent by your server's response, ex. 'id' or 'token'
});
}
}).render("#paypalReferencia");
},[]);
return <div id="paypalReferencia"></div>
}