Bouw een Geavanceerde Kayana-integratie met Stripe in Node.js

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

Overzicht

De Kayana Payment API stelt u in staat betalingen te accepteren zonder uw eigen PCI-compliant checkout te bouwen.

Deze handleiding begeleidt u door de integratie van de Stripe Embedded Checkout flow met behulp van Node.js in sandboxmodus.

Wat je gaat bouwen

In deze gids zul je:

1. Een betalingsinstantie maken op je Node.js server
2. De Stripe publishable key ophalen
3. Stripe initialiseren op de frontend
4. Stripe's veilige Embedded Checkout capsule weergeven
5. De betaling veilig voltooien

Voordat u begint

U hebt het volgende nodig:

• Een Kayana property ID
• Toegang tot de sandbox environment
• Basiskennis van Node.js
• Een Node.js backend server
• Een React / Next.js frontend

Sandbox vs Productie

Sandbox

Veilige testomgeving

• Gebruikt Stripe-testsleutels
• Geen echte transacties
• Ideaal voor ontwikkeling en testen

Productie

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

Hoe het werkt

De Stripe-betalingsstroom bestaat uit:

Server-zijde (Node.js)

Maak een betalingsinstantie aan met behulp van Kayana's API.

Server ontvangt

• client_secret
• publishable_key

Client-zijde

Initialiseer Stripe en render Embedded Checkout

Stripe

Verwerkt betalingsbevestiging veilig.

Serverinstallatie (Node.js)

Basis-URL

Sandbox:

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

Stap 1 - Een betaling maken (Node.js Backend)

Maak een Node.js API-eindpunt dat de betalings-API van Kayana aanroept.

Voorbeeld met behulp van Express.js.

Afhankelijkheden installeren

npm install express node-fetch dotenv

Node.js Server-implementatie

require("dotenv").config();

const express = require("express");

const fetch = require("node-fetch");

const app = express();

app.use(express.json());

app.post("/api/business-payment", async (req, res) => {

try {

const response = await fetch(

"https://integration.dev.kayana.co.uk/business/payment",

{

method: "POST",

headers: {

"Content-Type": "application/json",

"x-api-key": process.env.KAYANA_API_KEY,

type: "business",

},

body: JSON.stringify({

property_id: "Prop_abc123example",

psp_code: "STRIPE",

currency_code: "GBP",

amount: 12.0,

customer_email: "customer@example.com",

}),

}

);

const data = await response.json();

res.json(data);

} catch (error) {

res.status(500).json({

status: false,

message: "Betaling maken mislukt",

});

}

});

app.listen(3001, () => {

console.log("Server wordt uitgevoerd op poort 3001");

});

Omgevingsvariabelen

Maak een .env bestand:

KAYANA_API_KEY=YOUR_API_KEY

⚠️ Geef deze sleutel nooit bloot aan de frontend.

Aanvraagparameters

Voorbeeld API-respons

{

"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 moet alleen op de frontend worden gebruikt om Stripe te initialiseren.

Stap 2 - Frontend-integratie (Stripe Embedded Checkout)

Installeer Stripe SDK:

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

React / Next.js Frontend Implementation

"use client";

import { useState } from "react";

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

import {

EmbeddedCheckoutProvider,

EmbeddedCheckout,

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

export default function PaymentPage() {

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

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

const createPayment = async () => {

const res = await fetch("http://your-server.com/api/business-payment", {

method: "POST",

});

const data = await res.json();

if (data.status) {

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

setClientSecret(data.data.client_secret);

} else {

alert(data.message);

}

};

if (clientSecret && stripePromise) {

return (

<EmbeddedCheckoutProvider

stripe={stripePromise}

options={{ clientSecret }}

>

<EmbeddedCheckout />

</EmbeddedCheckoutProvider>

);

}

return (

<>

<h1>Stripe Payment Testing Page</h1>

<button onClick={createPayment}>

Betalingscapsule openen

</button>

</>

);

}

Betalingsstroom

Gebruiker klikt op "Betalen"

↓

Frontend roept Node.js API aan

↓

Node.js roept Kayana API aan

↓

Kayana maakt een Stripe Checkout-sessie

↓

Retourneert:

client_secret

publishable_key

↓

Frontend laadt Stripe

↓

Stripe Embedded Checkout verschijnt

↓

Gebruiker voert kaartgegevens in

↓

Stripe bevestigt betaling

Testen in Sandbox

Gebruik Stripe-testkaarten.

Aanvullende Details:

• Vervaldatum → Elke toekomstige datum
• CVC → Willekeurig 3 cijfers
• ZIP → Elk geldig formaat

⚠️ Gebruik nooit testkaarten in productie.

Foutafhandeling

Alle antwoorden bevatten:

{

"status": false,

"message": "Description of error"

}

Veelvoorkomende fouten

Going Live Checklist

Voor productie:

• Verkrijg production x-api-key
• Schakel over naar production base URL
• Gebruik live Stripe publishable key
• Test echte kaartransacties
• Implementeer Stripe webhooks

Nooit:

• Gebruik sandbox-sleutels in productie
• Geef geheime sleutels bloot aan de frontend

Ondersteuning

Technische ondersteuning: Kayana Technical Team Productiereferenties: Neem contact op met uw Kayana-accountmanager.