Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Stripe je platforma pro zpracování plateb, která vám umožňuje přidat na web předem vytvořenou stránku pokladny a přijímat a spravovat online platby. Je široce populární díky snadnému použití, rozsáhlé dokumentaci, podpoře místních plateb, možnostem přizpůsobení a brandingu, předplatnému, fakturaci a prevenci podvodů.

Pomocí Stripe můžete přijímat platby z různých zdrojů, včetně kreditních a debetních karet, Apple Pay a Google Pay.

Přidání Stripe Checkout do aplikace Next.js

Pokladnu Stripe můžete integrovat s aplikacemi vytvořenými pomocí různých technologií včetně Next.js.

Tento tutoriál předpokládá, že máte nastavenou stránku elektronického obchodu Next.js, a poskytuje pouze návod, jak na stránky přidat pokladnu Stripe.

Nastavení účtu Stripe a načtení klíčů API

Chcete-li používat pokladnu Stripe, musíte si vytvořit účet Stripe a získat klíče API. Klíče API se skládají z publikovatelného klíče a tajného klíče, které budete používat k ověřování požadavků z vaší aplikace na Stripe API.

Chcete-li nastavit účet Stripe, postupujte takto:

  1. Přejít na Web Stripe a klikněte na tlačítko "Zaregistrovat se".
  2. Zadejte svůj e-mail, celé jméno, zemi a heslo a klikněte na tlačítko „Vytvořit účet“.
  3. Ověřte svůj e-mail podle pokynů v e-mailu, který vám Stripe zašle.
  4. Na hlavním panelu klikněte na „Aktivovat platby“ a odpovězte na otázky, abyste dokončili proces nastavení účtu. Tyto otázky se mohou týkat názvu firmy, adresy a bankovních údajů. Pro účely vývoje použijte testovací režim.
  5. Zkopírujte klíče API z karty „Vývojáři“ do souboru .env ve složce aplikace.

Nyní budete mít přístup k účtu Stripe pomocí klíčů API.

Instalace balíčku Stripe npm

Spuštěním tohoto příkazu nainstalujte balíček Stripe npm.

npm instalační pruh

Importujte knihovnu Stripe na stránku vaší pokladní komponenty.

import Proužek z'proužek';

Ve složce API vytvořte nový soubor s názvem checkout-session.js file. Inicializujte objekt Stripe pomocí klíčů API, které jste získali z řídicího panelu Stripe.

konst pruh = vyžadovat('proužek')(process.env. STRIPE_SECRET_KEY);

Ve funkci obslužné rutiny získejte položky ke kontrole z parametrů těla.

vývoznívýchozíasynchronnífunkcepsovod(req, req) {
konst { item } = req.body;
};

Vytvořte objekt relace pokladny do funkce handleru a předejte položky.

