Uso de React y BTCPayServer para recibir pagos de Bitcoin

Navegando por Twitter, comencé a ver diferentes cuentas que ofrecían productos / servicios para bitcoin; sintió curiosidad por saber cómo estaban procesando estos pagos. ¿Fue manual? ¿O tenían algún tipo de automatización para manejar esto fácilmente?

¿Fue manual? ¿O tenían algo de automatización?

Después de preguntar, comencé a ver que muchos de ellos simplemente u usaron el método “enviar pago a esta dirección y luego enviarme el ID de transacción”. Esto implicaba que el comprador, en primer lugar, tenía algunos conocimientos básicos de transacciones y exploradores de bloques y, en segundo lugar, tendría que realizar la transacción, entrar en un explorador de bloques, encontrar el ID de transacción respectivo y finalmente enviarlo al vendedor. Todo esto con la esperanza de que algún mal actor no esté investigando las transacciones y reclame esa identificación de transacción primero y para sí mismo.

Por otro lado, el vendedor debería recibir el ID de la transacción y verificar manualmente que se haya realizado. Todo esto, más la pérdida de privacidad (cualquiera podía ingresar a la dirección proporcionada y ver todas las transacciones), fue un proceso complicado tanto para el vendedor como para el comprador.

Con todo el desarrollo que veo en la criptoesfera, tenía que haber una solución mucho más simple para todo esto, y después de algunas investigaciones finalmente me topé con BTCPayServer. Fue una solución perfecta. Puede generar diferentes direcciones para cada factura, realizar un seguimiento de ellas, no cobra tarifas, no necesita KYC, usted controla sus claves y, lo mejor de todo, es completamente de código abierto. Puede [preferiblemente] alojarlo usted mismo o pedir prestado el servicio de uno entre una docena de sitios web diferentes por $ 0.

Ahora le mostraré cómo configurar una tienda muy simple, que vende calcetines y acepta bitcoins, utilizando un proveedor de BTCPayServer llamado BTCPayJungle.

¡Haremos todo esto por un precio total de $ 0!

Creación de una tienda de calcetines con BTCPayServer

Dirígete a BTCPayJungle y registra tu cuenta.

Después de registrarse, vaya a Tiendas y haga clic en “Crear una nueva tienda”. Dale a tu tienda un nombre increíble y haz clic en “Crear”.

Una vez dentro, en “Configuración general”, la parte más importante es configurar los esquemas de derivación que puede obtener de su billetera BTC. Recomiendo encarecidamente tener una billetera de hardware Ledger ya que ya tiene la integración con BTCPayServer configurada.

[Bonificación] Si tiene un nodo relámpago, también puede configurarlo para comenzar a recibir pagos relámpago.

Después de haber agregado el esquema de derivación para BTC (y LTC si lo desea), diríjase a “Experiencia de pago”, donde personalizaremos el aspecto del módulo de pago.

Aquí agregaremos un logotipo personalizado (alojado con ImgSafe), una hoja de estilo CSS personalizada (alojada con Dropbox) y un título para la página de pago. Ahora tenemos una experiencia de pago más personalizada 🙂 Si desea utilizar el mío, puede hacerlo con estos enlaces:

Imagen: https://i.imgsafe.org/bb/bb032c48d8.png

CSS: https://dl.dropbox.com/s/ce5mtw6rocvlz7j/bestsockstore.css?dl=0

Después de todas estas configuraciones generales, ahora podemos crear la tienda real, así que vaya a Aplicaciones y haga clic en “Crear nueva aplicación”. Complete el nombre, deje el tipo de aplicación como “Punto de venta” y seleccione la tienda que acaba de crear.

La aplicación se establecerá de forma predeterminada en una tienda de té, por lo que debemos cambiar algunos campos. Cambie el nombre y anule la selección de la casilla de verificación “El usuario puede ingresar una cantidad personalizada”. Luego reemplace el texto de la Plantilla con lo siguiente:

Finalmente, dado que BTCPayServer está construido sobre Bootstrap, podemos agregar un archivo css en el campo “Archivo CSS de bootstrap personalizado”. Dado que estos son unos calcetines increíbles, quería darle algo de clase y usé el tema Lux 🙂

¡Ahí lo tenemos! ¡Una aplicación de punto de venta personalizada que los usuarios pueden usar para comprar calcetines!

