La oss Bygge en JAMstack E-Handel Butikken med Netlify Funksjoner

0
10

Mange folk er forvirret om hva JAMstack er. Forkortelsen står for JavaScript-kode, Api-er, og Markering, men virkelig, JAMstack trenger ikke å inkludere alle tre. Hva som definerer JAMstack er at det er servert uten web-servere. Hvis man ser på historien til databehandling, denne typen av abstraksjon er ikke unaturlig, men det er den uunngåelige utviklingen av denne industrien har vært i bevegelse mot.

Så, hvis JAMstack har en tendens til å være statisk, per definisjon, kan det ikke har dynamisk funksjonalitet, server-side events, eller bruke et JavaScript-rammeverk, ikke sant? Heldigvis ikke slik. I denne opplæringen vil vi sette opp en JAMstack e-handel app og legge til noen serverless funksjonalitet med Netlify Funksjoner (som abstrakt AWS Lambda, og er super dop i min mening).

Jeg vil vise mer direkte hvordan Nuxt/Vue del ble satt opp i en oppfølging innlegg, men for nå er vi kommer til å fokusere på Stripe serverless funksjon. Jeg vil vise deg hvordan jeg satt dette opp, og vi vil også snakke om hvordan du kobler til andre statisk side generatorer som Gatsby.

Dette nettstedet og repo bør komme i gang hvis du ønsker å angi noe sånt som dette opp for deg:

Demo Side

GitHub-Repo

Stillaset vår app

Den aller første trinn er å sette opp vår app. Denne er bygget med Nuxt å opprette en Vue app, men du kan erstatte disse kommandoene med din tech stabel av valget:

garn opprette nuxt-app

hub lage

git add-En
git commit-m “første begå”

git push-u opprinnelse master

Jeg bruker garn, – hub (som tillater meg å lage repos fra kommando-linjen) og Nuxt. Det kan hende du må installere disse verktøyene lokalt eller globalt før du fortsetter.

Med disse få kommandoer, følgende instruksjonene, kan vi sette opp en helt ny Nuxt prosjektet samt repo.

Hvis vi logger inn Netlify og godkjennes, vil det be oss om å plukke en repo:

Jeg kommer til å bruke garn generere til å opprette prosjektet. Med det, kan jeg legge til, i stedet for innstillinger for Nuxt i dist-katalogen, og trykk feploy! Det er alt det tar for å sette opp CI/CD og distribuere nettstedet! Nå hver gang jeg presser til master gren, ikke bare vil jeg implementere, men jeg vil bli gitt en unik lenke til det aktuelle distribuerer også. Så fantastisk.

En grunnleggende serverless funksjon med Netlify

Så her er det spennende del, fordi oppsettet for denne type funksjonalitet er så rask! Hvis du er ukjent med Serverless, kan du tenke på det som den samme JavaScript-funksjoner du kjenner og elsker, men kjøres på serveren. Serverless funksjoner er event-drevet logikk og deres priser er ekstremt lav (ikke bare på Netlify, men bransjen) og skalaer med din bruk. Og ja, vi er nødt til å legge den kvalifiserte her: serverless fortsatt bruker servere, men barnevakt dem er ikke lenger i jobben din. La oss komme i gang.

Våre svært grunnleggende funksjon ser ut som dette. Jeg lagret min i en mappe som heter funksjoner, og bare kalt det index.js. Kan du virkelig kan kalle mappen og funksjon hva du vil.

// functions/index.js
eksport.behandleren = asynkron (hendelse, kontekst) => {
tilbake {
statusCode: 200,
kropp: JSON.stringify({
melding: “Hei Tacos”,
hendelse
})
}
}

Vi trenger også å opprette en netlify.toml fil i roten av prosjektet, og la det vet hvilken katalog for å finne funksjonen i, som i dette tilfellet er “funksjoner.”

// netlify.toml
[bygge]
funksjoner = “funksjoner”

Hvis vi legger til master og gå inn på dashbordet, kan du se det plukke opp funksjonen!

Hvis du ser på endepunktet er nevnt over, er det som er lagret her:
https://ecommerce-netlify.netlify.com/.netlify/functions/index

