Source: input/MercadoPagoButton.js

import React from "react";

/**
 * Componente que renderiza un boton de Mercado Pago (checkout pro)
 * @name Reactor.Components.Input.MercadoPagoButton
 * @param {string} preference_id id de la preferencia
 * @param {string} public_key key pública de Mercado Pago
 * @param {string} link_options Json string con los atributos que se quieran dar al boton
 * @class 
 * @example 
<mercadopago_button preference_id="lkdjalkfjlaksfjlakjlf" public_key="TEST-fjflksdjfls" style="color:red">Pagar</mercadopago_button>
 */

export const MercadoPagoButton = ({preference_id, public_key, link_options, children}) => {
  
  const handleClick = () => {  
    const mp = new window.MercadoPago(public_key, {
      locale: 'es-AR'
    });
    mp.checkout({
      preference: {
        id: preference_id
      },
      autoOpen: true
    });
  }

  return (
    <a
      href= "#"
      {...link_options ? JSON.parse(link_options) : {}}
      onClick={handleClick}
    >{children}</a>
  );
}