Erstellung eines serverseitigen Checkout-Formulars mit Vue.js: Stripe-Funktion und Hosting

Wir befinden uns jetzt im zweiten Teil einer vierteiligen Serie, in der wir eine Checkout-Formular-Anwendung in Vue.js erstellen, die Zahlungen über die Stripe-API abwickeln kann. In Teil Eins haben wir das Konzept von serverseitigen Funktionen betrachtet, eine in Azure eingerichtet und mit einem Stripe-Konto verbunden. In diesem Beitrag konzentrieren wir uns auf die Einrichtung von Stripe als serverseitige Funktion und das Hosting des Ganzen auf Github.

---

Zuerst werden wir unsere Funktion schreiben und im Portal testen, aber schließlich werden wir sie nach Github verschieben und Azure den Code abrufen lassen. Ich werde gleich erklären, warum wir das tun.

Vorerst, um sie zum Laufen zu bringen und testbar zu machen, werden wir sie im Portal schreiben und den Anfragetext zum Testen ausfüllen. Aber wir müssen zuerst wissen, was Stripe von uns erwartet.

Dun dun dun…

Arbeiten mit Stripe als serverseitige Funktion

Wenn Sie die Dokumentation von Stripe lesen, sehen Sie, dass wir das Stripe-Token im Dashboard abrufen müssen. Dies wird letztendlich die POST-Parameter widerspiegeln, die von unserem Formular übermittelt werden. Stripe macht es einfach, sodass die Verwendung ihrer Bibliothek für die serverseitige Funktion mit Express ziemlich unkompliziert ist.

app.get('/', (req, res) => res.render('index.pug', { keyPublishable }));

app.post('/charge', (req, res) => {
  let amount = 500;

  stripe.customers
    .create({
      email: req.body.stripeEmail,
      source: req.body.stripeToken
    })
    .then(customer =>
      stripe.charges.create({
        amount,
        description: 'Sample Charge',
        currency: 'usd',
        customer: customer.id
      })
    )
    .then(charge => res.render('charge.pug'));
});

app.listen(4567);

Wir müssen jedoch nicht das gesamte Node und Express dafür einrichten, da wir eigentlich nur den Betrag, die Währung, die Beschreibung und das Token benötigen, die wir mit dem Testcode integrieren können, der uns zuvor im Portalansicht unserer Funktion zur Verfügung gestellt wurde. Lassen Sie uns also zum Azure-Portal gehen, wo sich unsere Funktion befindet, und diesen Standard-Testcode aktualisieren, um die für Stripe benötigten Parameter zu akzeptieren und auch das request.body im Testfenster zu befüllen.

Wir fügen unseren Stripe-Testschlüssel hinzu und legen alles los. Um ganz sicher zu gehen, protokollieren wir, was wir gestartet haben.

var stripe = require('stripe')('sk_test_whateveryourtestingkeyisgoeshere');
// ^ this is a stripe testing key

module.exports = function(context, req) {
  context.log('starting to get down');

Wenn wir einen Request Body, eine E-Mail und ein Token haben, dann legen wir los. Wir erstellen einen Kunden aus der E-Mail und verwenden dann diesen Kunden, um die Stripe-Zahlungen zu erstellen, wobei wir den Betrag der Zahlung übergeben, während wir das tun.

if (
  req.body &&
  req.body.stripeEmail &&
  req.body.stripeToken &&
  req.body.stripeAmt
){
  stripe.customers
    .create({
      email: req.body.stripeEmail,
      source: req.body.stripeToken
    })
    .then(customer => {
      context.log('starting the stripe charges');
      stripe.charges.create({
        amount: req.body.stripeAmt,
        description: 'Sample Charge',
        currency: 'usd',
        customer: customer.id
      });
    })
      ...

Wir wollen auch testen, ob dies alles erfolgreich abgeschlossen wurde oder ob ein Fehler aufgetreten ist. Wenn ein Fehler aufgetreten ist, müssen wir protokollieren, was dieser Fehler ist. Wir werden auch sehen, ob das Ganze insgesamt fehlerhaft war, und sicherstellen, dass wir alles ordnungsgemäß protokollieren.

Sie werden feststellen, dass ich viel protokolliere. Ich glaube nicht, dass es ausreicht zu wissen, dass etwas schiefgelaufen ist. Ich möchte wissen, wann der Fehler aufgetreten ist und warum, damit ich ihn nachverfolgen kann. Das macht die Fehlersuche viel einfacher, falls etwas schiefgehen sollte.

      ...
      .then(charge => {
        context.log('finished the stripe charges');
        context.res = {
          // status: 200
          body: 'This has been completed'
        };
        context.done();
      })
      .catch(err => {
        context.log(err);
        context.done();
      });
  } else {
    context.log(req.body);
    context.res = {
      status: 400,
      body: "We're missing something"
    };
    context.done();
  }
};