Virkelig, for et nettsted du gi det, URL-en vil følge dette mønsteret:
https:/<yoursiteurlhere>/.netlify/funksjoner/<functionname>

Når vi treffer som endepunkt, det gir oss melding vi har gått i, så vel som alle tilfelle data vi logget også:

Jeg elsker hvordan få skritt som er! Dette lille bit av koden gir oss uendelig makt og muligheter for rike, dynamiske funksjonalitet på våre nettsider.

Koble opp Stripe

Sammenkobling med Stripe er utrolig morsomt fordi det er enkelt å bruke, sofistikert, har store dokumenter, og fungerer godt med serverless funksjoner. Jeg har andre tutorials der jeg brukte Stripe fordi jeg liker å bruke deres tjeneste så mye.

Her er et fugleperspektiv av app vi vil bygge:

Først vil vi gå til Stripen dashboard og få våre nøkler. For noen helt scandalized akkurat nå, det er OK, disse er testing tastene. Du kan bruke dem, også, men vil du lære mer hvis du setter dem opp på din egen. (Det er to klikk, og jeg lover det er ikke vanskelig å følge med fra her.)

Vi vil installere en pakke som heter dotenv som vil hjelpe oss med store vår-tasten, og test den opp lokalt. Deretter, vil vi lagre våre Stripe hemmelige nøkkelen til en Stripe variabel. (Du kan kalle det noe, men her har jeg kalt det STRIPE_SECRET_KEY, og det er ganske mye industri standard.)

garn legge til dotenv
krever(“dotenv”).config()

const stripe = krever(“stripe”)(prosess.konv.STRIPE_SECRET_KEY)

I Netlify oversikten, vil vi gå til “Bygg & distribuere,” deretter “Miljø” for å legge til i miljøvariabler, hvor STRIPE_SECRET_KEY er viktige, og verdien vil være nøkkelen som starter med sk.

Vi vil også legge inn noen overskrifter slik at vi ikke går inn i corso buenos problemer. Vi vil bruke disse overskrifter over hele funksjon vi kommer til å bygge.

const overskrifter = {
“Access-Control-La-Opprinnelse”: “*”,
“Access-Control-La-Hoder”: “Content-Type”
}

Så, nå skal vi lage funksjonalitet for å snakke til Stripe. Vi vil sørge for at vi vil håndtere sakene til at det ikke HTTP-metode vi ventet, og også at vi får den informasjonen vi forventer.

Du kan allerede se her, hvilke data vi kommer til å være behov for å sende til stripe av hva vi kontrollerer for. Vi trenger token, den totale mengden, og en idempotency-tasten.

Hvis du er ukjent med idempotency tastene, de er unike verdier som er generert av en klient og sendt til et API sammen med en forespørsel om i tilfelle at tilkoblingen er brutt. Hvis serveren mottar en samtale innser at det er en kopi, det ignorerer forespørselen og svarer med en vellykket status code. Oh, og det er et umulig ord å uttale.

