Ein Abonnement für Klarna einrichten
Erfahren Sie, wie Sie ein Abonnement für Klarna einrichten und abrechnen können.
Verwenden Sie diesen Leitfaden, um ein Abonnement mit Klarna als Zahlungsmethode einzurichten.
Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.
Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe API über Ihre Anwendung:
Produkt und Preis erstellenDashboard
Produkte stehen für den von Ihnen angebotenen Artikel oder Dienst. Preise geben an, wie viel und wie häufig Sie für ein Produkt berechnen. Dies schließt ein, wie viel ein Produkt kostet, welche Währung Sie akzeptieren und ob es sich um eine einmalige oder eine wiederkehrende Zahlung handelt. Wenn Sie nur ein paar wenige Produkte und Preise haben, können Sie diese im Dashboard erstellen und verwalten.
In diesem Leitfaden wird ein Stock-Foto-Service als Beispiel verwendet, für den Kund/innen ein monatliches Abonnement mit dem Betrag von 15 USD berechnet werden. Um dies zu modellieren:
- Navigieren Sie zur Seite Produkt hinzufügen.
- Geben Sie einen Namen für das Produkt an.
- Geben Sie 15 für den Preis ein.
- Wählen Sie als Währung USD aus.
- Klicken Sie auf Produkt speichern.
Zeichnen Sie nach Erstellen des Produkts und des Preises die Preis-ID auf, sodass Sie diese in nachfolgenden Schritten verwenden können. Die ID wird auf der Preisseite angezeigt und sieht in etwa so aus: price_
.
Abonnement erstellenServerseitig
Erstellen Sie ein Abonnement, das einen Preis und eine Kundin/einen Kunden mit dem Status incomplete
hat, indem Sie den Parameter payment_behavior mit dem Wert default_
angeben. Legen Sie den Parameter payment_
fest, um eine Zahlungsmethode bei der Aktivierung eines Abonnements zu speichern.
Die Antwort enthält die erste Rechnung des Abonnements. Dies enthält die Zahlungen der Rechnung, einschließlich eines Standard-PaymentIntent, den Stripe für diese Rechnung generiert hat, und des Bestätigungsgeheimnisses, das Sie clientseitig verwenden können, um den Zahlungsvorgang sicher abzuschließen, anstatt das gesamte PaymentIntent-Objekt zu übergeben. Rufen Sie die PaymentIntent-ID, die Sie zum Bestätigen einer Zahlung verwenden müssen, von latest_
ab. Geben Sie das latest_
an das Frontend zurück, um die Zahlung abzuschließen.
Testversion einrichten
Sie können Abonnements mit kostenlosen Testversionen einrichten. Erfahren Sie, wie Sie Zahlungen für aktive Abonnements mit Testphasen verzögern.
Zahlungsinformationen erfassenClientseitig
Stripe Elements einrichten
Das Payment Element ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es in den head
Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.
<head> <title>Checkout</title> <script src="https://js.stripe.com/basil/stripe.js"></script> </head> <body> <!-- content here --> </body>
Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript:
// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe(
);'pk_test_TYooMQauvdEDq54NiTphI7jx'
Payment Element zu Ihrer Seite hinzufügen
Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular.
<form id="payment-form"> <div id="payment-element"> <!-- Elements will create form elements here --> </div> <button id="submit">Subscribe</button> <div id="error-message"> <!-- Display error message to your customers here --> </div> </form>
Wenn das obige Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden diese mit dem Container DOM-Knoten. Im Schritt Abonnement erstellen haben Sie den Wert client_
an das Frontend übergeben. Übergeben Sie diesen Wert als Option beim Erstellen einer Instanz von Elements.
const options = { clientSecret: '{{CLIENT_SECRET}}', }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 5 const elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element');
Das Payment Element stellt ein dynamisches Formular dar, mit dem Ihre Kundinnen und Kunden eine Zahlungsmethode auswählen können. Das Formular erfasst automatisch alle notwendigen Zahlungsdetails für die ausgewählte Zahlungsmethode.
Zahlung abschließen
Verwenden Sie stripe.
, um die Zahlung mit den Details aus dem Payment Element abzuschließen und das Abonnement zu aktivieren. Dadurch wird eine PaymentMethod erstellt und der erste PaymentIntent des unvollständigen Abonnements bestätigt, wodurch eine Zahlung ausgelöst wird.
Stripe leitet die Kundinnen und Kunden an Klarna weiter, wo sie sowohl die erste Zahlung als auch alle zukünftigen Zahlungen durchführen. Über Ihre return_url geben Sie an, wohin die Nutzer/innen nach Abschluss des Bezahlvorgangs auf Klarna weitergeleitet werden sollen.
const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", mandate_data: { customer_acceptance: { type: "online", online: { infer_from_client: true, } } } } }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } });
Nachdem die Nutzer/innen weitergeleitet wurden, fragen Sie den PaymentIntent ab und prüfen so seinen Status. Wenn dieser succeeded
lautet, war die Zahlung erfolgreich und Ihr Abonnement ist aktiv.
Integration testen
Nachfolgend haben wir speziell ausgewählte Testdaten für die derzeit unterstützten Kundenländer zusammengestellt. In einer Sandbox nutzt Klarna die angegebene E-Mail-Adresse, um eine Transaktion zu genehmigen oder abzulehnen.
Zwei-Schritte-Authentifizierung
Jede 6-stellige Zahl ist ein gültiger Code für die Zwei-Schritte-Authentifizierung. Verwenden Sie 999999
, damit die Authentifizierung fehlschlägt.
Rückzahlungmethode
Innerhalb des Klarna-Ablaufs können Sie die folgenden Testwerte verwenden, um verschiedene Rückzahlungsarten auszuprobieren:
Typ | Wert |
---|---|
Lastschriftverfahren | DE11520513735120710131 |
Banküberweisung | Demo-Bank |
Kreditkarte |
|
Debitkarte |
|