Im Testbereich auf der rechten Seite des Portals füllen wir den request.body mit stripeEmail, stripeToken (in diesem Fall ein Test-Token) und einem zufälligen Betrag für die Zahlung. Wenn wir das ausführen, sehen wir, dass es funktioniert! Wir erhalten einen 200 OK Status und haben im Output This has been completed protokolliert.

Github-gehostete serverseitige Funktion

Packen wir alles nach Github, jetzt wo es funktioniert. Ein wichtiger Grund, warum wir das tun wollen, ist, dass unsere Funktion eine Abhängigkeit von der Stripe-Bibliothek hat. Wenn Sie zum sample-stripe-handler Repo gehen, das ich für dieses Tutorial erstellt habe, sehen Sie eine package.json Datei. Die wichtigsten Zeilen in dieser Datei sind diese:

"dependencies": {
  "stripe": "^5.3.0"
}

Dies teilt der Funktion mit, die korrekte Version der Stripe-API herunterzuladen, die wir benötigen, damit unsere App ordnungsgemäß funktioniert. Als Hinweis: Sie könnten diese Methode auch verwenden, um andere Arten von Funktionen mit anderen Bibliotheken zu schreiben. Das bedeutet, dass die Möglichkeiten für das, was Sie erstellen können, endlos sind!

Wir werden alles von unserer Funktion in dieses Repo ziehen. Dazu gehören die Funktion selbst, die Datei package.json sowie der Inhalt der Datei function.json, die Sie im Tab „Dateien anzeigen“ auf der rechten Seite des Azure-Portals sehen.

Sobald wir alles in einem Github-Repo bereit haben, kehren wir zum Azure-Portal zurück, denn jetzt müssen wir Azure mitteilen, dass wir dieses Repo zum Hosten unserer Funktion verwenden möchten, anstatt unserer Testdatei. Wir können unsere Funktion weiterhin im Portal testen – wir werden sie nur nicht mehr über die grafische Benutzeroberfläche bearbeiten können.

Klicken Sie auf den Tab „Plattformfeatures“ und wählen Sie den Punkt „Bereitstellungsoptionen“.

Klicken Sie von hier aus auf „Einstellungen“, dann auf „Quelle wählen“ und eine Reihe von Optionen wird bereitgestellt. Ich wähle Github, da ich dort mein Hosting einrichten möchte, aber Sie können sehen, dass es viele andere Möglichkeiten gegeben hätte.

Sobald Github ausgewählt ist, können Sie konfigurieren, welches Repo Sie als Bereitstellungsquelle verwenden möchten. Ich habe das sample-stripe-handler Repo gewählt, das wir zuvor erstellt haben.

Nachdem wir dies getan und es geladen haben, gelangen Sie auf einen „Bereitstellungs“-Bildschirm, der den letzten Commit zeigt, den Sie im Repo gemacht haben. Das bedeutet, dass alles korrekt funktioniert!

Testen wir das noch etwas weiter. Meine Funktion funktionierte beim ersten Mal nicht richtig, weil ich ES6 verwendete. Ich hätte Babel hinzufügen können, aber ich habe es einfach zurück auf ES5 umgestellt und auf den master-Branch gepusht. Sie können sehen, dass function.json als letzte Bereitstellung inaktiv wird, und meine letzte Commit-Nachricht – die hauptsächlich aus meinem Grummeln besteht – ist jetzt die letzte Bereitstellung! Großartig.

Wir können nicht vorsichtig genug sein, also werde ich, um zu prüfen, ob diese Tests tatsächlich funktioniert haben, zum Stripe-Dashboard gehen. Sicherlich tauchen Testzahlungen in unserem Dashboard auf 😀

Noch eine Sache!

Wir wären nachlässig, wenn wir unseren guten Freund CORS ausschließen würden, den wir richtig aktivieren müssen, damit alles wie erwartet kommuniziert. Gehen wir zu unserer Funktion im Dashboard und wählen CORS aus.

In der erscheinenden Eingabeaufforderung werden wir unseren lokalen Dev-Server sowie die endgültige URL für die Website whitelisten. Voilà! Wir sind fertig.

Als Nächstes…

Wir haben in diesem Beitrag viel erreicht! Als nächstes lernen wir, wie wir davon wegkommen, nur innerhalb der Funktion zu testen, und wie wir diese Sache frei mit einem Checkout-Erlebnis kommunizieren lassen können, das wir innerhalb einer Vue.js-Anwendung aufbauen werden. Bleiben Sie dran!