# Vipps-Zahlungen

Erfahren Sie, wie Sie Zahlungen per Vipps akzeptieren, einer gängigen Zahlungsmethode in Norwegen.

# Bezahlvorgang

> This is a Bezahlvorgang for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/vipps/accept-a-payment?payment-ui=checkout.

Vipps ist eine [einmalige](https://docs.stripe.com/payments/payment-methods.md#usage) Karten-Wallet-Zahlungsmethode, die in Norwegen verwendet wird. Sie ermöglicht Ihren Kundinnen und Kunden, Zahlungen mit der Vipps-App [zu authentifizieren und zu genehmigen](https://docs.stripe.com/payments/payment-methods.md#customer-actions).

Wenn Ihre Kundin oder Ihr Kunde mit Vipps bezahlt, führt Stripe eine Kartentransaktion mit den von Vipps empfangenen Kartendaten durch. Die Verarbeitung der Kartentransaktion ist für Ihre Integration unsichtbar und Stripe [benachrichtigt Sie sofort](https://docs.stripe.com/payments/payment-methods.md#payment-notification) darüber, ob die Zahlung erfolgreich war oder fehlgeschlagen ist.

> Stripe kann Ihren Kundinnen und Kunden automatisch die relevanten Zahlungsmethoden anzeigen, indem Währungen, Einschränkungen der Zahlungsmethode und andere Parameter ausgewertet werden.
> 
> - Befolgen Sie den Leitfaden [Eine Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted), um eine Checkout-Integration zu erstellen, die [dynamische Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) verwendet.
- Wenn Sie keine dynamischen Zahlungsmethoden verwenden möchten, befolgen Sie die folgenden Schritte, um die Zahlungsmethoden in Ihrer Checkout-Integration manuell zu konfigurieren.

Verwenden Sie diese Anleitung, um Vipps in [Checkout](https://docs.stripe.com/payments/checkout.md), unserem gehosteten Checkout-Formular, zu aktivieren und informieren Sie sich über die Unterschiede zwischen dem Akzeptieren von Zahlungen mit dynamischen Zahlungsmethoden und dem manuellen Konfigurieren von Zahlungsmethoden.

## Kompatibilität ermitteln

**Unterstützte Unternehmensstandorte**: EEA, GB

**Unterstützte Währungen**: `nok`

**Transaktionswährungen**: `nok`

**Zahlungsmodus**: Yes

**Einrichtungsmodus**: No

**Abonnementmodus**: No

Für die Unterstützung von Zahlungen per Vipps muss eine Checkout-Sitzung alle folgenden Bedingungen erfüllen:

- *Die Preise* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) für alle Posten müssen in norwegischen Kronen (Währungscode `NOK`) angegeben werden.

## Stripe einrichten [Serverseitig]

Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register).

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Zahlung akzeptieren

> Dieser Leitfaden beruht auf der grundlegenden Checkout-Integration für die [Annahme einer Zahlung](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout).

### Aktivieren Sie Vipps als Zahlungsmethode

Führen Sie bei der Erstellung einer neuen [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions.md) folgende Schritte aus:

1. Geben Sie bei Anfragen den Vorschau-Header `vipps_preview=v1` mit Ihrer [API-Version](https://docs.stripe.com/sdks/set-version.md) an.
1. Fügen Sie `vipps` zur Liste der `payment_method_types` hinzu.
1. Stellen Sie sicher, dass all Ihre `line_items` die Währung `NOK` verwenden.

#### Von Stripe gehostete Seite

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d "line_items[0][price_data][currency]=nok" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=vipps" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Eingebettetes Formular

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d "line_items[0][price_data][currency]=nok" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=vipps" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### Abwicklung Ihrer Bestellungen

Informieren Sie sich über die [Ausführung von Bestellungen](https://docs.stripe.com/checkout/fulfillment.md), nachdem Sie eine Zahlung angenommen haben.

## Ereignisse nach der Zahlung verarbeiten

Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide).

- **Manuelles Bearbeiten von Ereignissen im Dashboard**

  Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen.

- **Erstellen eines benutzerdefinierten Webhooks**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Integrieren einer vorgefertigten App**

  Bearbeiten Sie häufige Unternehmensereignisse, wie z.&nbsp;B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren.

## Integration testen

Um Ihre Integration in einer Testumgebung zu testen, werden Sie auf eine Testzahlungsseite weitergeleitet, auf der Sie die Testzahlung genehmigen oder ablehnen können.

Geben Sie im Live-Modus die mit Vipps verknüpfte Telefonnummer ein, um eine Push-Benachrichtigung an Ihre mobile Anwendung von Vipps zu senden. Sie können die Zahlung in der mobilen Vipps-App genehmigen oder ablehnen.

## Zahlung autorisieren und später erfassen

Vipps unterstützt die [separate Autorisierung und Erfassung](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md) mit einer Haltefrist von 7&nbsp;Tagen. Stripe storniert den PaymentIntent und sendet das Ereignis [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled), wenn die Zahlung während des 7-tägigen Zeitfensters nicht erfasst wird.

### Stripe anweisen, nur die Autorisierung durchzuführen

Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, legen Sie [capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) beim Erstellen der Checkout-Sitzung auf `manual` fest. Dieser Parameter weist Stripe an, nur den Betrag auf der Karte des Kunden/der Kundin zu autorisieren, der mit Vipps verknüpft ist.

#### Von Stripe gehostete Seite

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d "line_items[0][price_data][currency]=nok" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[capture_method]=manual" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=vipps" \
  --data-urlencode "success_url=https://example.com/success.html"
```

#### Eingebettetes Formular

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d "line_items[0][price_data][currency]=nok" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[capture_method]=manual" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=vipps" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

Nach erfolgreicher Autorisierung sendet Stripe das Ereignis [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Weitere Informationen finden Sie unter [Ereignisse](https://docs.stripe.com/api/events.md).

### Die Gelder erfassen

Nach erfolgreicher Autorisierung wechselt der [Status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) der PaymentIntent zu `requires_capture`, und Sie können die autorisierten Gelder [erfassen](https://docs.stripe.com/api/payment_intents/capture.md). Stripe unterstützt nur die manuelle Erfassung des Gesamtbetrags.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=2000
```

## Optional: Stornierung

Sie können Vipps-Zahlungen stornieren, bevor sie ablaufen, indem Sie [den PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) stornieren, der mit der Vipps-Zahlung verknüpft ist.

## Fehlgeschlagene Zahlungen

Vipps-Transaktionen können fehlschlagen, wenn die zugrunde liegende Kartentransaktion abgelehnt wird. Weitere Infos zu [Kartenablehnungen](https://docs.stripe.com/declines/card.md). In diesem Fall wird die PaymentMethod getrennt und der Status des PaymentIntent wechselt automatisch zu `requires_payment_method`.

Wenn der Status des PaymentIntent `requires_action` ist, muss Ihr Kunde/Ihre Kundin die Zahlung innerhalb von 5&nbsp;Minuten authentifizieren. Wenn nach 5 Minuten keine Aktion erfolgt ist, wird die PaymentMethod getrennt und der Status des PaymentIntent wechselt automatisch zu `requires_payment_method`.

## Rückerstattungen und angefochtene Zahlungen

Stripe führt eine Kartentransaktion mit Standard-Card-Rails im Rahmen einer Vipps-Transaktion durch. [Rückerstattungen](https://docs.stripe.com/refunds.md) und [Zahlungsanfechtungen](https://docs.stripe.com/disputes/how-disputes-work.md) unterliegen den Netzwerkregeln von Visa und Mastercard.

## See also

- [Mehr über Vipps](https://docs.stripe.com/payments/vipps.md)
- [Checkout-Ausführung](https://docs.stripe.com/checkout/fulfillment.md)
- [Checkout anpassen](https://docs.stripe.com/payments/checkout/customization.md)


# Elements

> This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/vipps/accept-a-payment?payment-ui=elements.

Vipps ist eine [einmalige](https://docs.stripe.com/payments/payment-methods.md#usage) Karten-Wallet-Zahlungsmethode, die in Norwegen verwendet wird. Sie ermöglicht Ihren Kundinnen und Kunden, Zahlungen mit der Vipps-App [zu authentifizieren und zu genehmigen](https://docs.stripe.com/payments/payment-methods.md#customer-actions).

Wenn Ihre Kundin oder Ihr Kunde mit Vipps bezahlt, führt Stripe eine Kartentransaktion mit den von Vipps empfangenen Kartendaten durch. Die Verarbeitung der Kartentransaktion ist für Ihre Integration unsichtbar und Stripe [benachrichtigt Sie sofort](https://docs.stripe.com/payments/payment-methods.md#payment-notification) darüber, ob die Zahlung erfolgreich war oder fehlgeschlagen ist.

In diesem Leitfaden zeigen wir Ihnen, wie Sie mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md) ein nutzerdefiniertes Zahlungsformular von Stripe in Ihre Website oder Anwendung einbetten. Mit dem Payment Element können Sie Vipps und andere Zahlungsmethoden automatisch unterstützen. Erweiterte Konfigurationen und Anpassungen finden Sie im Integrationsleitfaden für die [Zahlungsannahme](https://docs.stripe.com/payments/accept-a-payment.md)

## Stripe einrichten [Serverseitig]

Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register).

Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Einen PaymentIntent erstellen [Serverseitig]

Stripe verwendet ein [PaymentIntent-Objekt](https://docs.stripe.com/api/payment_intents.md), um Ihre Absicht darzustellen, Zahlungen von Kundinnen und Kunden einzuziehen, und verfolgt Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs.

Geben Sie Zahlungsmethoden manuell an, indem Sie sie mit dem Attribut `payment_method_types` auflisten.

Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag, einer Währung und einer Liste der Zahlungsmethoden. Entscheiden Sie immer auf Server-Seite, die im Gegensatz zur Client-Seite vertrauenswürdig ist, wie viel berechnet werden soll. Dadurch wird verhindert, dass böswillige Kundinnen und Kunden ihre eigenen Preise wählen können.

Um Vipps-Zahlungen bei der Erstellung eines PaymentIntent zu aktivieren, müssen Sie den Vorschau-Header `vipps_preview=v1` in Ihre API-Anfragen aufnehmen.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d amount=1000 \
  -d currency=nok \
  -d "payment_method_types[]=vipps"
```

### Client-Geheimnis abrufen

Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.

#### Einseitige Anwendung

Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab:

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### Serverseitiges Rendering

Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden.

Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## Zahlungsdaten erfassen [Clientseitig]

Erfassen Sie Zahlungsdetails auf dem Client mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md). Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, die die Erfassung von Zahlungsdaten für eine Vielzahl von Zahlungsmethoden vereinfacht.

Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen.

Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das Attribut [Zulassen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) des Iframes auf `"payment*"` gesetzt sein.

Die Adresse der Bezahlseite muss mit `https://` beginnen, nicht mit `http://`, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu [aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren.

#### HTML + JS

### Stripe.js 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.

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript:

```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('<<YOUR_PUBLISHABLE_KEY>>', {
  betas: 'vipps_pm_beta_1',
  apiVersion: vipps_preview=v1,
});
```

### Payment Element Ihrer Bezahlseite 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:

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

Wenn das vorherige Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden es mit dem DOM-Knoten (Container). Übergeben Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt an `options`, wenn Sie die [Elements](https://docs.stripe.com/js/elements_object/create)-Instanz erstellen:

Gehen Sie sorgfältig mit dem Client-Geheimnis um, denn es kann die Zahlung abschließen. Protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nur dem/der Kund/in preis.

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

```

#### React

### Stripe.js einrichten

Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register:

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Den Elements-Anbieter zu Ihrer Zahlungsseite hinzufügen und konfigurieren

Um die Payment Element-Komponente zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter. Übergeben Sie auch das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt als `options` an den `Elements`-Anbieter.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>', {
  betas: 'vipps_pm_beta_1',
  apiVersion: vipps_preview=v1,
});

function App() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Payment Element hinzufügen

Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen:

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      // Optional: Autofill user's saved payment methods. If the customer's
      // email is known when the page is loaded, you can pass the email
      // to the linkAuthenticationElement
      //
      // <LinkAuthenticationElement id="link-authentication-element"
        // Prefill the email field like so:
        // options={{defaultValues: {email: 'foo@bar.com'}}}
      // /><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

## Zahlung an Stripe senden [Clientseitig]

Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit Details aus dem Payment Element vorzunehmen. Geben Sie für diese Funktion eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) an, um anzugeben, wohin Stripe die Nutzer/innen nach Durchführung der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite weitergeleitet, wie z.&nbsp;B. eine Bankautorisierungsseite, bevor sie zur `return_url` weitergeleitet werden. Kartenzahlungen werden sofort zur `return_url` weitergeleitet, wenn eine Zahlung erfolgreich war.

#### HTML + JS

```javascript
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',
    },
  });

  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;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

Verwenden Sie die Hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) und [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook), um [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) über die Komponente Ihres Zahlungsformulars aufzurufen.

Wenn Sie herkömmliche Klassenkomponenten gegenüber Hooks bevorzugen, können Sie stattdessen einen [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) verwenden.

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }
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',
      },
    });


    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)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

export default CheckoutForm;
```

Achten Sie darauf, dass die `return_url` auf eine Seite Ihrer Website verweist, die den Status der Zahlung angibt. Wenn Stripe den/die Kund/in an die `return_url` weiterleitet, stellen wir die folgenden URL-Abfrageparameter bereit:

| Parameter                      | Beschreibung                                                                                                                                   |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | Die eindeutige ID für die `PaymentIntent`.                                                                                                     |
| `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. |

> Wenn Sie über Tools verfügen, die die Browser-Sitzung der Kund/innen verfolgen, müssen Sie möglicherweise die Domain `stripe.com` zur Referenz-Ausschlussliste hinzufügen. Weiterleitungen haben zur Folge, dass einige Tools neue Sitzungen erstellen. Dies wiederum hindert Sie daran, die gesamte Sitzung zu verfolgen.

Verwenden Sie einen der Abfrageparameter, um den PaymentIntent abzurufen. Überprüfen Sie den [Status des PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md), um zu entscheiden, was Ihren Kundinnen/Kunden angezeigt werden soll. Sie können bei der Angabe der `return_url` auch Ihre eigenen Abfrageparameter anhängen, die während des Weiterleitungsvorgangs erhalten bleiben.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});
```

#### React

```jsx
import React, {useState, useEffect} from 'react';
import {useStripe} from '@stripe/react-stripe-js';

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

