Monétisez les logiciels open source avec les fonctions Gatsby et Stripe —

Dans cet article, j'expliquerai comment j'ai utilisé Gatsby Functions et l'API Stripe pour activer les contributions sécurisées « Payez ce que vous voulez » qui aident à financer mon open -source project MDX Embed.

Remarque : MDX Embed vous permet d'intégrer facilement du contenu multimédia tiers populaire tel que des vidéos YouTube, des Tweets, des publications Instagram, des leçons Egghead, Spotify , TikTok et bien d'autres directement dans votre .mdx – aucune importation requise.

Gatsby Serverless Functions

Gatsby Functions ouvrent un tout nouveau monde pour les développeurs frontaux car ils fournissent moyen d'écrire et d'utiliser du code côté serveur sans avoir à gérer un serveur. Les utilisations des fonctions sans serveur vont des inscriptions à la newsletter avec ConvertKità l'envoi d'un e-mail à l'aide de SendGridà l'enregistrement de données dans une base de données comme Faunaou dans ce cas, l'acceptation de les paiements utilisant Stripe — la liste est franchement interminable !

Les services tiers comme ceux mentionnés ci-dessus n'accepteront que les demandes envoyées côté serveur. Il y a un certain nombre de raisons à cela, mais l'utilisation de clés sécurisées ou privées en est généralement une. L'utilisation de ces clés côté serveur signifie qu'elles ne sont pas exposées au client (navigateur) et ne peuvent pas être utilisées de manière abusive, et c'est ici que les fonctions sans serveur de Gatsby peuvent aider.

Gatsby fournit la même approche logique. aux fonctions sans serveur comme ils le font avec les pages. Par exemple, les pages du site Web sont situées dans src/pages et les fonctions sans serveur sont situées dans src/api.

Naturellement, il y a un peu plus que cela, mais l'expérience de développeur de Gatsby est à la fois logique et cohérent, et pour ma part, j'adore ça!

Mêmes fonctions d'origine

Neuf fois sur dix lorsque vous travaillez avec des fonctions sans serveur, vous les utiliserez comme elles étaient censées être utilisées, par exemple, votre site Web utilise ses propres fonctions. J'appelle cet usage Same Origin Functions ou SOF en abrégé. Dans ce scénario, le Front-end et l'API sont déployés sur la même origine, par exemple www.my-website.com et www.my-website.com/apiet la communication entre les deux est à la fois transparente et, bien sûr, extrêmement rapide !

Voici un diagramme pour illustrer à quoi cela ressemble :

Fonctions d'origine croisée

Il y a, cependant, au moins deux scénarios que j'ai rencontrés où j'ai eu besoin de ce que j'ai appelé "Fonctions d'origine croisée" (ou COF en abrégé). Les deux scénarios où j'ai eu besoin de COF sont les suivants :

1. J'ai besoin de capacités côté serveur, mais le site Web d'origine ne peut pas exécuter de fonctions sans serveur.
2. La ​​fonction sans serveur est utilisée par plusieurs origines.

Remarque : L'utilisation de Gatsby n'est pas le seul moyen d'écrire des fonctions sans serveur, mais plus à ce sujet dans un instant.

J'ai d'abord expérimenté cette approche en novembre 2020 avant la sortie de Gatsby Functions et utilisé Netlify Functions pour fournir des communications de serveur à serveur avec l'API Twitter et mon blog Gatsby et mon portefeuille commercial. Vous pouvez en savoir plus sur cette approche ici : Utilisez Netlify Functions et l'API Twitter v2 comme CMS pour votre blog Gatsby.

Après la sortie de Gatsby Functions en juin 2021, j'ai remanié ce qui précède pour qu'il fonctionne avec Gatsby. Functions et voici un peu plus d'informations sur la façon dont je m'y suis pris et pourquoi : Using Gatsby Functions as an abstract API.

Voici un diagramme pour mieux illustrer l'approche générale.

Dans le diagramme ci-dessus, website-1.com est construit avec Gatsby et aurait pu avoir utilisé des fonctions sans serveur (mais ne le fait pas) et website-2.com est construit à l'aide de quelque chose qui n'a pas de capacités de fonction sans serveur.

Remarque : Dans les deux cas, ils doivent tous les deux utiliser le même service tiers, il est donc logique d'abstraire cette fonctionnalité dans un système autonome. API.

L'exemple d'API autonome (my-api.com) est également un site Gatsby et possède des capacités de fonction sans serveur, mais plus important encore, il permet aux sites Web d'autres origines d'utiliser son sans serveur Fonctions.

Je sais ce que vous pensez : CORS ! Eh bien, asseyez-vous bien. Je couvrirai cela sous peu.

Monétiser MDX Embed

C'est la situation dans laquelle je me suis retrouvé avec MDX Embed. Le site Web de documentation de ce projet est construit à l'aide de Storybook. Storybook n'a pas de capacités sans serveur, mais j'avais vraiment besoin d'une communication de serveur à serveur. Ma solution ? J'ai créé une API autonome appelée Paulie API.