eksport.behandleren = asynkron (hendelse, kontekst) => {
if (!event.kropp || hendelse.httpMethod !== “POST”) {
tilbake {
statusCode: 400,
overskrifter,
kropp: JSON.stringify({
status: “ugyldig http-metoden”
})
}
}

const data = JSON.parse(event.kroppen)

if (!data.stripeToken || !data.stripeAmt || !data.stripeIdempotency) {
– konsollen.feil(“Nødvendig informasjon mangler.”)

tilbake {
statusCode: 400,
overskrifter,
kropp: JSON.stringify({
status: “mangler informasjon”
})
}
}

Nå, vi vil kick off Stripe betalingsløsninger! Vi vil lage en Stripe kunde ved hjelp av e-post og token, gjøre litt logging, og deretter opprette Stripe kostnad. Vi vil angi valuta, mengde, e-post, kunde-ID, og gi en beskrivelse mens vi er i det. Til slutt, vi vil gi idempotency-tasten (uttales øye-dem-po-ti-se), og logg på at det var vellykket.

(Selv om det ikke er vist her, vi vil også gjøre noen feil håndtering.)

// stripe betaling begynner her
try {
venter stripe.kunder
.opprette({
e-post: data.stripeEmail,
kilde: data.stripeToken
})
.deretter(customer => {
– konsollen.log(
`du starter avgifter, amt: ${data.stripeAmt}, e-post: ${data.stripeEmail}`
)
tilbake stripe.avgifter
.opprette(
{
valuta: “usd”,
beløp: data.stripeAmt,
receipt_email: data.stripeEmail,
kunde: kunde.id,
beskrivelse: “Eksempel på Lade”
},
{
idempotency_key: data.stripeIdempotency
}
)
.deretter(resultat => {
– konsollen.logg(`Lade opprettet: ${resultat}`)
})
})

Koble den opp til Nuxt

Hvis vi ser tilbake på vårt program, kan du se vi har sider og komponenter som lever inne på sidene. Den Vuex butikken er som hjernen av vår søknad. Det vil holde tilstanden i appen, og det er det som vil kommunisere med Stripe. Men vi har likevel behov for å kommunisere med våre medlemmer via klienten. Vi vil samle inn kredittkort data i en komponent kalt AppCard.vue som vil leve på i handlekurven.

Først vil vi installere en pakke som heter vue-stripe-elementer-pluss, som gir oss noen Stripe form elementer som tillater oss å samle inn kredittkort data, og selv setter oss opp med a betale metode som gjør det mulig for oss å skape symboler for stripe betaling. Vi vil også legge til et bibliotek kalt uuid som vil tillate oss å generere unike nøkler, som vi skal bruke for idempotency-tasten.

garn legge til vue-stripe-elementer-pluss uuid

Standard oppsett de gir oss til å jobbe med vue-stripe-elementer-plus ser ut som dette:

<mal>
<div id=’app’>
<h1>Vennligst gi oss din betalingsinformasjon:</h1>
<- kort class=’stripe-kort”
:klasse='{ komplett }’
stripe=’pk_test_XXXXXXXXXXXXXXXXXXXXXXXX’
:valg=’stripeOptions’
@endre=’complete = $event.komplett’
/>
<- knappen class= “betal-med-stripe’ @klikk=’pay”: deaktivert=’!komplett’>Betale med kredittkort</button>
</div>
</template>
<script>
import { stripeKey, stripeOptions } fra ‘./stripeConfig.json’
import { Kortet, createToken } fra ‘vue-stripe-elementer-plus’

eksport standard {
data () {
tilbake {
komplett: false,
stripeOptions: {
// se https://stripe.com/docs/stripe.js#element-options for detaljer
}
}
},

komponenter: { Kortet },

metoder: {
lønn () {
// createToken returnerer et Løfte som løser i følge objektet med
// enten et tegn eller en feil-tasten.
// Se https://stripe.com/docs/api#tokens for token-objekt.
// Se https://stripe.com/docs/api#errors for feil objekt.
// Mer generelle https://stripe.com/docs/stripe.js#stripe-create-token.
createToken().deretter(data => konsollen.logg(data.token))
}
}
}
</script>

Så her er hva vi kommer til å gjøre. Vi kommer til å oppdatere skjemaet for å lagre kundens e-post, og oppdatere betale metode for å sende og token eller feil nøkkelen til Vuex store. Vi vil sende en aksjon for å gjøre det.

data() {
tilbake {

stripeEmail: “”
};
},
metoder: {
lønn() {
createToken().deretter(data => {
const stripeData = { data, stripeEmail: dette.stripeEmail };
dette.$butikken.utsendelse(“postStripeFunction”, stripeData);
});
},

Som postStripeFunction handling vi sendt ser ut som dette:

// Vuex butikk
eksport const handlinger = {
asynkron postStripeFunction({ getters, forplikte }, nyttelast) {
commit(“updateCartUI”, “legge”)

try {
venter axios
.post(
“https://ecommerce-netlify.netlify.com/.netlify/functions/index”,
{
stripeEmail: nyttelast.stripeEmail,
stripeAmt: Matematikk.gulv(getters.cartTotal * 100), //det forventer prisen i øre
stripeToken: “tok_visa”, //testing token, senere ville vi bruke nyttelast.data.token
stripeIdempotency: uuidv1() //vi bruk dette biblioteket for å opprette en unik id
},
{
overskrifter: {
“Content-Type”: “application/json”
}
}
)
.deretter(res => {
if (res.status === 200) {
commit(“updateCartUI”, “suksess”)
setTimeout(() => begå(“clearCart”), 3000)

Vi kommer til å oppdatere UI-state-å legge mens vi bearbeider. Deretter vil vi bruke axios å legge til vår funksjon endepunkt (URL-en du så tidligere i innlegget når vi setter opp vår funksjon). Vi vil sende via e-post, amt, token og unik nøkkel som vi bygget funksjonen til å forvente.

Så hvis det var vellykket, vi vil oppdatere UI-state-for å reflektere det.

En siste merknad jeg vil gi er at jeg lagre UI-state-i en streng, snarere enn en boolsk. Jeg pleier å starte med noe sånt som “ledig” og, i dette tilfellet, vil jeg også ha “lasting,” “suksess” og “feil.” Jeg kan ikke bruke boolske stater, fordi jeg har sjelden møtt en situasjon der UI-state-har bare to stater. Når du arbeider med booleans for dette formålet, har du en tendens til å trenge å bryte den ut i flere og flere stater, og kontrollere for alle av dem kan få stadig mer komplisert.

Som det står, jeg kan gjenspeile endringer i BRUKERGRENSESNITTET på handlekurvsiden lesbar conditionals, som dette:

<avsnitt v-hvis=”cartUIStatus === ‘inaktiv'”>
<app-cart-display />
</avsnitt>

<avsnitt v-annet-hvis=”cartUIStatus === ‘loading'” class=”loader”>
<app-loader />
</avsnitt>

<avsnitt v-annet-hvis=”cartUIStatus = = = “suksess “” class=”suksess”>
<h2>Suksess!</h2>
<p>Takk for ditt kjøp. Du vil motta dine varer i 4 dager.</p>
<p>har du Glemt noe?</p>

<- knappen class=”betale-med-stripe”>
<nuxt-link nøyaktig å=”/”>Tilbake til Hjem</nuxt-link”>
</button>
</avsnitt>

<avsnitt v-annet-hvis=”cartUIStatus === ‘feil'”>
<p>Oops, noe som gikk galt. Omdirigere deg til handlekurven for å prøve på nytt.</p>
</avsnitt>

Og der har du det! Vi er alle satt opp og kjører til å ta imot betalinger med stripe på en Nuxt, Vue området med en Netlify funksjon, og det var ikke engang at komplisert å sette opp!

Gatsby Programmer

Vi brukte Nuxt i dette tilfellet, men hvis du ønsket å sette opp den samme typen funksjonalitet med noe som bruker å Reagere slik som Gatsby, det er en plugin for det. (Alt er plugin i Gatsby. ☺️)

Du vil installere det med denne kommandoen:

garn legge til gatsby-plugin-netlify-funksjoner

…og legge til plugin til din søknad som dette:

plugins: [
{
løse: `gatsby-plugin-netlify-funksjoner”,
valg: {
functionsSrc: `${__dirname}/src/funksjoner”,
functionsOutput: `${__dirname}/funksjoner”,
},
},
]

Den serverless funksjonen som brukes i denne demoen er rett opp JavaScript, så det er også bærbare for å Reagere programmer. Det er en plugin for å legge Stripe skriptet til Gatsby app (igjen, alt er en plugin). Rettferdig advarsel: dette legger manuset til hver side på nettstedet. For å samle inn kredittkort opplysningene på klienten, vil du bruke Reagere Stripe Elementer, som er lik de Vue vi brukte ovenfor.

Bare sørg for at du samler inn fra klienten og gi alle de opplysninger funksjon er å forvente:

  • De bruker e-post
  • Det totale beløpet, i cent
  • Token
  • Den idempotency-tasten

Demo Side

GitHub-Repo

Med en så lav barriere for oppføring, kan du se hvordan du kan gjøre virkelig dynamisk erfaringer med JAMstack programmer. Det er utrolig hvor mye du kan oppnå uten noen kostnader til vedlikehold fra servere. Stripe og Netlify Funksjoner gjør sette opp betalingsformidling i et statisk program, slik en jevn utvikler opplevelse!