## Transaktionen weiterleiten und authentifizieren

Kundinnen und Kunden können Vipps-Transaktionen mit der mobilen App oder der Desktop-App authentifizieren. Der kundenseitig verwendete Client bestimmt die Authentifizierungsmethode, nachdem `confirmPayment` aufgerufen wurde.

#### Authentifizierung mittels mobiler Apps

Nachdem Sie `confirmPayment` aufgerufen haben, leitet Stripe Ihre Kundinnen und Kunden zu Vipps weiter, um die Zahlung zu genehmigen oder abzulehnen. Nachdem Ihre Kundinnen und Kunden die Zahlung autorisiert haben, werden sie auf der Seite zur `return_url` des Payment Intent weitergeleitet. Stripe fügt `payment_intent`, `payment_intent_client_secret`, `redirect_pm_type` und `redirect_status` als URL-Abfrageparameter hinzu (zusammen mit allen vorhandenen Abfrageparametern in der `return_url`).

Eine Authentifizierungssitzung läuft nach 5&nbsp;Minuten ab und dann wechselt der Status des PaymentIntent wieder auf `require_payment_method`. Nach der Statusänderung sehen Ihre Kundinnen/Kunden einen Zahlungsfehler und müssen den Bezahlvorgang von vorne beginnen.

#### Authentifizierung über Desktop-Web-App

