Erstellung eines serverlosen Checkout-Formulars mit Vue.js: Einrichtung und Tests

Irgendwann im Leben jeder jungen App wird sie sich monetarisieren müssen. Es gibt eine Reihe von Möglichkeiten, profitabel zu werden, aber Bargeld anzunehmen ist ein sicherer Weg, dies direkter zu gestalten. In diesem vierteiligen Tutorial werden wir behandeln, wie man eine serverlose Funktion einrichtet, sie mit der Stripe-API kommunizieren lässt und sie mit einem Checkout-Formular verbindet, das als Vue-Anwendung eingerichtet ist. Das mag einschüchternd klingen, ist aber tatsächlich ziemlich einfach! Los geht's.

---

Was ist Serverless?

Wir haben uns bereits mit Serverless-Konzepten beschäftigt, aber für den Fall, dass Sie diesen Artikel noch nicht gelesen haben, lassen Sie uns kurz darüber sprechen, was wir unter „serverlos“ verstehen, denn das ist ein wenig irreführend.

Das Versprechen von Serverless ist, weniger Zeit für die Einrichtung und Wartung eines Servers aufzuwenden. Sie überlassen im Wesentlichen dem Dienst die Wartung und Skalierung für Sie, und Sie reduzieren das, was Sie benötigen, auf Funktionen, die beim Aufruf eines Requests einen bestimmten Code ausführen. Aus diesem Grund bezeichnen manche Leute dies als FaaS. Dies ist sehr nützlich, da Sie nur für das bezahlen, was Sie verwenden, anstatt für einen großen Container, den Sie möglicherweise nicht vollständig benötigen. Außerdem konzentrieren Sie sich hauptsächlich auf den Code, den Sie ausführen müssen, anstatt einen Server zu beaufsichtigen, was für viele Leute, die schnell loslegen möchten, sehr ansprechend ist.

Aber FaaS ist nicht immer das richtige Werkzeug für die Aufgabe. Es ist sehr nützlich für kleine Ausführungen, aber wenn Sie Prozesse haben, die Ressourcen blockieren könnten, oder eine Menge Rechenaufwand, kann die Kommunikation mit einem Server, wie Sie es normalerweise tun, effizienter sein.

Das, was wir erstellen werden, ist ein perfekter Anwendungsfall für Serverless. Stripe-Checkouts lassen sich sowohl auf der Client- als auch auf der Serverseite nahtlos integrieren, aber wir müssen tatsächlich einige Logiken auf dem Server ausführen, daher werden wir Azure zu Hilfe nehmen. Das Portal und die GitHub-Integration lassen sich ziemlich schnell manipulieren, solange man weiß, wohin man gehen muss. Also, lassen Sie uns das auf jeden Fall anpacken!

Stripe-Konto erstellen

Zuerst erstellen wir ein Stripe-Konto. Wir verifizieren unser neues Konto per E-Mail und gehen dann zum API-Bereich, wo wir zwei Schlüssel abrufen können. Sie werden feststellen, dass wir uns gerade im Testmodus befinden, was gut ist! Wir werden es für Tests so lassen und den Testschlüssel-Token, den wir bei der Einrichtung der Anwendung verwenden werden, freigeben.

Sobald Sie angemeldet sind, gehen Sie zum API-Bereich Ihres Dashboards, um Ihren Schlüssel abzurufen.

Möglicherweise möchten Sie auch eine Telefonnummer zu Ihrem Konto hinzufügen für die Zwei-Faktor-Authentifizierung.

Einrichtung unserer serverlosen Funktion im Azure-Portal

Zuerst gehen wir zum Portal (oder wenn Sie noch kein Konto haben, können Sie sich hier für eine kostenlose Testversion anmelden) und wählen Neu > Serverless Function

Wenn wir auf die Serverless Function-App klicken, gelangen wir zu einem Panel, das uns nach Details zur Einrichtung fragt. Wie Sie im obigen Screenshot sehen können, werden die meisten Felder bereits aus dem App-Namen automatisch ausgefüllt. Lassen Sie uns jedoch einige dieser Optionen kurz durchgehen.

• Geben Sie einen **eindeutigen Namen** ein
• Eine **Ressourcengruppe** (wenn Sie noch keine haben, erstellen Sie eine)
• Ich verwende das **Windows OS**, da Linux noch in der Vorschau ist, daher ist Windows stabiler.
• Ich verwende den **Consumption Plan**, da dies derjenige ist, dessen Zahlungen mit der Nutzung skalieren und der auch automatisch skaliert. Die andere Option, App Service Plan, ist gut für Leute, die alles etwas manueller bevorzugen.
• Wählen Sie einen **Standort**, der nahe an Ihrer Kundenbasis liegt oder ein Mittelpunkt zwischen zwei Kundenbasen ist.
• Wählen Sie einen **Speicher** aus oder erstellen Sie einen, wie ich es getan habe.
• Ich werde auch **Auf Dashboard anheften** auswählen, da ich meine Funktion später schnell abrufen möchte.

Dies bringt Sie zurück zum Haupt-Dashboard des Portals und informiert Sie darüber, dass Ihre Funktion bereitgestellt wird. Sobald dies abgeschlossen ist, gelangen Sie zu einem Hauptbildschirm mit all Ihren Optionen. Von hier aus möchten wir unsere Funktion erstellen, und es wird ein HTTP-Trigger sein.

Wir wählen unter unserem Funktionsnamen "Functions" aus und sehen eine kleine Tabelle mit einem Pluszeichen, auf dem "New Function" steht.

Sobald wir hier klicken, haben wir einige Optionen, was wir erstellen können. Wir wählen HTTP Trigger.

Wir können die Sprache auswählen (wählen Sie "JavaScript") und dann "Create".

Die standardmäßige Testfunktion

Von hier aus erhalten wir eine Standard-Testfunktion, die uns hilft zu sehen, wie das alles funktioniert. Wenn wir alle diese Panels öffnen und auf die Schaltfläche "Run" klicken, sehen wir die Ausgabe in den Protokollen.

Hier ist der Code, den wir erhalten haben

module.exports = function(context, req) {
  context.log('JavaScript HTTP trigger function processed a request.');

  if (req.query.name || (req.body && req.body.name)) {
    context.res = {
      // status: 200, /* Defaults to 200 */
      body: 'Hello ' + (req.query.name || req.body.name)
    };
  } else {
    context.res = {
      status: 400,
      body: 'Please pass a name on the query string or in the request body'
    };
  }
  context.done();
};

Sie sehen hier, dass wir den context übergeben. Das ermöglicht uns das Protokollieren, was im untersten Panel darunter angezeigt wird. Im **Test**-Panel rechts können wir einen Request-Body übergeben, der zum Testen unserer Anwendung verwendet werden kann. Wenn es ausgeführt wird, sehen wir die Ausgabe mit einem 200er-Status und wissen, dass alles funktioniert. Wir haben auch einen context.log für den Fall, dass uns ein 400er-Fehler angezeigt wird. Wenn Sie mit einer serverlosen Funktion experimentieren und sie selbst in Aktion sehen möchten, können Sie eine mit einem kostenlosen Testkonto erstellen.

Als Nächstes…

Nachdem wir nun die Grundlage unserer serverlosen Funktion haben, lassen Sie uns einrichten, was wir benötigen, um mit Stripe zu kommunizieren! Mehr dazu im nächsten Beitrag dieser Reihe.