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

Bouw een veilige kaartbetalingsintegratie met Kayana Payment API powered by RYFT in een Next.js-toepassing.

Deze handleiding legt uit hoe u:

• Een betalingssessie vanuit uw backend maakt
• De RYFT openbare sleutel ophaalt
• De RYFT SDK initialiseert
• Het betalingsformulier weergeeft
• De betaling veilig voltooit

Overzicht

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

De betalingsstroom werkt als volgt:

1️⃣ Server maakt een payment instance aan
2️⃣ Server haalt de RYFT public key op
3️⃣ Frontend laadt RYFT SDK
4️⃣ Frontend initialiseert de betalingssessie
5️⃣ Klant voert kaartgegevens in en voltooit de betaling

Voordat u begint

U hebt nodig:

• Kayana Property ID
• API Key
• Toegang tot Sandbox Environment
• Basiskennis van Node.js / Next.js

Sandbox versus productie

Sandbox

Veilige testomgeving.

• Gebruikt testbetalingsgegevens
• Geen echte geldtransacties
• Basis-URL:

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

Productie

Live betalingsomgeving.

• Echte transacties
• Vereist productie-API-sleutel
• Basis-URL:

https://integration.kayana.co.uk

RYFT Payment Flow

Frontend laadt

https://embedded.ryftpay.com/v2/ryft.min.js

Frontend initialiseert RYFT

Ryft.init()

Gebruiker voltooit betaling

Ryft.attemptPayment()

Configureer de server

Base URL

Sandbox:

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

Production:

https://integration.kayana.co.uk

Stap 1 - Betalingsinstantie maken (serverzijde)

Maak een betalingssessie 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 (linkernavigatiebalk).
• Selecteer API-sleutelbeheer.
• Klik op API-sleutel maken.
• Kopieer de gegenereerde sleutel onmiddellijk en verzend deze in de header.

Aanvraagparameters

Optionele browserinformatie

Optioneel facturatieadres

Voorbeeld serverimplementatie (Next.js API Route)

export async function POST() {

try {

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: "RYFT",

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();

return Response.json(data, { status: response.status });

} catch (error) {

return Response.json(

{ error: "Payment failed", details: error.message },

{ status: 500 }

);

}

}

Voorbeeld API-respons

{

"message": "Payment session created successfully",

"status": true,

"data": {

"client_secret": "ps_01KK…MKXJ8NRBCR…",

"next_step": {

"action": "FORM",

"proceed": true

},

"transaction_id": "Tx_9052db2d798f4…..ab8e032",

"order_id": "Order_5ab37f6….0efc5b0a"

}

}

⚠️ Belangrijk

client_secret mag alleen op de frontend worden gebruikt.

Zet geheime API-sleutels nooit bloot aan de browser.

Stap 2 — RYFT openbare sleutel ophalen

Uw backend moet het volgende aanroepen:

GET /web/payment/public-key

Headers

x-api-key

x-psp-code

x-currency-code

type

Voorbeeld

export async function GET() {

const response = await fetch(

"https://integration.dev.kayana.co.uk/web/payment/public-key",

{

method: "GET",

headers: {

"x-api-key": "YOUR_API_KEY",

"x-psp-code": "RYFT",

"x-currency-code": "GBP",

"type": "business",

},

}

);

const data = await response.json();

return Response.json(data);

}

VOORBEELDANTWOORD

{

"status": true,

"data": {

"public_key": "pk_sandbox_TlD……d+iMtqu/pmWyGvThg…."

}

}

Stap 3 - RYFT SDK laden (Frontend)

Voeg de RYFT SDK toe aan uw pagina.

https://embedded.ryftpay.com/v2/ryft.min.js

Voorbeeld met Next.js:

<Script

src="https://embedded.ryftpay.com/v2/ryft.min.js"

strategy="afterInteractive"

/>

Stap 4 - Initialiseer RYFT

Na het ophalen van:

• publicKey
• clientSecret

Initialiseer de SDK.

window.Ryft.init({

publicKey,

clientSecret

});

Stap 5 - Betaling proberen

Betaling vanuit het formulier activeren.

const paymentSession = await window.Ryft.attemptPayment();

Voorbeeld:

if (

paymentSession.status === "Approved" ||

paymentSession.status === "Captured"

) {

alert("Payment Successful");

}

Betalingen testen

Gebruik RYFT-testkaarten in de sandbox.

Voorbeeld:

Gebruik:

• Elke toekomstige vervaldatum
• Elke CVC

⚠️ Gebruik nooit testkaarten in productie

Veelvoorkomende fouten

Going Live Checklist

Voor het overgaan naar productie:

✔ Zorg voor production API key
✔ Schakel over naar production base URL
✔ Controleer RYFT configuration
✔ Test real card transactions
✔ Implementeer payment confirmation webhooks

Aanbevolen beveiligingspraktijken

Nooit:

❌ API-sleutels op frontend blootstellen
❌ Sandbox-sleutels in productie gebruiken
❌ client_secret openbaar registreren

Altijd:

✔ Betalingen verwerken via server-API-routes

Volgende stappen

Als u Stripe als uw Payment Service Provider (PSP) prefereert, ondersteunt Kayana ook een volledige Stripe-integratieflow. Raadpleeg onze handleiding over het bouwen van een geavanceerde Kayana-integratie met Stripe in React/Next.js.