Nachdem Sie `confirmPayment` aufgerufen haben, leitet Stripe Ihre Kundinnen und Kunden zu einer von Vipps gehosteten Seite weiter, auf der sie die mit ihrem Vipps-Konto verknüpfte Telefonnummer eingeben können. Dadurch wird eine Push-Benachrichtigung an deren Vipps-App zur Zahlungsauthentifizierung gesendet. Nachdem Ihr Kunde/Ihre Kundin die Zahlung erfolgreich authentifiziert hat, wird er/sie auf der Seite zurück zur `return_url` geleitet. Wenn Sie Kundinnen und Kunden nach der Zahlung nicht im Internet weiterleiten möchten, übergeben Sie `redirect: if_required` an das Payment Element.

Eine Authentifizierungssitzung läuft nach 5&nbsp;Minuten ab und dann wechselt der Status des PaymentIntent wieder auf `require_payment_method`. Nach der Statusänderung sehen Ihre Kundinnen/Kunden einen Zahlungsfehler und müssen den Bezahlvorgang von vorne beginnen.

## Ereignisse nach der Zahlung verarbeiten

Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide).

- **Manuelles Bearbeiten von Ereignissen im Dashboard**

  Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen.

- **Erstellen eines benutzerdefinierten Webhooks**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Integrieren einer vorgefertigten App**

  Bearbeiten Sie häufige Unternehmensereignisse, wie z.&nbsp;B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren.

