Skip to content

Instantly share code, notes, and snippets.

@mattgle
Last active October 2, 2021 23:59
Show Gist options
  • Save mattgle/c14ad7ccd6bea85ddd7e30512dfd0faa to your computer and use it in GitHub Desktop.
Save mattgle/c14ad7ccd6bea85ddd7e30512dfd0faa to your computer and use it in GitHub Desktop.
Integracion de Mercadopago CheckoutPro en ReactJS [Sin usar FunctionComponents o ClassComponents]
export const redirectToMercadoPago = (transactionId: string) => {
const loadScript = (url: string, callback: () => void) => {
let script = document.createElement('script');
script.type = 'text/javascript';
if (script.readyState) {
script.onreadystatechange = () => {
if (
script.readyState === 'loaded' ||
script.readyState === 'complete'
) {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = () => callback();
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
};
const handleScriptLoad = () => {
const mp = new window.MercadoPago(process.env.REACT_APP_MERCADOPAGO_KEY, {
locale: 'es-AR'
});
mp.checkout({
preference: {
id: transactionId
},
autoOpen: true
});
};
loadScript('https://sdk.mercadopago.com/js/v2', handleScriptLoad);
};
@mattgle
Copy link
Author

mattgle commented Sep 23, 2021

//ES

La función loadScript sirve para cargar cualquier tipo de script, por lo tanto podría ser extraída de la función redirectToMercadoPago. En este caso dejo la función adentro ya que me interesa documentarla en este gist.

//EN

The function loadScript works for any script so it could be extracted from redirectToMercadoPago. In this case I left the function inside to be documented in this gist.

@Julian-quintero
Copy link

Hola!
El typescript me da problema sale "property readyState does not exist on type 'HTMLScriptElement'", expandiste el HtmlElement de alguna manera? gracias.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment