- WARNING
-
De react tengo cero conocimientos, lo único que sé copypastear muy bien
Recientemente, he publicado una aplicación hecha totalmente en React (un framework javascript para desarrollar aplicaciones web).
La aplicación en sí no es muy complicada, simplemente sirve para convertir unos ficheros XML de la Seguridad Social a Excel y viceversa, pero quería darle un toque moderno y hacerla visualmente atractiva así que he buscado algún ejemplo React que me gustara y del que poder partir
- INFO
-
La aplicación en concreto está en https://creta.edn.es
Una vez que me peleé con el framework y entendí un poco cómo funciona pude desplegar la aplicación y ya hay algún usuario usándola e incluso me han reportado algún bug (que ha sido oportunamente corregido).
En su momento me planteé hacer la aplicación accesible mediante un pago, tipo una subscripción o un pago único así que me creé una cuenta de Stripe. Sin embargo, una vez me puse con la aplicación decidí que no me compensaba el esfuerzo de crear todo el sistema de carrito de la compra para una aplicación tan simple así que la publiqué abierta.
Sin embargo, ahora que ya está publicada y en uso me he planteado si la gente que la usa se animaría a realizar un pequeño donativo, aunque fueran un par de euros para ayudar en el mantenimiento del hosting. Realmente no lo necesitaría pero por un lado me gustaría comprobar si la gente es consciente de que estas cosas nos cuestan tiempo y esfuerzo y por otra me interesaba investigar la integración con Stripe.
Descartado el implementar un carrito de la compra descubrí que Stripe permite generar un trozo de código HTML que puedes integrar en tu web para que el usuario pueda hacer pagos simples, así que me propuse incluir un botón de "Donar" en la aplicación.
Como digo, Stripe cuenta con librerías para muchos lenguajes y componentes web para integrar en tu aplicación, pero el caso concreto de insertar un código HTML en React no era tan trivial (para un backend sin conocimientos como yo).
Al final la solución ha sido así de sencilla:
Componente StripeCard
En la carpeta component, he creado un subdirectorio StripeCard con dos ficheros
types.ts
export interface StripeCardProps {
buttonId?: string;
publishableKey?: string;
}
Para definir los dos properties que requiere el componente (ambos proporcionados por Stripe cuando creas el botón desde su dashboard)
index.ts
import * as React from 'react'
import { StripeCardProps } from './types';
declare global {
namespace JSX {
interface IntrinsicElements {
'stripe-buy-button': any;
}
}
}
export const StripeCard = ({ buttonId, publishableKey }: StripeCardProps) =>{
return (
<div>
<stripe-buy-button
buy-button-id={buttonId}
publishable-key={publishableKey}
>
</stripe-buy-button>
</div>
);
};
Con esto ya cuento con un componente "integrado" en React llamado 'stripe-buy-button'
Page
Simplemente para incluirlo en una página
Creta/index.ts
import { lazy } from "react";
// otros imports
import { StripeCard } from '../../common/StripeCard';
const Home = () => {
return (
<Container>
<ScrollToTop />
<UnificarCreta id="unificar" title={UnirLiquidaciones.title} content={UnirLiquidaciones.text}/>
<StripeCard buttonId={process.env.REACT_APP_PUBLIC_STRIPE_BUTTON_ID} publishableKey={process.env.REACT_APP_PUBLIC_STRIPE_PUBLISHABLE_KEY}/>
<SolicitudCalculosForm id="solicitud" title={SolicitudCalculo.title} content={SolicitudCalculo.text}/>
</Container>
);
};
export default Home;
Como ves es tan simple como hacer el import al igual que con otros componentes y usarlo en tu página
Stripe Javascript
Por último simplemente tenemos que incluir el código propio de Stripe que será el encargado de "dar vida" al webcomponent
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
<script async src="https://js.stripe.com/v3/buy-button.js">
</script>
</head>
Conclusión
Aunque en este post hablo de Stripe en realidad es la forma que he encontrado de integrar webcomponents ajenos a React dentro de este framework
Top comments (0)