## Integration testen

#### Testen von mobilen Web-Apps

Um Ihre Integration zu testen, wählen Sie als Zahlungsmethode Vipps und tippen Sie auf **Bezahlen**. In einer Testumgebung werden Sie auf eine Testzahlungsseite weitergeleitet, auf der Sie die Zahlung genehmigen oder ablehnen können.

Wenn Sie im Live-Modus auf **Bezahlen** tippen, werden Sie zur mobilen Anwendung von Vipps weitergeleitet. Dort können Sie die Zahlung genehmigen oder ablehnen.

#### Testen von Desktop-Web-Apps

Um Ihre Integration in einer Testumgebung zu testen, werden Sie auf eine Testzahlungsseite weitergeleitet, auf der Sie die Testzahlung genehmigen oder ablehnen können.

Geben Sie im Live-Modus die mit Vipps verknüpfte Telefonnummer ein, um eine Push-Benachrichtigung an Ihre mobile Anwendung von Vipps zu senden. Sie können die Zahlung in der mobilen Vipps-App genehmigen oder ablehnen.

## Optional: Zahlung autorisieren und später erfassen

Vipps unterstützt die [separate Autorisierung und Erfassung](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md) mit einer Haltefrist von 7&nbsp;Tagen. Stripe storniert den PaymentIntent und sendet das Ereignis [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled), wenn die Zahlung während des 7-tägigen Zeitfensters nicht erfasst wird.

