Een geavanceerde Kayana-integratie met Stripe in React/Next.js bouwen

Bouw een geavanceerde Kayana-integratie om veilig kaartbetalingen in te zamelen met behulp van Kayana's Payment API, aangedreven door Stripe, voor uw e-commerce winkel.

Overzicht

Met de Kayana Payment API kunt u betalingen accepteren zonder uw eigen PCI-compliant checkout te bouwen.

Deze gids begeleidt u door het integreren van de Stripe Checkout (Embedded) flow in sandboxmodus.

Wat u gaat bouwen:

• Een betalingsinstantie op uw server maken
• De Stripe publiceerbare sleutel ophalen
• Stripe initialiseren op de frontend
• Stripe's beveiligde Checkout-capsule weergeven
• De betaling veilig voltooien

Voordat je begint

Je hebt het volgende nodig:

• Een Kayana property ID
• Toegang tot de sandbox-omgeving
• Basiskennis van server-side development
• Node.js / Next.js (voorbeelden beschikbaar)

Sandbox vs Production

Sandbox

• Veilige testomgeving
• Gebruikt test Stripe-sleutels
• Geen echte transacties

Production

• Vereist een autorisatietoken
• Gebruikt live Stripe-sleutels
• Verwerkt echte betalingen

Hoe het werkt

De Stripe-betalingsstroom bestaat uit:

1. Server-side – Een betalingsinstantie maken
2. Server-side – Ontvangen:
• client_secret (cs_test_…)
• publishable_key
3. Client-side – Stripe initialiseren en Embedded Checkout weergeven
4. Stripe – Betalingsbevestiging veilig afhandelen

Stel de server in

Base URL

Sandbox:

https://integration.dev.kayana.co.uk

Production:

https://integration.kayana.co.uk

Stap 1: Een betaling maken

Maak een betalingsinstantie aan door het volgende aan te roepen:

POST /web/payment

Headers

Hoe u uw X API-sleutel kunt verkrijgen

Volg deze stappen in Partner Admin:

• Meld u aan bij Kayana Partner Admin.
• Navigeer naar Instellingen (linker zijbalk).
• Selecteer API Key Management.
• Klik op Create API Key.
• Kopieer de gegenereerde sleutel onmiddellijk en verzend deze in de header.

Aanvraagparameters

VOORBEELDAANVRAAG

const response = await fetch( "https://integration.dev.kayana.co.uk/web/payment", { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": "YOUR_API_KEY", "type": "business" }, body: JSON.stringify({ property_id: "Prop_039f025cdbc74ca9957dbec1b3e193c1", psp_code: "STRIPE", currency_code: "GBP", amount: 100.5, customer_email: "customer@example.com", payment_mode: "CARD", browser_info: { userAgent: "Mozilla/5.0", acceptHeader: "/", language: "en-US", colorDepth: 24, screenHeight: 1080, screenWidth: 1920, timeZoneOffset: 0 }, billing_address: { street: "221B Baker Street", city: "London", postalCode: "NW1 6XE", country: "GB", state: "Greater London" } }) } );

const data = await response.json();

VOORBEELDRESPONS

const data = await response.json();

{

"status": true,

"data": {

"instance_id": "Payment_xyz789example",

"client_secret": "cs_test_abc123_secret_xyz456",

"publishable_key": "pk_test_abc123example",

"next_step": {

"action": "FORM",

"proceed": true

},

"transaction_id": "Tx_txn456example"

}

}

Responsparameters

Belangrijk: client_secret mag alleen aan de voorkant worden gebruikt om Stripe te initialiseren.

Stap 2: Betaling voltooien op Frontend (Stripe Embedded Checkout)

Aangezien de API retourneert:

cs_test_…

Dit betekent dat de Stripe Checkout Session is gemaakt.

U moet Stripe Embedded Checkout gebruiken, niet confirmCardPayment.

Stripe SDK installeren

npm install @stripe/react-stripe-js @stripe/stripe-js

Frontend Implementation (Next.js Example)

"use client";

import { useState } from "react";

import { loadStripe } from "@stripe/stripe-js";

import {

EmbeddedCheckoutProvider,

EmbeddedCheckout,

} from "@stripe/react-stripe-js";

export default function Home() {

const [clientSecret, setClientSecret] = useState(null);

const [stripePromise, setStripePromise] = useState(null);

const createPayment = async () => {

const res = await fetch("/api/business-payment", {

method: "POST",

});

const data = await res.json();

setStripePromise(loadStripe(data.data.publishable_key));

setClientSecret(data.data.client_secret);

};

if (clientSecret && stripePromise) {

return (

<EmbeddedCheckoutProvider

stripe={stripePromise}

options={{ clientSecret }}

>

<EmbeddedCheckout />

</EmbeddedCheckoutProvider>

);

}

return (

<>

<h1>Stripe Payment Testing Page</h1>

<button onClick={createPayment}>Open Payment Capsule</button>

</>

);

}

Testen in Sandbox

Gebruik Stripe-testkaarten:

Aanvullende details:

• Vervaldatum: Elke toekomstige datum
• CVC: Willekeurige 3 cijfers
• ZIP: Elk geldig formaat

Waarschuwing: Gebruik nooit testkaarten in productie.

Foutafhandeling

Alle reacties bevatten:

{

"status": false,

"message": "Description of error"

}

Veelvoorkomende fouten

Checklist voor Live Gaan

Vóór productie:

• Productie x-api-key ophalen
• Overschakelen naar productie base URL
• Live Stripe publishable key gebruiken
• Echte kaartransacties testen
• Webhooks implementeren voor betalingsbevestiging

Nooit:

• Sandbox-sleutels in productie gebruiken
• Geheime sleutels in frontend zichtbaar maken

Ondersteuning

Hulp nodig?

• Technische problemen: Neem contact op met Kayana Technical Support
• Productiereferenties: Aanvragen bij uw Kayana-accountmanager
• PSP-configuratie: Neem contact op met Kayana Technical Support

Volgende stappen

• Webhook-integratie voor betalingsmeldingen verkennen
• Meer informatie over restituties en geschillenafhandeling
• Terugkerende betalingen voor abonnementen instellen

Volgende stappen

Als u de voorkeur geeft aan RYFT als uw Payment Service Provider (PSP), ondersteunt Kayana ook een volledige RYFT-integratieflow. Raadpleeg onze gids over Het bouwen van een geavanceerde Kayana-integratie met RYFT in React/Next.js.