¡Mira la tienda aquí!

* Ninguna de las imágenes es mía y si realmente quieres comprar estos calcetines, acércate aquí.

React Frontend para nuestra tienda de calcetines

Ahora, ¿dónde encaja React con todo esto?

Primero, la aplicación funciona mejor como un punto de venta físico, lo que significa que el cliente está en la tienda y tiene la aplicación abierta, pero no es realmente útil si queremos tener un sitio web en el que cualquier persona del mundo pueda comprar de nosotros. No podemos personalizar la tienda, no podemos darle una URL personalizada, colocar nuestro propio ícono o agregar una página de contacto para nuestros clientes.

Una opción hubiera sido crear una tienda de WordPress que se pueda integrar fácilmente con un complemento BTCPayServer, pero tendría que estar alojada, lo que significa $$, y para algo tan simple, como lo que estaba buscando, era demasiado.

Como quería una aplicación de una sola página y sin backend, decidí usar React. Por supuesto, ser un desarrollador y entusiasta de React participó en esta decisión.

Vamos a construirlo.

Estas son las herramientas que usaremos:

Primero que nada, cree su aplicación e instale las dependencias que usaremos.

Si todo se instaló correctamente y ejecuta npm start , debería obtener el siguiente sitio en su navegador

Ahora, reemplace todo en App.css con lo siguiente

Todo en index.js con lo siguiente

Y todo en App.js con lo siguiente

Aquí creamos el diseño principal de la página que consta de un encabezado con un icono y tres botones y el contenido donde se mostrarán las diferentes páginas.

Entonces, ahora creemos la vista CardGrid donde se mostrarán los calcetines.

Cree una nueva carpeta dentro de la carpeta src llamada components y cree estos tres archivos dentro: CardGrid.jsx , PaymentBox. jsx y SockCard.jsx. Y complete cada uno con el código respectivo que se muestra a continuación.

Estos tres archivos crean la interfaz de usuario en esta estructura:

Ahora, si ejecuta npm start , debería ver la tienda de calcetines con todas sus diferentes vistas.

Pero, como probablemente se habrá dado cuenta, los botones “Para pagar” no hacen nada. Arreglemos eso.

Unión de la interfaz React a BTCPayServer

Finalmente, uniremos BTCPayServer a la interfaz de React que acabamos de construir. Así que dirígete a BTCPayJungle y luego a la configuración de la aplicación que creamos anteriormente.

Debajo del campo “Plantilla”, verá una sección llamada “Botón de host externamente” y un formulario que debería verse así:

Tendremos que agregar partes de este formulario dentro del div del cuadro de pago como se muestra a continuación con los cuadros rojos.

Por último, su componente PaymentBox debería verse así:

¡Y eso es todo! Como has visto, la integración es sencilla. No es necesario crear un backend o manejar cookies. Muy sencillo utilizando una solicitud de publicación proporcionada por la API de BTCPayServer. Ahora, si hace clic en el botón “Pago”, debería ser redirigido al módulo de pago que creamos y personalizamos a nuestro gusto.

[¡Implementar GRATIS!]

Ahora que tenemos todo configurado, dado que es una aplicación muy simple sin backend, podemos implementar fácilmente nuestra aplicación React por $ 0 usando Netlify o Surge. Personalmente, recomendaría Netlify ya que incluye HTTPS en su nivel gratuito, mientras que Surge no.

Conclusión

¡Así que terminamos la tienda completa por un costo total de $ 0 y solo nos tomó un par de horas! Yo diría que para las tiendas simples vale la pena el tiempo y el esfuerzo. No más pedirle a los usuarios que entren en exploradores de bloques y busquen ID de transacciones, no más problemas de privacidad o terceros.

Usar este método para recibir pagos es muy simple pero tiene sus inconvenientes.

Fue muy bueno experimentar con estas herramientas y espero haberte demostrado que con conocimientos básicos de programación puedes crear una tienda en línea que reciba Bitcoin. Todo esto, utilizando solo tecnología de código abierto, para que ningún tercero pueda censurarte, tener el control de tus claves o cobrarle una tarifa.

¡Espero que hayas disfrutado de este pequeño tutorial!

Si tiene alguna pregunta sobre el tema, no dude en ponerse en contacto conmigo en Twitter.