### Stripe anweisen, nur die Autorisierung durchzuführen

Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, legen Sie [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) beim Erstellen des PaymentIntent auf `manual` fest. Dieser Parameter weist Stripe an, nur den Betrag auf der Karte des Kunden/der Kundin zu autorisieren, der mit Vipps verknüpft ist.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d amount=1099 \
  -d currency=dkk \
  -d capture_method=manual \
  -d "payment_method_types[]=vipps" \
  -d "payment_method_data[type]=vipps"
```

Nach erfolgreicher Autorisierung sendet Stripe das Ereignis [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Weitere Informationen finden Sie unter [Ereignisse](https://docs.stripe.com/api/events.md).

### Die Gelder erfassen

Nach erfolgreicher Autorisierung wechselt der [Status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) der PaymentIntent zu `requires_capture`, und Sie können die autorisierten Gelder [erfassen](https://docs.stripe.com/api/payment_intents/capture.md). Stripe unterstützt nur die manuelle Erfassung des Gesamtbetrags.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d amount_to_capture=1099
```

## Optional: Stornierung

Sie können Vipps-Zahlungen stornieren, bevor sie ablaufen, indem Sie [den PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) stornieren, der mit der Vipps-Zahlung verknüpft ist.

## Fehlgeschlagene Zahlungen

