Fram till nyligen var det dyrt och komplicerat att acceptera kreditkort på en webbplats. Men det var före Stripe: ett radikalt annorlunda och vansinnigt fantastiskt kreditkortbehandlingsföretag. Idag visar jag dig hur man börjar acceptera kort på 30 minuter eller mindre - utan att spendera en krona.
Publicerad handledningVarje par veckor besöker vi några av våra läsares favoritinlägg från hela webbplatsens historia. Denna handledning publicerades först i juni 2012.
Utan Stripe är ett stort företag att acceptera kreditkort på en webbplats. Först måste du öppna ett "köpkonto", vilket är som ett vanligt bankkonto, men med fler avgifter. Därefter behöver du en "betalnings gateway" - eftersom kreditkort bearbetning uppenbarligen sker i en separat dimension där bankirerna reglerar med en järnnäve och Lindsey Lohan har en framgångsrik fungerande karriär. Och sedan kommer leechesna: $ 25 månadsavgift. $ 99 setup fee. $ 50 årsavgift. $ 0,35 misslyckades transaktionsavgift (du betalar när kundens kort misslyckas med att gå igenom!). $ 0,25 + 2,0% framgångsrik transaktionsavgift. $ 2.00 satsavgift. $ 5,00 pappa-behov-en-ny-porsche avgift. Det är löjligt. Den mest populära kortprocessorn är Authorize.net, och folket hos det företaget (och dess många återförsäljare) spenderar varje dag och tänker på nya, löjliga sätt att ta dina pengar.
Installationen tar ungefär fem minuter.
Tyvärr, det är olagligt att kidnappa VD för Authorize.net, slänga honom i grillsås och släpp honom i en grop honungsänglar. Men du kan göra det näst bästa: använd inte hans tjänst. Byt till Stripe. Du behöver inte ett köpkonto eller betalnings gateway. Stripe kommer att sätta in pengar till några bankkonto du gillar. Det finns inga avgifter. Installationen tar ungefär fem minuter. (Ja, allvarligt.) Och du betalar exakt en sak: 2,9% + $ 0,30 på varje lyckad korttransaktion. (Så om du säljer något för $ 30, behåller du $ 28,83, och Stripe får $ 1,17.) Webbplatsen är enkel och intuitiv och personalen är super hjälpsam. Den enda nackdelen är att Stripe för närvarande inte är tillgänglig utanför USA. (Obs! Stripe accepterar kreditkort från utlandet, det är bara att du inte kan registrera dig för ett Stripe-konto utanför USA) De arbetar med att expandera till andra länder.
Resten av denna handledning beskriver hur man implementerar Stripe på din webbplats med PHP och Javascript (jQuery). Tjänsten har även API för Ruby, Python, Java och andra plattformar. Även om det kan se ut som om det finns mycket arbete framåt, är det verkligen inte. du kommer att vara igång på nolltid. Låt oss börja:
Vi hanterar kreditkortsinformation, så vi måste naturligtvis säkra användarens anslutning till vår server. Vi gör det här med ett SSL-certifikat och det är inte valfritt. Inte bara förväntas användarna att se "https: //" -protokollet på en ordersida, Stripe kräver det. Men oroa dig inte: implementering av SSL är väldigt enkelt. Nästan alla webbhotell erbjuder automatisk SSL-certifikatinstallation. Du köper enkelt certifikatet genom din leverantör och de installerar och konfigurerar automatiskt det för dig. Du behöver inte göra något annat på din webbplats. Om din beställningsblankett finns på http://mydomain.com/order.php, skickar du helt enkelt kunden till https://mydomain.com/order.php istället och anslutningen kommer att säkras med ditt nya SSL-certifikat. Det är allt!
Notera: det finns ett undantag. Om din beställningssida laddar upp resurser som stilark, skript eller bilder med en absolut (i motsats till relativ) URL, måste du se till att de här webbadresserna använder "https: //" -protokollet. Om du till exempel tar med en bild på din säkra ordersida så här får du en varning i webbläsaren att sidan innehåller både säkra och osäkra element:
För att fixa det här laddar du bilden från en säker webbadress, så här:
Du behöver inte oroa dig för det här problemet för relativa webbadresser (till exempel "... /images/someImage.jpg") eftersom din server automatiskt laddar dessa objekt automatiskt.
Besök Stripe.com och skapa ett nytt konto. När du har gått över det inledande användarnamnet / lösenordet, klickar du på "Ditt konto" -menyn längst upp till höger och öppnar rutan "Kontoinställningar", som visas nedan. Först, se till att du anger en bra "Statement Descriptor". Detta är vad kunderna kommer att se på sina kreditkortsutlåtanden. En bra deskriptor hjälper kunden att komma ihåg vad de köpte så att de inte misstänker din transaktion för bedrägerier och avbryter avgiften. (När det händer kallas det en "återkrav" och du betalar en avgift på 15 $ förutom att du förlorar försäljningen, så se till att din skrivare är inställd!) Ange sedan det bankkonto som du vill ha pengar på . Du är välkommen att använda minen. Och äntligen, ta en titt på fliken "API Keys". Vi använder dem snart, så håll dem praktiska.
Nästa sak vi behöver är en form som våra kunder fyller i för att göra en kreditkortsorder hos oss. Idag använder vi denna mycket överförenklade PHP-sida, kallad "buy.php":
Betalningsformulär
Det finns tre saker att notera om kodfältet ovan.
Det enda du absolut måste måste debitera ett kreditkort är kortnummer och utgångsdatum. Men du bör alltid samla åtminstone lite ytterligare information. Här är varför: Om en kund bestrider avgiften på deras kort måste du bevisa att de faktiskt gjorde en beställning med dig.
Ju mer information du samlar, desto lättare blir det att bevisa att kunden (i motsats till en identitetstjuv) lade orderen på din webbplats.
Okej, vi har SSL installerat och en betalningsblankett klar att gå. Låt oss anta att vi ska debitera kunden $ 20,00 för denna order. (I själva verket skulle du beräkna summan baserat på vad kunden beställde osv. Det är upp till dig.) När han fyller i formuläret och trycker på Submit-knappen, händer tre saker i följande ordning:
Säkerhet. Användarens kreditkortsinformation berör aldrig vår egen server. Vi skickar det direkt till Stripe på klientsidan med Javascript. Stripes server tar den informationen och förbereder en transaktion. Den "token" som den skickar tillbaka till oss innehåller INTE kreditkortsuppgifterna, men innehåller ett ID som låter oss utlösa den transaktion som Stripe har förberett vid slutet. Således kan vi säkert skicka token till vår egen server utan att riskera säkerheten för användarens kreditkortsuppgifter.
Obs: medan du kan använd Stripe utan token processen, jag starkt avskräcka den. Om du skickar de rika kreditkortsuppgifterna till din egen server måste du vara noga försiktig med att skydda dem och det finns många sätt att skruva upp. Exempelvis kan serverfelsloggar enkelt registrera känslig information, så du måste skrubba dem säkert och regelbundet. Om du har en gemensam värdplan har du förmodligen inte den kontroll som krävs för att göra det. Plus, om din server någonsin hackas, kan du bli stämd till glömska av ticked-off-kunder. Och om du gör något verkligen dumma som lagra okrypterad kortinformation i en databas, kommer jag personligen att köra till ditt hus och slå dig med en kaktus. Spela säkert; använd token processen.
Skapa en ny Javascript-fil, kallad "buy-controller.js". Låt oss börja koda den filen med några grundläggande valideringskontroller:
funktion showErrorDialogWithMessage (meddelande) // För handledningen gör vi bara en varning. Du bör anpassa denna funktion till // presentera "söta" felmeddelanden på din sida. alert (message); // Återaktivera orderknappen så att användaren kan försöka igen $ ('# buy-submit-button'). RemoveAttr ("disabled"); $ (dokument) .ready (funktion () $ ('# buy-form'). skicka (funktion (händelse) // omedelbart inaktivera inmatningsknappen för att förhindra att dubbel skickas $ ('# buy-submit-button' ) .attr ("inaktiverat", "inaktiverat"); var fName = $ ('# förnamn') .val (); var lName = $ ('# efternamn') .val (); var email = $ ('# email') .val (); var cardNumber = $ ('# kortnummer') .val (); var cardCVC = $ ('# kort-säkerhetskod') .val (); // Fält för för- och efternamn: se till att de inte är tomma om (fName === "") showErrorDialogWithMessage ("Vänligen ange ditt förnamn."); Return; if (lName === "") showErrorDialogWithMessage "Vänligen ange ditt efternamn."); Return; // Bekräfta e-postadressen: var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA- Z0-9 \ -]) + \.) + ([A-zA-Z0-9] 2,4) + $ /; om (email === "") showErrorDialogWithMessage ("Vänligen ange din e-postadress . "); return; else if (! emailFilter.test (email)) showErrorDialogWithMessage (" Din e-postadress är inte giltig. "); Return; // Stripe validerar kortnumret och CVC för oss, så se till att de inte är tomma om (cardNumber === "") showErrorDialogWithMessage ("Vänligen ange ditt kortnummer."); lämna tillbaka; om (cardCVC === "") showErrorDialogWithMessage ("Vänligen ange ditt kort säkerhetskod."); lämna tillbaka; // Boom! Vi passerade grundvalideringen, så vi är redo att skicka informationen till // Stripe för att skapa en token! (Vi lägger till den här koden snart.)); );
Därefter måste vi lägga till den här nya JavaScript-filen till del av vår "buy.php" sida. Vi kommer också att lägga till "Stripe.js", som är en fil värd på Stripes server som tillåter oss att kontakta Stripe från klientsidan för att skicka kreditkortsuppgifter och ta emot vårt token. (Observera att vi laddar Stripe.js med "https: //" protokollet!) Ändra
element i "buy.php" för att se så här ut:
Innan vi kan lämna information till Stripe, måste vi på något sätt berätta för Stripe vem vi är. För att göra det använder vi ett par "nycklar", som är unika strängar som identifierar vårt konto. För att hitta dessa nycklar, gå till rutan Stripe Account Settings och dra upp fliken API Keys, som visas här:
Som du kan se finns det totalt fyra nycklar i två uppsättningar: "Test" och "Live". Du använder testuppsättningen under utveckling så att du kan verifiera din kod utan att faktiskt ladda några kort. När du är redo att distribuera en webbplats, ersätter du bara testnycklarna med de levande. Det finns två nycklar i varje uppsättning: "publicerbar" och "hemlig". (Vi använder den "hemliga" nyckeln i vårt serverns script när vi har fått ett token från Stripe.) För nu, ta den publicerbar testnyckel och lägg till det i HEAD-elementet i "buy.php" så här:
Varning: Du måste inkludera Stripe.js INNAN du anger den publicerbara nyckeln. Var dessutom noga med att du inte tar en webbplats direkt utan att växla till "live" -tangenterna! Och slutligen, var absolut säker på att hålla dina hemliga nycklar säkra och hemlighet!
Tillbaka längst ner på "buy-controller.js", är vi redo att lägga till koden som begär ett token från Stripe. Det är bara några rader:
// Boom! Vi godkände grundvalideringen, så begär en token från Stripe: Stripe.createToken (nummer: cardNumber, cvc: cardCVC, exp_month: $ ('# expiration-month') .val (), exp_year: $ (' # expiration- år ') .val (), stripeResponseHandler); // Förhindra att standardinsändningsåtgärden på formuläret returneras felaktigt;
Funktionen "createToken" (som definieras i Stripe.js) accepterar två parametrar. Den första är ett objekt med kreditkortsuppgifterna. Den andra är namnet på återuppringningsfunktionen som kommer att åberopas när Stripes server slutar förbereda transaktionen och returnerar token. I det här fallet kallas vår återuppringningsfunktion "stripeResponseHandler". Låt oss lägga till den funktionen till toppen av "buy-controller.js":
funktion stripeResponseHandler (status, svar) if (response.error) // Stripe.js lyckades inte skapa en token. Felmeddelandet kommer att förklara varför. // Vanligtvis beror det på att kunden misstod deras kortinformation. // Du bör anpassa det här för att presentera meddelandet på ett ganska sätt: alert (response.error.message); else // Stripe.js genererade ett token framgångsrikt. Vi är redo att ladda kortet! var token = response.id; var firstName = $ ("# first-name") .val (); var lastName = $ ("# sista namn") .val (); var email = $ ("# email") .val (); // Vi behöver veta vad beloppet ska debiteras. Antag $ 20,00 för handledningen. // Du skulle självklart beräkna detta på egen hand: var price = 20; // Ring till serverns skript för att behandla ordern. // Passa token och icke känslig blankettinformation. varförfrågan = $ .ajax (typ: "POST", url: "pay.php", dataType: "json", data: "stripeToken": token, "firstName": firstName, "lastName": lastName, " email ": email," price ": pris); request.done (funktion (msg) if (msg.result === 0) // Anpassa det här avsnittet för att presentera ett framgångsmeddelande och visa vad som helst // ska visas för användaren. framgångsrikt! "); else // Kortet debiterades INTE med framgång, men vi fanns ihop med Stripe //. Det är troligt ett problem med användarens kreditkort. // Anpassa det här avsnittet för att presentera en felförklaringsvarning Användarens kreditkort misslyckades. ");); request.fail (funktion (jqXHR, textStatus) // Vi lyckades inte göra AJAX-samtalet till pay.php. Något är fel i slutet. // Det borde normalt inte hända, men vi måste hantera det om det gör det. ("Fel: misslyckades med att ringa pay.php för att behandla transaktionen."););
Den här funktionen kontrollerar först om det uppstod ett fel som skapade token. Om Stripe.js misslyckas med att returnera ett giltigt tecken är det vanligtvis att kunden angett felaktigt sina kreditkortsuppgifter. De kan ha mistypat ett nummer eller valt fel utgångsdatum. Lyckligtvis kommer felmeddelandet som följer med svaret att berätta varför tokenskapelsen misslyckades. Stripe garanterar att detta felmeddelande är lämpligt för visning, men det är inte ordentligt. Förvänta dig att se strängar som "ogiltigt utgångsdatum" eller "felaktig CVC" i stället för fullständiga meningar.
Om däremot allt validerades och Stripe skapade ett token, är vi redo att lämna den token till vårt server-sidoskript och faktiskt placera avgiften. I koden ovan använder vi jQuery's Ajax-funktion för att göra det. Vi skickar token och viss information som vi kanske vill spela in i en databas: kundens namn och e-postadress. Slutligen måste vi veta hur mycket pengar som ska debiteras kortet. Vi antar $ 20,00 idag, men du skulle skicka ett beräknat värde från din kundvagn etc. Vi slänger all den informationen till ett JSON-objekt och gör Ajax-samtalet till vårt server-sidoskript, "pay.php" ( som vi ska skapa nedan). Sedan tittar vi bara på svaret och presenterar användaren ett framgångsrikt eller felmeddelande. Du skulle självklart anpassa denna kod för att passa din webbplats design.
Det enda som kvarstår är att skapa webbsidan PHP-skript som faktiskt utlöser avgiften på kundens kort. Först behöver vi Stripes PHP-bibliotek. För att ladda ner det, gå till Stripes hemsida, klicka på länken "Dokumentation" längst upp till höger och välj sedan avsnittet "API-bibliotek". (Eller du kan gå direkt dit genom att klicka här.) Bläddra ner sidan tills du ser PHP-sektionen, som ser ut så här:
Ladda ner den senaste versionen och pakka ut den. Du får se två poster: "Stripe.php" och en mapp med namnet "Stripe" som innehåller en massa andra PHP-filer. Släpp båda dessa objekt i din hemsida mapp.
Skapa nu en ny fil som heter "pay.php". Vi börjar koda den här filen med några grundläggande grejer:
1, 'errorMessage' => $ meddelande); echo json_encode ($ a); // Kreditkortsfakturering require_once ('Stripe.php'); // ändra den här sökvägen till var du än sätter Stripe PHP-biblioteket! $ trialAPIKey = "oRU5rYklVzp94Ab0RbBTP0soVdlaEtvm"; // Dessa är SECRET-tangenterna! $ liveAPIKey = "4BYrmtvwLb8iiiq9KIdbnRh5KCeSfPsX"; Stripe :: setApiKey ($ trialAPIKey); // Byta till förändring mellan levande och testmiljöer // Hämta alla värden från formuläret $ token = $ _POST ['stripeToken']; $ email = $ _POST ['email']; $ firstName = $ _POST ['firstName']; $ lastName = $ _POST ['LastName']; $ pris = $ _POST ['pris']; $ priceInCents = $ pris * 100; // Stripe kräver att beloppet uttrycks i cent
Överst har vi en enkel funktion som vi ringer när vårt skript träffar ett fel. Den returnerar ett JSON-objekt med två objekt: "resultat" och "errorMessage". Det här JSON-objektet skickas tillbaka till "buy-controller.js" (där vi använde jQuery's AJAX-funktion för att ringa till det här serverns script). Där kan vi inspektera värdet av "resultat" för att se vad som hände. Om det är 0, slutfördes betalningsskriptet framgångsrikt. Om det är 1, slog skriptet ett fel och vi kan använda "errorMessage" -delen för att rapportera vad som hände med användaren.
Därefter tar vi in Stripes PHP-bibliotek som vi hämtade tidigare. Det finns inget för komplicerat här; bara se till att du uppdaterar sökvägen i kravet till den relativa platsen för Stripe PHP-biblioteket. Därefter har vi båda våra HEMLIGHET API-nycklar. Vi kallar funktionen "setApiKey" (som ingår i Stripes PHP-bibliotek) och skickar det till vår testnyckel. I kombination med den "publicerbara" nyckeln som vi fastställde tidigare har Stripe nu all information som behövs för att verifiera vår identitet och associera denna transaktion med vårt konto. Naturligtvis, när vi tar webbplatsen live, skulle vi byta detta uttalande för att använda $ liveAPIKey!
Varning: Glöm inte att byta till LIVE API-nycklarna när du publicerar din webbplats! Du måste byta både "publicerbar" nyckeln i HEAD-elementet "buy.php" och "secret" -nyckeln, som visas i "pay.php" ovan.
Och äntligen tar vi alla data som vi passerade från AJAX-samtalet i "buy-controller.js". Observera att Stripe kräver att vi anger laddningsbeloppet i cent. Här passerade vi värdet i dollar, så vi multiplicerar med 100 för att konvertera det till cent.
Här är resten av koden för pay.php:
försök // Vi måste ha all denna information för att fortsätta. Om det saknas, balk. om (! isset ($ token)) kasta ny Undantag ("Webbplatsfel: Stripe-token genererades inte korrekt eller skickades till betalningshanteringsskriptet. Ditt kreditkort debiterades inte. Var god rapportera detta problem till webmaster."); om (! isset ($ email)) kasta ny Undantag ("Webbplatsfel: E-postadressen var NULL i betalningshanteringsskriptet. Ditt kreditkort debiterades inte. Var god rapportera detta problem till webmaster."); om (! isset ($ firstName)) kasta ny Undantag ("Webbplatsfel: Förnamn var NULL i betalningshanteringsskriptet. Ditt kreditkort debiterades inte. Var god rapportera detta problem till webmaster."); om (! isset ($ LastName)) slänga nya undantag ("Webbplatsfel: LastName var NULL i betalningshanteringsskriptet. Ditt kreditkort debiterades inte. Vänligen rapportera detta problem till webmaster."); om (! isset ($ priceInCents)) kasta ny Undantag ("Webbplatsfel: Priset var NULL i betalningshanteringsskriptet. Ditt kreditkort debiterades inte. Var god rapportera detta problem till webmaster."); försök // skapa avgiften på Stripes servrar. DETTA SKA LADDA KORTET! $ charge = Stripe_Charge :: skapa (array ("mängd" => $ priceInCents, "currency" => "usd", "card" => $ token, "description" => $ email)); // Om inget undantag kastades var avgiften framgångsrik! // Här kan du registrera användarens information i en databas, maila ett kvitto, etc. // Retur en resultatkod av '0' och vilken annan information du vill ha. // Det här är tillgängligt för jQuery Ajax Call Return-Handler i "buy-controller.js" $ array = array ('result' => 0, 'email' => $ email, 'price' => $ pris, ' meddelande '=>' Tack, din transaktion var framgångsrik! '); echo json_encode ($ array); fångst (Stripe_Error $ e) // Avgiften misslyckades av någon anledning. Stripes meddelande kommer att förklara varför. $ message = $ e-> getMessage (); returnErrorWithMessage ($ message); fångst (Undantag $ e) // En eller flera variabler var NULL $ message = $ e-> getMessage (); returnErrorWithMessage ($ message); ?>
Överraskande enkelt, nej? Först kontrollerar vi att ingen av våra variabler är null. Även om vi inte behöver alla att ladda kortet, kanske vi vill spela in den här informationen i en databas eller använda den för att maila kunden ett kvitto, så vi vill inte fortsätta om det inte är tillgängligt.
Då använder vi "Stripe_Charge :: create ()
"-metoden, som ingår i Stripe PHP-biblioteket. Det här är den linje som faktiskt debiterar användarens kort (eller försöker ändå). De två första objekten i arrayen är självförklarande. Den tredje" kortet "är där vi skickar den token som vi begärt från Stripe tidigare. Det fjärde stycket "beskrivning" är avgörande. Vad vi än passerar här är vad vi ska se när vi loggar in i Stripe och ser på våra transaktioner. Du borde välja något kort som identifierar kund som ställde denna order. En e-postadress är din bästa insats, så många kunder kan ha samma namn.
Om vi lyckades få en token från Stripe, varför skulle avgiften misslyckas vid denna punkt? Svaret är att validering Stripe utförd tidigare kontrolleras endast att kreditkortsuppgifterna var välformade; Det köra inte en transaktion via kreditkortsnäten. Det kan vara så att kundens kort är över gränsen. Eller om det är ett betalkort kanske det inte finns tillräckligt med pengar på kundens konto för att täcka detta köp. Det kan också vara att kreditkortsföretaget enkelt flaggar transaktionen som ovanligt och kräver att kundens godkännande ska släppa igenom det (det har hänt mig med American Express-kortinnehavare). I situationer som dessa valideras kortet korrekt när vi begär en token, men misslyckas när vi försöker faktiskt ladda den. Lyckligtvis gör Stripe det väldigt enkelt att hantera dessa misslyckanden. Vi använder helt enkelt försök / fånga block, som du ser ovan.
Om den kunden är jag, är du in för en kaktus slår.
Om din webbplats behöver göra saker, som att generera ett serienummer för en programlicens, bör du göra det innan du tar ut kundens kort. Om du laddar kortet först och då din webbplats inte genererar en seriell av någon anledning kommer din kund att kryssas av. (Om den kunden är mig, är du in för en kaktus slår.) De kan till och med ringa sitt kreditkortsföretag för att avbryta avgiften, vilket resulterar i en avgift på 15 USD och förlusten av en försäljning. Så spela det säkert: var noga med att du har allt klart att gå innan du debiterar kunden!
Det är allt! Det är all kod du behöver för att ladda ett kreditkort på din hemsida. Resten av artikeln omfattar några ytterligare detaljer om hur du använder Stripe som du kan hitta användbar:
När vi använder API-tangenterna "test" kan vi använda särskilda kreditkortsnummer som tvingar Stripe att returnera en viss typ av svar så att vi kan ordentligt testa vår kod. Här är specialnummer:
I testläget anses alla 3 eller 4-siffriga CVC-nummer giltiga. Eventuellt utgångsdatum som är i framtiden är giltigt. Du kan skicka ett tvåsiffrigt CVC-nummer för att testa det felfallet. På samma sätt kan du skicka ett datum tidigare för att testa svaret om ogiltigt utgångsdatum. Och slutligen, om du vill testa svaret "ogiltigt belopp", klickar du helt enkelt på ett icke-heltal (som 1.35) som beloppet som ska laddas.
För uttömmande information om testning av Stripe kan du besöka deras dokumentationssida.
Stripe tillåter dig att göra mer än engångsavgifter till kundens kort. Du kan skapa en abonnemang som laddar kortet ett visst belopp med ett intervall som du väljer. API: erna du behöver göra här är en del av Stripes PHP-bibliotek och webbplatsen innehåller utmärkt dokumentation som går igenom processen.
Vad händer om du vill lagra kreditkortsinformation så att kunderna inte behöver skriva in det varje gång de besöker din webbplats? Stripe kan du också göra det! Du skapar helt enkelt ett "kund" objekt på ungefär samma sätt som vi skapade ett token. Detta objekt innehåller alla känsliga data som gäller en viss kund. Stripe kommer säkert lagra den här informationen i slutet (vilket innebär att du inte behöver riskera en kaktus slår) och du kan fakturera användaren när du vill bara genom att begära det aktuella "kund" -objektet, precis som vi gjorde med token. Återigen är alla API: er del av Stripes PHP-bibliotek och webbplatsen kommer att gå igenom dig.
Så det är det: Stripe i ett nötskal! Om du vill se ett fungerande exempel på vad vi just har täckt med lite mer komplexitet och design, sväng av den här sidan och inspektera källan. (Tips: det kommer att se bekant.) Annars, om du har några frågor lämna en kommentar nedan, kolla in Stripes support sida eller hitta mig på Twitter: @bdkjones. Tack och lycka till!