konst relace = čekat stripe.checkout.sessions.create({
 typy_plateb: ['Kartu'],
 řádkové položky: [
 položka,
 ],
 režim: 'Způsob platby',
 success_url: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

Zde je to, co znamenají uzly, které předáváte objektu relace:

  • typy_plateb: Typy platební metody, které relace pokladny přijímá. Prohlédněte si seznam dostupných platebních metod v Proužková dokumentace.
  • řádkové položky: Seznam položek, které uživatel kupuje.
  • režimu: Režim relace pokladny. Pokud položky pokladny obsahují alespoň jednu opakující se položku, přejděte na „předplatné“.
  • success_url: Proužek URL přesměruje uživatele, pokud je platba úspěšná
  • cancel_url: Proužek URL přesměruje uživatele, pokud zruší platbu.

Celkově by soubor checkout-session.js měl vypadat takto:

vývoznívýchozíasynchronnífunkcepsovod(req, req) {
-li (požadovaná metoda 'POŠTA') {
konst { košík } = req.body;
Snaž se {
konst relace = čekat stripe.checkout.sessions.create({
 řádkové položky: [
 vozík
 ],
 režim: 'Způsob platby',
 success_url: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, session.url);
 } chytit (chyba) {
 res.status (err.statusCode || 500.json (err.message);
 }
 } jiný {
 res.setHeader('Dovolit', 'POŠTA');
 res.status(405).konec('Metoda není povolena');
 }
}

Tato funkce nyní používá metodu try/catch k přesměrování uživatelů, když během placení dojde k chybě. Nyní, když jste vytvořili trasu API, která bude zpracovávat platbu, je dalším krokem vytvoření komponenty pokladny, která bude proces placení zpracovávat.

Podívejte se na tento příspěvek vytváření tras API v Next.js pro podrobnější vysvětlení tras API Next.js.

Vytvoření komponenty Checkout

Pro zpracování pokladny je třeba nainstalovat knihovnu @stripe/stripe-js pomocí NPM.

npm install @stripe/stripe-js

@stripe/stripe-js knihovna je načítací nástroj, který vám pomůže načíst instanci Stripe.js.

Po dokončení instalace vytvořte nový soubor v adresáři /components s názvem /components/checkout.js. Poté zavolejte funkci loadstripe z knihovny @stripe/stripe-js a předejte publikovatelný klíč jako argument.

import { loadStripe } z'@stripe/stripe-js';
konst stripePromise = loadStripe(
 proces.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() vrací příslib, který se vyřeší s nově vytvořeným objektem Stripe, jakmile se Stripe.js načte.

Dále přidejte funkci pro vytvoření relace pokladny v komponentě.

vývoznívýchozífunkcePřekontrolovat({vozík}) {
konst rukojeťPokladna = asynchronní () => {
Snaž se {
konst pruh = čekat stripePromise;
konst checkoutSession = čekat axios.post("/api/checkout-session", {
 vozík,
 });


konst výsledek = čekat stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
-li (result.error) {
 upozornění (výsledek.chyba.zpráva);
 }
 } chytit (chyba) {
řídicí panel.log (chyba);
 }
 };
vrátit se (


 </div>
 );
}

Tato funkce využívá Axios k volání API jste vytvořili ve složce /api pro načtení relace pokladny.

Přidejte do příkazu return tlačítko pokladny, které po kliknutí spustí funkci handleCheckout.

Komponentu pokladny můžete vyvolat na stránce košíku.

Zpracování přesměrování z pruhu

V trase API pokladny jste definovali úspěšnou adresu URL a adresu URL pro zrušení, která by měla uživatele přesměrovat, když je proces úspěšný nebo selže. Adresa URL pro zrušení se mapuje na cestu /cancel, zatímco adresa URL pro úspěch se mapuje na cestu /success. Přidejte dvě komponenty do složky /pages s názvem success a zrušte, aby bylo možné tyto adresy URL zpracovat.

Do pages/success.js přidejte komponentu úspěchu.

vývoznívýchozífunkceÚspěch() {
vrátit se<div>Úspěšná platbadiv>;
}

Do pages/cancel.js přidejte komponentu cancel.

vývoznívýchozífunkcezrušení() {
vrátit se<div>Při placení došlo k chybědiv>;
}

Nyní se Stripe přesměruje na některou z těchto stránek v závislosti na stavu pokladny.

Pokud používáte Next.js 13, podívejte se na tento tutoriál jak funguje složka aplikace v Next.js 13 pro přepnutí ze složky /pages.

Další možnosti přizpůsobení pro stránku pokladny

Na panelu Stripe můžete upravit stránku pokladny tak, aby odpovídala vzhledu vaší značky. Můžete přidat logo, ikonu, barvu značky, barvu zvýraznění a dokonce použít svou vlastní doménu. Při vytváření relace pokladny můžete navíc přidat preferované způsoby platby a také určit jazyk, ve kterém se má Stripe zobrazovat na stránce pokladny. Všechny tyto možnosti vám umožňují přizpůsobit proces pokladny tak, aby vyhovoval vaší aplikaci.

Proč používat Stripe pro stránku pokladny?

I když si můžete vytvořit svou vlastní službu zpracování pokladen, použití platební platformy, jako je Stripe, je obvykle lepší volbou. Stripe pokladna vám pomůže zkrátit dobu vývoje a umožní vám začít přijímat platby během krátké doby.

Navíc získáte další funkce, jako je shoda s PCI, obnovení košíku, možnosti slev a možnost shromažďovat informace o dopravě a odesílat faktury po zaplacení.