Paulie API

Paulie API (comme l'exemple d'API autonome mentionné ci-dessus) peut accepter les demandes de sites Web d'origines différentes et peut se connecter à un certain nombre de différents services tiers, dont Stripe.

Pour activer les paiements Stripe à partir de MDX Embed, j'ai créé un point de terminaison api/make-stripe-payment sur l'API Paulie qui peut transmettre les informations pertinentes de MDX Intégrez via sa propre fonction sans serveur et sur l'API Stripe pour créer une « paiement ». Vous pouvez voir le code src ici.

Une fois qu'un paiement a été créé avec succès, l'API Stripe renvoie une URL. Cette URL est renvoyée à MDX Embed qui ouvre une nouvelle fenêtre dans le navigateur où les « clients » peuvent saisir en toute sécurité leurs informations de paiement sur une page Web Stripe… et boum ! Vous êtes payé !

Voici un diagramme qui illustre mieux comment cela fonctionne :

Cette approche est la même que celle mentionnée ci-dessus où https://mdx-embed.com envoie des requêtes à https://paulieapi.gatsbyjs.io qui à son tour se connecte à l'API Stripe utilisant la communication de serveur à serveur. Mais avant d'aller trop loin, cela vaut la peine d'expliquer pourquoi je n'ai pas utilisé react-stripe-js.

react-stripe-js

react-stripe- js est une boîte à outils côté client (navigateur) qui vous permet de créer des extractions et des éléments Stripe dans votre projet React. Avec react-stripe-js, vous pouvez configurer une méthode pour accepter les paiements en toute sécurité sans avoir besoin de communication côté serveur, mais… et il y a un mais. J'ai voulu mettre en place des contributions « Payez ce que vous voulez ». Permettez-moi de vous expliquer.

Voici une capture d'écran du "produit" MDX Embed que j'ai configuré dans mon tableau de bord Stripe. Notez que le prix est de 1,00 $.

Si j'avais utilisé react-stripe-js pour activer les paiements, tous les « clients » seraient invités à payer le même montant. Dans ce cas, c'est seulement 1,00 $ et ça ne va pas payer les factures, n'est-ce pas !

Pour activer « Payez ce que vous voulez » (par exemple, un montant nominal choisi par un « client »), vous devez plonger un peu plus communication de serveur à serveur et envoyez ce montant à l'API Stripe à l'aide d'une requête HTTP personnalisée. C'est là que j'utilise une fonction Gatsby et que je transmets une valeur dynamique qui sera ensuite utilisée pour créer l'expérience de « paiement » et écraser le prix défini dans mon tableau de bord Stripe.

Sur MDX Embed, j'ai ajouté un code HTML qui permet aux « clients » de définir un montant plutôt que de payer un montant prédéfini – si seulement tout le commerce électronique était comme ça !

Voici une petite vidéo que j'ai faite qui montre comment MDX Embed, Paulie API et le L'API Stripe fonctionne tous ensemble :

En passant la valeur d'entrée de MDX Embed à l'API Paulie qui à son tour se connecte à l'API API Stripe Je suis capable de créer une caisse « dynamique ».

Remarque : Cela signifie désormais que les « clients » peuvent décider de la valeur du projet pour eux et définir un montant approprié à contribuer.

Je voudrais mentionner ici Benedicte Raae qui m'a montré cette approche pour la première fois lors de son fabuleux cours Summer Functions. Vous pouvez en savoir plus en visitant Queen Raae Codes. (Merci Benedicte, vous êtes la meilleure !)

Parlons de CORS

Par défaut, Gatsby Serverless Functions ne sera pas bloqué par CORS puisque le Front-end et l'API sont déployés à la même origine. Cependant, lors du développement de fonctions Cross-Origin, vous devrez configurer votre API pour qu'elle accepte les requêtes d'origines différentes de la sienne.

Voici un extrait de code pour montrer comment je gère CORS dans api/ point de terminaison make-stripe-payment :

// src/api/make-stripe-payment

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)
importer des cors de 'cors'

const allowOrigins = [
  'https://www.mdx-embed.com',
  'https://paulie.dev',
]


const cors = cors({
  origine : (origine, rappel) => {
    if (allowedOrigins.includes(origin)) {
      rappel (null, vrai)
    } autre {
      rappel (nouvelle erreur ())
    }
  },
})

const runCorsMiddleware = (req, res) => {
  return new Promise((résoudre, rejeter) => {
    cors(req, res, (résultat) => {
      if (résultat instanceof Erreur) {
        renvoyer rejeter (résultat)
      }
      retourner résoudre (résultat)
    })
  })
}