Vipps-Transaktionen können fehlschlagen, wenn die zugrunde liegende Kartentransaktion abgelehnt wird. Weitere Infos zu [Kartenablehnungen](https://docs.stripe.com/declines/card.md). In diesem Fall wird die PaymentMethod getrennt und der Status des PaymentIntent wechselt automatisch zu `requires_payment_method`.

Wenn der Status des PaymentIntent `requires_action` ist, muss Ihr Kunde/Ihre Kundin die Zahlung innerhalb von 5&nbsp;Minuten authentifizieren. Wenn nach 5 Minuten keine Aktion erfolgt ist, wird die PaymentMethod getrennt und der Status des PaymentIntent wechselt automatisch zu `requires_payment_method`.

## Rückerstattungen und angefochtene Zahlungen

Stripe führt eine Kartentransaktion mit Standard-Card-Rails im Rahmen einer Vipps-Transaktion durch. [Rückerstattungen](https://docs.stripe.com/refunds.md) und [Zahlungsanfechtungen](https://docs.stripe.com/disputes/how-disputes-work.md) unterliegen den Netzwerkregeln von Visa und Mastercard.


# Direct API

> This is a Direct API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/vipps/accept-a-payment?payment-ui=direct-api.

Vipps ist eine [einmalige](https://docs.stripe.com/payments/payment-methods.md#usage) Karten-Wallet-Zahlungsmethode, die in Norwegen verwendet wird. Sie ermöglicht Ihren Kundinnen und Kunden, Zahlungen mit der Vipps-App [zu authentifizieren und zu genehmigen](https://docs.stripe.com/payments/payment-methods.md#customer-actions).

Wenn Ihre Kundin oder Ihr Kunde mit Vipps bezahlt, führt Stripe eine Kartentransaktion mit den von Vipps empfangenen Kartendaten durch. Die Verarbeitung der Kartentransaktion ist für Ihre Integration unsichtbar und Stripe [benachrichtigt Sie sofort](https://docs.stripe.com/payments/payment-methods.md#payment-notification) darüber, ob die Zahlung erfolgreich war oder fehlgeschlagen ist.

## Stripe einrichten [Serverseitig]

Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register).

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Einen PaymentIntent erstellen [Serverseitig]

Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht darstellt, eine Zahlung von einem Kunden/einer Kundin einzuziehen, und das den Lebenszyklus des Zahlungsvorgangs in jeder Phase verfolgt. Erstellen Sie einen `PaymentIntent` auf Ihrem Server und geben Sie den einzuziehenden Betrag und eine unterstützte Währung (`nok`) an. Wenn Sie bereits eine Integration mit dem [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) haben, fügen Sie `vipps` zur Liste der [Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) hinzu. Stellen Sie sicher, dass Sie den Header `vipps_preview=v1` in Ihre API Anfragen aufnehmen, um Vipps zu aktivieren.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d amount=1099 \
  -d currency=nok \
  -d "payment_method_types[]=vipps" \
  -d "payment_method_data[type]=vipps"
```

### Beispielantwort

```json
{
  "id": "pi_12345",
  "amount": 1099,
  "client_secret": "pi_12345_secret_abcdef",
  "currency": "nok",
  "payment_method": "pm_12345",
  "payment_method_types": [
     "vipps"
  ],
  "status": "requires_confirmation"
}
```

### Client-Geheimnis abrufen

Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.

#### Einseitige Anwendung

Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab:

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### Serverseitiges Rendering

Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden.

Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## PaymentIntent bestätigen

Verwenden Sie die PaymentIntent-[ID](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-id) aus [Schritt&nbsp;2](https://docs.stripe.com/payments/vipps/accept-a-payment.md#create-payment-intent), um den PaymentIntent zu *bestätigen* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects). Dadurch wird erklärt, dass die Kundin/der Kunde beabsichtigt, mit der angegebenen *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) zu bezahlen. Stripe leitet eine Zahlung ein, nachdem der PaymentIntent bestätigt wurde. Die [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) gibt an, wohin Stripe den Kunden/die Kundin weiterleitet, nachdem die Zahlung abgeschlossen ist.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/confirm \
  -u "<<YOUR_SECRET_KEY>>:" \
  --data-urlencode "return_url=https://example.com/checkout/complete"
```

### Beispielantwort

```json
{
  "id": "pi_12345",
  "amount": 1099,
  "currency": "nok",
  "payment_method": "pm_12345",
  "next_action": {
    "redirect_to_url": {
      "return_url": "https://example.com/checkout/complete",
      "url": "https://pm-redirects.stripe.com/authorize/acct_123/pa_nonce_abc"
    },
    "type": "redirect_to_url"
  },
  "payment_method_types": [
     "vipps"
  ],
  "status": "requires_action"
}
```

Um die Zahlung zu autorisieren, leiten Sie Ihre Kundinnen/Kunden an die URL im Feld [next_action[redirect_to_url][url]](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-redirect_to_url-url) weiter.

- Auf dem Desktop öffnet die URL eine Vipps-Zielseite, auf der die Kundinnen und Kunden ihre Telefonnummer eingeben können, mit der ihr Vipps-Konto identifiziert wird. Sie können dann die Vipps-Smartphone-App verwenden, um mit der Zahlungsautorisierung fortzufahren.
- Auf Mobilgeräten öffnet die URL direkt die Vipps-Anwendung (falls vorhanden) oder leitete Nutzer/innen an die Zielseite von Vipps weiter, ähnlich wie beim Desktop-Vorgang.

Ihr Kunde/Ihre Kundin hat 5 Minuten Zeit, die Weiterleitungs-URL zu öffnen und die Zahlung in der Vipps-App zu autorisieren. Wenn die zugrunde liegende Kartenzahlung fehlschlägt, können Ihre Kundinnen und Kunden eine andere Karte auswählen und es in der Vipps-App erneut versuchen. Wenn die Zahlung nicht innerhalb von 5 Minuten autorisiert wird, schlägt sie fehl und der Status der PaymentIntent wechselt zu `requires_payment_method`.

## Ereignisse nach der Zahlung verarbeiten

Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide).

- **Manuelles Bearbeiten von Ereignissen im Dashboard**

  Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen.

- **Erstellen eines benutzerdefinierten Webhooks**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Integrieren einer vorgefertigten App**

  Bearbeiten Sie häufige Unternehmensereignisse, wie z.&nbsp;B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren.

## Integration testen

Erstellen Sie mit Ihren [Test-API-Schlüsseln](https://docs.stripe.com/keys.md#test-live-modes) einen PaymentIntent. Nachdem Sie den PaymentIntent bestätigt haben, folgen Sie der `next_action`-Weiterleitungs-URL zu einer Testseite mit Optionen zur Autorisierung oder Ablehnung der Zahlung.

- Klicken Sie auf **Testzahlung autorisieren**, um den Fall einer erfolgreichen Zahlung zu testen. Der PaymentIntent wechselt von `requires_action` zu `succeeded`.
- Klicken Sie auf **Testzahlung fehlschlagen lassen**, um den Fall einer fehlgeschlagenen Kundenauthentifizierung zu testen. Der PaymentIntent wechselt von `requires_action` zu `requires_payment_method`.

## Optional: Zahlung autorisieren und später erfassen

Vipps unterstützt die [separate Autorisierung und Erfassung](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md) mit einer Haltefrist von 7&nbsp;Tagen. Stripe storniert den PaymentIntent und sendet das Ereignis [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled), wenn die Zahlung während des 7-tägigen Zeitfensters nicht erfasst wird.

### Stripe anweisen, nur die Autorisierung durchzuführen

Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, legen Sie [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) beim Erstellen des PaymentIntent auf `manual` fest. Dieser Parameter weist Stripe an, nur den Betrag auf der Karte des Kunden/der Kundin zu autorisieren, der mit Vipps verknüpft ist.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d amount=1099 \
  -d currency=dkk \
  -d capture_method=manual \
  -d "payment_method_types[]=vipps" \
  -d "payment_method_data[type]=vipps"
```

Nach erfolgreicher Autorisierung sendet Stripe das Ereignis [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Weitere Informationen finden Sie unter [Ereignisse](https://docs.stripe.com/api/events.md).

### Die Gelder erfassen

Nach erfolgreicher Autorisierung wechselt der [Status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) der PaymentIntent zu `requires_capture`, und Sie können die autorisierten Gelder [erfassen](https://docs.stripe.com/api/payment_intents/capture.md). Stripe unterstützt nur die manuelle Erfassung des Gesamtbetrags.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \
  -d amount_to_capture=1099
```

## Optional: Stornierung

Sie können Vipps-Zahlungen stornieren, bevor sie ablaufen, indem Sie [den PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) stornieren, der mit der Vipps-Zahlung verknüpft ist.

## Fehlgeschlagene Zahlungen

Vipps-Transaktionen können fehlschlagen, wenn die zugrunde liegende Kartentransaktion abgelehnt wird. Weitere Infos zu [Kartenablehnungen](https://docs.stripe.com/declines/card.md). In diesem Fall wird die PaymentMethod getrennt und der Status des PaymentIntent wechselt automatisch zu `requires_payment_method`.

Wenn der Status des PaymentIntent `requires_action` ist, muss Ihr Kunde/Ihre Kundin die Zahlung innerhalb von 5&nbsp;Minuten authentifizieren. Wenn nach 5 Minuten keine Aktion erfolgt ist, wird die PaymentMethod getrennt und der Status des PaymentIntent wechselt automatisch zu `requires_payment_method`.

## Rückerstattungen und angefochtene Zahlungen

Stripe führt eine Kartentransaktion mit Standard-Card-Rails im Rahmen einer Vipps-Transaktion durch. [Rückerstattungen](https://docs.stripe.com/refunds.md) und [Zahlungsanfechtungen](https://docs.stripe.com/disputes/how-disputes-work.md) unterliegen den Netzwerkregeln von Visa und Mastercard.