exporter le gestionnaire de fonction asynchrone par défaut (req, res) {
  const { success_url, cancel_url, montant, produit } = req.body

  essayer {
    attendre runCorsMiddleware(req, res)

    essayer {
      const session = wait stripe.checkout.sessions.create({
        success_url : succès_url,
        annuler_url : annuler_url,
        types_de_méthode_de_paiement : ['card'],
        éléments_ligne : [
          {
            quantity: 1,
            price_data: {
              unit_amount: amount * 100,
              currency: 'usd',
              product: product,
            },
          },
        ],
        mode : 'paiement',
      })

      res.status(200).json({ message : ' La caisse Stripe a été créée ok', url : session.url })
    } catch (erreur) {
      res.status(500).json({ message : ' Erreur d'extraction de bande' })
    }
  } catch (erreur) {
    res.status (403).json({ message : ' Demande bloquée par CORS' })
  }
}

Dans l'extrait de code ci-dessus, vous devriez pouvoir voir que j'ai défini un tableau de allowedOriginsce sont les seules origines autorisées à utiliser ce point de terminaison. Les demandes de toute autre origine recevront un code de statut 403 et un message de Demande bloquée par CORS.

Cette fonction accepte également un certain nombre de paramètres de corps, dont l'un est le montant que le « client » a décidé de payer, c'est la valeur de l'entrée HTML sur le site MDX Embed. Vous remarquerez également le paramètre productil s'agit de l'ID de produit défini dans mon tableau de bord Stripe et de la façon dont l'API Stripe crée l'URL de « paiement » correcte. Passer cette valeur en tant que paramètre de corps plutôt que de la coder en dur dans la fonction me permet de réutiliser ce point de terminaison pour d'autres produits Stripe. façon pour laquelle j'ai décidé d'emprunter cette voie. Après tout, cela peut sembler une manière plus compliquée d'utiliser les fonctions sans serveur, mais j'ai mes raisons, et je pense que cela en vaut la peine. Voici pourquoi.

Paulie API est à la fois une API Cross-Origin et un site de documentation. Naturellement, si vous envisagez d'écrire une API, elle doit être documentée, n'est-ce pas? parce que c'est en fait un site Web, je peux le remplir de contenu et le rendre joli, mais attendez, il y a plus…

Remarque : Paulie API est aussi un terrain de jeu API interactif !

Chaque fonction a un Exécuter dans le lien du navigateur . Cela vous amène à une page du site où vous pouvez interagir avec la fonction. Cela sert à la fois de terrain d'essai utile pendant que je développe la fonction et de moyen simple de démontrer comment la fonction fonctionne, les documents sont bons, les documents interactifs sont meilleurs !

J'utilise également cette API pour fournir des fonctionnalités similaires côté serveur. pour mes autres sites. Jetez un œil à la page À propos où j'ai documenté lequel de mes sites utilise quelles fonctions, et voici un diagramme pour illustrer comment tout cela se réunit actuellement.

Vous devriez voir sur le diagramme ci-dessus que http://paulie.dev utilise également le point de terminaison Stripe. J'ai utilisé la même approche qu'avec MDX Embed pour activer la fonctionnalité "Payez ce que vous voulez". C'est une petite chose, mais comme le point de terminaison make-stripe-payment est déjà écrit et fonctionne, je peux le réutiliser et éviter de dupliquer cette fonctionnalité.

Le http://paulie Le site Web .dev possède également ses propres fonctions sans serveur Gatsby que j'utilise pour publier les réactions des utilisateurs à Fauna et capturer les inscriptions à la newsletter. Cette fonctionnalité est unique à ce site, je ne l'ai donc pas encore résumée. Cependant, si je voulais des inscriptions à la newsletter sur https://www.pauliescanlon.ioce serait le point où je migrerais la fonction vers l'API Paulie.

Abstraction

Cela peut sembler être un pas en arrière pour faire abstraction de vos fonctions sans serveur. Après tout, l'une des choses les plus intéressantes à propos de l'absence de serveur est que votre code front-end et back-end sont en direct au même endroit. Comme je l'ai montré, il y a des moments où l'abstraction a du sens – pour moi en tout cas.

Je profite certainement de l'utilisation de cette approche et je prévois de développer davantage mon API pour fournir plus de fonctionnalités à un certain nombre de mes propres sites Web, mais Si gagner de l'argent avec l'open source vous intéresse et que votre site n'est pas construit à l'aide de Gatsby, cette approche pourrait bien être la réponse que vous cherchiez.

Vous voulez commencer avec Gatsby Functions ? Consultez la Gatsby Functions docs pour commencer !

Autres lectures

Si vous souhaitez en savoir plus sur les fonctions sans serveur, je vous recommande :

FuncJam

À partir du 17 août au 30 septembre, les gens de Gatsby organisent un concours communautaire avec des prix absolument méga à gagner. S'il est encore temps, alors passez à FuncJam et rejoignez-nous. De plus, consultez la section Byte-size de cet article de blog ; il contient des vidéos utiles et des liens vers un certain nombre d'exemples de fonctions.

Merci de votre lecture, et si vous souhaitez discuter de tout ce qui est mentionné dans cet article, laissez un commentaire ci-dessous ou retrouvez-moi sur Twitter.

(vf, yk, il)