# OXXO-Zahlung annehmen

So akzeptieren Sie Zahlungen per OXXO, einer gängigen Zahlungsmethode in Mexiko.

# Checkout

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

> 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.

Bei OXXO handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden [zusätzliche Schritte](https://docs.stripe.com/payments/payment-methods.md#customer-actions) ausführen müssen, damit eine Zahlung abgeschlossen werden kann. Die *Kundinnen/Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) zahlen mit einem OXXO-Gutschein, der eine generierte Nummer aufweist, in einem OXXO Convenience Store in bar.

## Kompatibilität bestimmen

**Unterstützte Unternehmensstandorte**: MX

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

**Transaktionswährungen**: `mxn`

**Zahlungsmodus**: Yes

**Einrichtungsmodus**: No

**Abonnementmodus**: No

Für die Unterstützung von OXXO-Zahlungen 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) sämtlicher Posten müssen in der gleichen Währung angegeben werden. Falls Posten in verschiedenen Währungen vorhanden sind, muss für jede Währung eine separate Checkout-Sitzung erstellt werden.
- Sie können nur einmalige Posten verwenden (wiederkehrende *Abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)pläne werden nicht unterstützt).

## Zahlung annehmen

> Erstellen Sie zunächst eine Integration, um mit Checkout [Zahlungen anzunehmen](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout), bevor Sie mit diesem Leitfaden fortfahren.

Das führt Sie durch die Aktivierung von OXXO und zeigt die Unterschiede zwischen dem Akzeptieren von Zahlungen mit dynamischen Zahlungsmethoden und dem manuellen Konfigurieren von Zahlungsmethoden.

### OXXO als Zahlungsmethode aktivieren

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

1. Fügen Sie `oxxo` zur Liste der `payment_method_types` hinzu.
1. Stellen Sie sicher, dass alle `line_items` die Währung `mxn` verwenden.

#### Von Stripe gehostete Seite

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=mxn" \
  -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]=oxxo" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Vollständige eingebettete Seite

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=mxn" \
  -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]=oxxo" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### Zusätzliche Optionen für Zahlungsmethoden

Sie können für Ihre `Session` den optionalen Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-oxxo-expires_after_days) nutzen, um die Gültigkeit eines OXXO-Gutscheins in Kalendertagen anzugeben. Wenn Sie beispielsweise einen OXXO-Gutschein am Montag erstellen und `expires_after_days` auf 2 setzen, läuft der OXXO-Gutschein am Mittwoch um 23:59 Uhr amerikanischer/mexikanischer Zeit (UTC-6) ab. Der Parameter `expires_after_days` kann Werte zwischen 1 und 7 aufweisen. Der Standardwert ist 3 Tage.

#### Von Stripe gehostete Seite

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=mxn" \
  -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_options[oxxo][expires_after_days]=2" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=oxxo" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Vollständige eingebettete Seite

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=mxn" \
  -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_options[oxxo][expires_after_days]=2" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=oxxo" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### An die von Stripe gehostete Gutscheinseite weiterleiten

Nach dem erfolgreichen Absenden des Checkout-Formulars werden die Kundinnen/Kunden zur `hosted_voucher_url` weitergeleitet. Über die gehostete Gutscheinseite können sie den Barcode finden oder den OXXO-Gutschein ausdrucken. Die `hosted_voucher_url` befindet sich in [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url).

Auf der Seite mit den [Branding-Einstellungen](https://dashboard.stripe.com/account/branding) können Sie die Nutzeroberfläche für Ihre Kund/innen anpassen. Folgende Anpassungen sind für Gutscheine möglich:

- **Symbol** – Ihr Markenlogo und Ihr offizieller Firmenname
- **Akzentfarbe** — Farbe für die Schaltfläche „Drucken“
- **Markenfarbe** – Die Hintergrundfarbe

### Wickeln Sie Ihre Bestellungen ab

Da OXXO eine Zahlungsmethode mit verzögerter Benachrichtigung ist, müssen Sie eine Methode wie *Webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) nutzen, um den Zahlungsstatus zu überwachen und die *Ausführung* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) der Bestellung vorzunehmen. Erfahren Sie mehr zum [Einrichten von Webhooks und Ausführen von Bestellungen](https://docs.stripe.com/checkout/fulfillment.md).

Die folgenden Ereignisse werden gesendet, wenn sich der Zahlungsstatus ändert:

| Ereignisname                                                                                                                                 | Beschreibung                                                                                                                                                                                                                         | Nächste Schritte                                                                                       |
| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed)                             | Die Kund/innen haben das Checkout-Formular erfolgreich abgesendet. Stripe hat den OXXO-Gutschein generiert.

  Sie können die `hosted_voucher_url` per E-Mail an die Kund/innen senden, falls sie den OXXO-Gutschein verloren haben. | Warten Sie, bis die Kundin/der Kunde den OXXO-Gutschein bezahlt hat.                                   |
| [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Die Kundin/der Kunde hat den OXXO-Gutschein erfolgreich bezahlt. Der `PaymentIntent` geht in den Status `succeeded` über.                                                                                                            | Wickeln Sie die Kundenbestellung ab.                                                                   |
| [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed)       | Der OXXO-Gutschein ist abgelaufen oder die Zahlung ist aus einem anderen Grund fehlgeschlagen. Der `PaymentIntent` kehrt zum Status `requires_payment_method` zurück.                                                                | Kontaktieren Sie den Kunden/die Kundin per E-Mail und fordern Sie eine neue Bestellung von ihm/ihr an. |

## Integration testen

Wählen Sie beim Testen Ihrer Checkout-Integration „OXXO“ als Zahlungsmethode aus und klicken Sie auf **Bezahlen**.

| E-Mail-Adresse                                 | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simuliert einen OXXO-Gutschein, bei dem Kund/innen nach 3 Minuten bezahlen und der Webhook `payment_intent.succeeded` nach etwa 3 Minuten eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `{any_prefix}succeed_immediately@{any_domain}` | Simuliert einen OXXO-Gutschein, bei dem Kund/innen sofort bezahlen und der Webhook `payment_intent.succeeded` nach wenigen Sekunden eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `{any_prefix}expire_immediately@{any_domain}`  | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach wenigen Sekunden eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf die aktuelle Zeit festgelegt.

  Beispiel: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen zahlen, und bei dem der Webhook `payment_intent.payment_failed` nach ca. 3 Minuten eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf 3&nbsp;Minuten festgelegt.

  Beispiel: expire_with_delay@test.com          |
| `{any_prefix}fill_never@{any_domain}`          | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach 1 Werktag und 2 Kalendertagen eingeht. Im Live-Betrieb geht dieser Webhook zur gleichen Zeit ein wie im Test-Modus.

  Beispiel: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                                                 |

## Optional: Zahlungsanweisungen per E-Mail senden

Sie können E-Mails mit OXXO-Zahlungsanweisungen auf der Seite [E-Mail-Einstellungen](https://dashboard.stripe.com/settings/emails) im Dashboard aktivieren. Nach der Aktivierung sendet Stripe E-Mails mit Zahlungsanweisungen, nachdem der PaymentIntent bestätigt wurde. Die E-Mails enthalten die OXXO-Nummer und einen Link zu der von Stripe gehosteten Gutscheinseite.

> In Testumgebungen werden E-Mails mit Anweisungen nur an E-Mail-Adressen gesendet, die mit dem Stripe-Konto verknüpft sind.

## See also

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


# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/oxxo/accept-a-payment?payment-ui=elements&api-integration=checkout.

Informationen dazu, welche API den Anforderungen Ihres Unternehmens entspricht, finden Sie im [Vergleichsleitfaden](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Verwenden Sie das [Payment Element](https://docs.stripe.com/payments/payment-element.md), um ein nutzerdefiniertes Stripe-Zahlungsformular in Ihre Website oder Anwendung einzubetten und Kundinnen und Kunden Zahlungsmethoden anzubieten. Erweiterte Konfigurationen und Anpassungen finden Sie im Integrationsleitfaden für die [Zahlungsannahme](https://docs.stripe.com/payments/accept-a-payment.md)

## Kompatibilität bestimmen

**Unterstützte Unternehmensstandorte**: MX

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

**Transaktionswährungen**: `mxn`

**Zahlungsmodus**: Yes

**Einrichtungsmodus**: No

**Abonnementmodus**: No

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

- Die Preise sämtlicher Posten müssen in derselben Währung sein. Falls Posten in verschiedenen Währungen vorhanden sind, muss für jede Währung eine separate Checkout-Sitzung erstellt werden.
- Sie können nur einmalige Posten verwenden (wiederkehrende Abonnementpläne werden nicht unterstützt).

## Server einrichten [Serverseitig]

Verwenden Sie die offiziellen Bibliotheken von Stripe, um von Ihrer Anwendung aus auf die 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'
```

## Checkout-Sitzung erstellen [Serverseitig]

Fügen Sie einen Endpoint auf Ihrem Server hinzu, der eine [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions/create.md) erstellt und sein [Client-Geheimnis](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) an Ihr Frontend zurückgibt. Eine Checkout-Sitzung stellt die Sitzung Ihres Kunden/Ihrer Kundin dar, während er/sie per Checkout für einmalige Käufe oder Abonnements bezahlt. Checkout-Sitzungen laufen 24&nbsp;Stunden nach Erstellung ab.

Wir empfehlen die Verwendung [dynamischer Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), um allen Kundinnen und Kunden dynamisch die relevantesten infrage kommenden Zahlungsmethoden anzuzeigen und die Konversionsrate zu maximieren. Sie können [Zahlungsmethoden auch manuell auflisten](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually), wodurch dynamische Zahlungsmethoden deaktiviert werden.

#### Zahlungsmethoden über das Dashboard verwalten

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'mxn',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

#### Zahlungsmethoden manuell auflisten

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'mxn',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    payment_method_types: ['oxxo'],
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

## Frontend einrichten [Clientseitig]

#### HTML + JS

Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es zum `head` Ihrer HTML-Datei hinzufügen. 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 es nicht selbst.

Stellen Sie sicher, dass Sie die neueste Stripe.js-Version verwenden, indem Sie das Script-Tag `einfügen.<script src=“https://js.stripe.com/dahlia/stripe.js”></script>`. Erfahren Sie mehr über die [Versionierung von Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md).

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

> Stripe stellt ein npm-Paket zur Verfügung, mit dem Sie Stripe.js als Modul laden können. Siehe das [Projekt auf GitHub](https://github.com/stripe/stripe-js). Version [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) oder höher ist erforderlich.

Stripe.js initialisieren

```js
// 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>>',
);
```

#### React

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 der öffentlichen npm-Registry. Sie benötigen mindestens Version 5.0.0 für React Stripe.js und Version 8.0.0 für den Stripe.js-Loader.

```bash
npm install --save @stripe/react-stripe-js@^5.0.0 @stripe/stripe-js@^8.0.0
```

Initialisieren Sie eine `stripe`-Instanz auf Ihrem Frontend mit Ihrem veröffentlichbaren Schlüssel.

```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
```

## Bezahlvorgang initialisieren [Clientseitig]

#### HTML + JS

Rufen Sie [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init) auf und übergeben Sie `clientSecret`.

`initCheckoutElementsSdk` gibt ein [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt zurück, das Daten aus der Checkout-Session und Methoden zur Aktualisierung enthält.

Lesen Sie `total` und `lineItems` aus [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie neue Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird.

```html
<div id="checkout-container"></div>
```

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');

  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
```

#### React

Umhüllen Sie Ihre Anwendung mit der Komponente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) und übergeben Sie dabei `clientSecret` und die `Stripe`-Instanz.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const App = () => {
  return (
    <CheckoutElementsProvider
      stripe={stripe}options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

Greifen Sie auf das [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt in Ihrer Checkout-Formularkomponente, indem Sie den `useCheckoutElements()`-Hook verwenden. Das `Checkout`-Objekt enthält Daten aus der Checkout-Sitzung und Methoden zu ihrer Aktualisierung.

Lesen Sie `total` und `lineItems` aus dem `Checkout`-Objekt und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird.

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

const CheckoutForm = () => {const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>{JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
    </form>
  );
};
```

## Kunden-E-Mail-Adresse erfassen [Clientseitig]

#### HTML + JS

Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an.

Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) aus dem Objekt `Checkout`.

Alternativ können Sie:

- Übergeben Sie die Werte [Kunde_E-Mail](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [Kunden_Konto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (für Kundinnen und Kunden, die als kundenkonfigurierte `Account`-Objekte dargestellt werden), oder [Kundin/Kunde](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (für Kundinnen und Kunden, die `Customer`-Objekte dargestellt werden), wenn Sie die Checkout-Session erstellen. Stripe validiert E-Mail-Adressen, die in dieser Weise bereitgestellt werden.
- Geben Sie eine E-Mail-Adresse ein, die Sie bereits bei [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm) validiert haben.

```html
<input type="text" id="email" />
<div id="email-errors"></div>
```

```javascript
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an.

Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) aus dem Objekt `Checkout`.

Alternativ können Sie:

- Übergeben Sie die Werte [Kunde_E-Mail](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [Kunden_Konto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (für Kundinnen und Kunden, die als kundenkonfigurierte `Account`-Objekte dargestellt werden), oder [Kundin/Kunde](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (für Kundinnen und Kunden, die `Customer`-Objekte dargestellt werden), wenn Sie die Checkout-Session erstellen. Stripe validiert E-Mail-Adressen, die in dieser Weise bereitgestellt werden.
- Geben Sie eine E-Mail-Adresse ein, die Sie bereits auf [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm) validiert haben.

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

const EmailInput = () => {
  const checkoutState = useCheckoutElements();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => {
      if (result.type === 'error') {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };

  return (
    <div>
      <label htmlFor="checkout-form-email">Email</label>
      <input
        id="checkout-form-email"
        type="email"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;
```

## 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, das die Erfassung von Zahlungsdaten für verschiedene 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

Erstellen Sie zunächst ein Container-DOM-Element, um das [Payment Element](https://docs.stripe.com/payments/payment-element.md) zu verbinden. Erstellen Sie dann eine Instanz des `Payment Element` mit [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) und verbinden Sie es durch Aufrufen von [element.mount](https://docs.stripe.com/js/element/mount), wobei Sie entweder einen CSS-Selektor oder das Container-DOM-Element angeben.

```html
<div id="payment-element"></div>
```

```javascript
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');
```

Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options).

Sie können das [Erscheinungsbild](https://docs.stripe.com/payments/checkout/customization/appearance.md) aller Elements anpassen, indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) übergeben, wenn Sie Checkout im Frontend initialisieren.

#### React

Integrieren Sie die Komponente [Payment Element](https://docs.stripe.com/payments/payment-element.md) in den [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

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

const CheckoutForm = () => {
  const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>

      {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
<PaymentElement options={{layout: 'accordion'}}/>
    </form>
  );
};

export default CheckoutForm;
```

Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options).

Sie können das [Erscheinungsbild aller Elemente anpassen](https://docs.stripe.com/payments/checkout/customization/appearance.md), indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) an den [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) übergeben.

## Zahlung übermitteln [Clientseitig]

#### HTML + JS

Zeigen Sie eine Schaltfläche **Bezahlen** an, die [confirm](https://docs.stripe.com/js/custom_checkout/confirm) von der `Checkout`-Instanz aufruft, um die Zahlung zu übermitteln.

```html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});

checkout.on('change', (session) => {
  document.getElementById('pay-button').disabled = !session.canConfirm;
});

const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Zeigen Sie eine Schaltfläche **Bezahlen** an, die zur [Bestätigung](https://docs.stripe.com/js/custom_checkout/confirm) von [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) aufruft, um die Zahlung zu übermitteln.

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

const PayButton = () => {
  const checkoutState = useCheckoutElements();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type !== "success") {
    return null;
  }

  const handleClick = () => {
    setLoading(true);checkoutState.checkout.confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## Integration testen

Um Ihre Integration zu testen, wählen Sie die Zahlungsmethode aus und tippen Sie auf **Bezahlen**. In einer *Sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) werden Sie auf eine Test-Zahlungsseite weitergeleitet, auf der Sie die Zahlung genehmigen oder ablehnen können.

Wenn Sie im Live-Modus auf **Bezahlen** tippen, werden Sie zur Website von oxxo weitergeleitet. Mit oxxo haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen.


# Payment Intents API

> This is a Payment Intents API for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/oxxo/accept-a-payment?payment-ui=elements&api-integration=paymentintents.

Informationen dazu, welche API den Anforderungen Ihres Unternehmens entspricht, finden Sie im [Vergleichsleitfaden](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Verwenden Sie das [Payment Element](https://docs.stripe.com/payments/payment-element.md), um ein nutzerdefiniertes Stripe-Zahlungsformular in Ihre Website oder Anwendung einzubetten und Kundinnen und Kunden Zahlungsmethoden anzubieten. Erweiterte Konfigurationen und Anpassungen finden Sie im Integrationsleitfaden für die [Zahlungsannahme](https://docs.stripe.com/payments/accept-a-payment.md)

## Stripe einrichten [Serverseitig]

[Erstellen Sie ein Stripe-Konto](https://dashboard.stripe.com/register), um zu beginnen.

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'
```

## Zahlungsdaten erfassen [Clientseitig]

Sie können nun mit dem Payment Element Zahlungsdetails auf dem Client erfassen. Das Payment Element ist eine vorgefertigte UI-Komponente, 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.

Die Adresse der Bezahlseite muss mit `https://` und nicht `http://` beginnen, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, es 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 Zahlungsseite 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>>');
```

### Payment Element zu Ihrer Checkout-Seite hinzufügen

Das Payment Element benötigt einen Platz auf Ihrer Checkout-Seite. 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>
```

#### Zahlungsmethoden über das Dashboard steuern

Nachdem das obige Formular geladen wurde, erstellen Sie eine Elements-Instanz mit einem Wert für `mode`, `amount` und `currency`. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen/Kunden angezeigt werden. Um eine neue Zahlungsmethode in Ihrem Fomular anzugeben, müssen Sie sie unbedingt im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren.

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'mxn',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);

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

#### Zahlungsmethoden manuell auflisten

Um die Zahlungsmethoden, die verfügbar sein sollen, manuell aufzulisten, fügen Sie jede einzelne zu den `paymentMethodTypes` hinzu.

Erstellen Sie dann eine Instanz des Payment Element und verbinden Sie sie mit dem Container DOM-Knoten.

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'mxn',
  paymentMethodTypes: ['oxxo'],
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);

// 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 Checkout-Seite 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.

#### Zahlungsmethoden über das Dashboard steuern

Der `Elements`-Anbieter akzeptiert auch Werte für `mode`, `amount` und `currency`. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen/Kunden angezeigt werden. Um eine neue Zahlungsmethode in Ihrem Formular anzugeben, müssen Sie sie unbedingt im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren.

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

function App() {
  const options = {mode:'payment',
    amount:1099,
    currency: 'mxn',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

#### Zahlungsmethoden manuell auflisten

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

function App() {
  const options = {mode:'payment',
    amount:1099,
    currency: 'mxn',
    paymentMethodTypes: ['oxxo'],
    // 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><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungs-Objekt](https://docs.stripe.com/elements/appearance-api.md) an `options` übergeben.

### Adressen einholen

Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Einige Verhaltensweisen, wie z. B. die [Berechnung der Steuer](https://docs.stripe.com/api/tax/calculations/create.md) oder die Eingabe der Versanddaten, erfordern die vollständige Adresse Ihrer Kundin/Ihres Kunden. Sie können Folgendes tun:

- Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md), um die Vorteile der Funktionen der automatischen Vervollständigung und Lokalisierung zu nutzen, um die vollständige Adresse Ihrer Kundin oder Ihres Kunden zu erfassen. Dies trägt dazu bei, eine möglichst genaue Steuerberechnung zu gewährleisten.
- Erfassen Sie Adressdaten mit Ihrem eigenen benutzerdefinierten Formular.

## Erstellen Sie ein PaymentIntent [Serverseitig]

> #### Benutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung ausführen
> 
> Navigieren Sie zu [Schritt&nbsp;5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) im Leitfaden zum Abschließen von Zahlungen, um Ihre nutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung auszuführen. Führen Sie andernfalls die folgenden Schritte für eine einfachere Integration aus, die `stripe.confirmPayment` auf dem Client verwendet, um die Zahlung zu bestätigen und alle nächsten Aktionen abzuwickeln.

#### Zahlungsmethoden über das Dashboard steuern

Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem `amount` und einer `currency`. Um zu verhindern, dass böswillige Kundinnen/Kunden ihre eigenen Preise wählen, entscheiden Sie, wie viel Sie berechnen möchten, immer auf der Serverseite (einer vertrauenswürdigen Umgebung) und nicht auf dem Client.

Zu einem `PaymentIntent` gehört 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)). Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann.

#### Accounts&nbsp;v2

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the customer's Account ID.
    customer_account: "{{CUSTOMER_ACCOUNT_ID}}",
    amount: 1099,
    currency: 'mxn',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Customers&nbsp;v1

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1099,
    currency: 'mxn',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Zahlungsmethoden manuell auflisten

Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem `amount`, einer `currency` und einer oder mehreren Zahlungsmethoden mithilfe von `payment_method_types`. Um zu verhindern, dass böswillige Kundinnen und Kunden ihre eigenen Preise wählen, sollten Sie den Preis immer auf der Serverseite (einer vertrauenswürdigen Umgebung) festlegen und nicht auf dem Client.

Zu einem PaymentIntent gehört 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)). Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann.

#### Accounts&nbsp;v2

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the customer's Account ID.
    customer_account: customer_account.id,
    amount: 1099,
    currency: 'mxn',
    payment_method_types: ['oxxo'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Customers&nbsp;v1

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1099,
    currency: 'mxn',
    payment_method_types: ['oxxo'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

## Zahlung an Stripe senden [Clientseitig]

Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit den Angaben aus dem Payment Element abzuschließen.

Geben Sie eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) für diese Funktion an, um anzugeben, wohin Stripe den/die Nutzer/in nach Abschluss der Zahlung weiterleitet. Ihre Nutzer/innen werden möglicherweise zunächst an eine Zwischenwebsite, z. B. eine Bankautorisierungsseite, weitergeleitet, bevor sie zur `return_url` weitergeleitet werden. Bei Kartenzahlungen erfolgt die Weiterleitung zur `return_url` sofort, wenn eine Zahlung erfolgreich ist.

Wenn Sie bei Kartenzahlungen nach Abschluss der Zahlung keine Weiterleitung wünschen, können Sie [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) auf `if_required` festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit auf Weiterleitung basierenden Zahlungsmethoden bezahlen.

#### HTML + JS

```javascript

const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

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

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

```

#### React

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

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);

  const handleError = (error) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

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

    if (!stripe) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setLoading(true);

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch("/create-intent", {
      method: "POST",
    });

    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Payment Element
    const {error} = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      handleError(error);
    } else {
      // Your customer is redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer is redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || loading}>
        Submit Payment
      </button>
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
}
```

## Optional: Ereignisse nach 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**

  Erstellen Sie einen [benutzerdefinierten Webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)-Handler, um auf Ereignisse zu hören und eigene asynchrone Zahlungsabläufe zu implementieren. Testen und debuggen Sie Ihre Webhook-Integration lokal mit der 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 zu testen, wählen Sie die Zahlungsmethode aus und tippen Sie auf **Bezahlen**. In einer *Sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) werden Sie auf eine Test-Zahlungsseite weitergeleitet, auf der Sie die Zahlung genehmigen oder ablehnen können.

Wenn Sie im Live-Modus auf **Bezahlen** tippen, werden Sie zur Website von oxxo weitergeleitet. Mit oxxo haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen.

## Fehlercodes

In der folgenden Tabelle finden Sie häufige Fehlercodes und die empfohlenen Maßnahmen:

| Fehlercode                                                | Empfohlene Maßnahme                                                                                                                                                                                                                                                                                                                                                                                      |
| --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_invalid_currency`                         | Geben Sie eine unterstützte Währung ein.                                                                                                                                                                                                                                                                                                                                                                 |
| `missing_required_parameter`                              | In der Fehlermeldung erhalten Sie weitere Informationen zum erforderlichen Parameter.                                                                                                                                                                                                                                                                                                                    |
| `payment_intent_payment_attempt_failed`                   | Dieser Code kann im Feld [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) eines PaymentIntent angezeigt werden. Eine genauere Fehlerursache und Vorschläge zur Fehlerbehebung finden Sie in der Fehlermeldung.                                                                                                             |
| `payment_intent_authentication_failure`                   | Dieser Code kann im Feld [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) eines PaymentIntent erscheinen. Prüfen Sie die Fehlermeldung für einen detaillierten Grund des Fehlers und Hinweise zur Fehlerbehandlung. Dieser Fehler tritt auf, wenn Sie während des Testens Ihrer Integration manuell einen Fehler auslösen. |
| `payment_intent_redirect_confirmation_without_return_url` | Geben Sie eine `return_url` an, wenn Sie einen PaymentIntent bestätigen.                                                                                                                                                                                                                                                                                                                                 |


# iOS

> This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/oxxo/accept-a-payment?payment-ui=mobile&platform=ios.

> Wir empfehlen Ihnen, den Leitfaden [Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md) zu befolgen, es sei denn, Sie müssen eine manuelle serverseitige Bestätigung verwenden oder Ihre Integration erfordert die separate Angabe von Zahlungsmethoden. Wenn Sie Elements bereits integriert haben, lesen Sie den [Migrationsleitfaden für Payment Element](https://docs.stripe.com/payments/payment-element/migration.md).

Für die Unterstützung von OXXO-Zahlungen in Ihrer App muss eine Webansicht mit dem OXXO-Gutschein angezeigt werden. Die *Kund/innen* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) nutzen den OXXO-Gutschein mit einer generierten Nummer zur Barzahlung in einem OXXO-Verbrauchermarkt. Stripe benachrichtigt Sie, wenn die Zahlung abgeschlossen ist.

## Stripe einrichten [Serverseitig] [Clientseitig]

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

### Serverseitig

Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie die offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus:

#### 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'
```

### Clientseitig

Das [Stripe iOS SDK](https://github.com/stripe/stripe-ios) ist Open Source, [vollständig dokumentiert](https://stripe.dev/stripe-ios/index.html) und kompatibel mit Apps, die iOS 13 oder höher unterstützen.

#### Swift Package Manager

Führen Sie zur Installation des SDK die folgenden Schritte aus:

1. Wählen Sie in Xcode **Datei** > **Add Package Dependencies** (Paketabhängigkeiten hinzufügen) aus und geben Sie als Repository-URL `https://github.com/stripe/stripe-ios-spm` ein.
1. Wählen auf unserer [Veröffentlichungsseite](https://github.com/stripe/stripe-ios/releases) die neueste Version aus.
1. Fügen Sie das Produkt **StripePaymentsUI** zum [Ziel Ihrer App](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) hinzu.

#### CocoaPods

1. Falls noch nicht geschehen, installieren Sie bitte die aktuellste Version von [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Wenn Sie keine bestehende [Podfile](https://guides.cocoapods.org/syntax/podfile.html) haben, führen Sie folgenden Befehl aus, um eine zu erstellen:
   ```bash
   pod init
   ```
1. Fügen Sie folgende Zeile in Ihre `Podfile` ein:
   ```podfile
   pod 'StripePaymentsUI'
   ```
1. Führen Sie folgenden Befehl aus:
   ```bash
   pod install
   ```
1. Vergessen Sie nicht, ab jetzt in Zukunft anstelle der Datei `.xcodeproj` die Datei `.xcworkspace` zum Öffnen Ihres Projekts in Xcode zu verwenden.
1. Führen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK Folgendes aus:
   ```bash
   pod update StripePaymentsUI
   ```

#### Carthage

1. Falls noch nicht geschehen, installieren Sie bitte die aktuelle Version von [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Fügen Sie folgende Zeile in Ihre `Cartfile` ein:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Befolgen Sie die [Carthage-Installationsanweisungen](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Vergewissern Sie sich, dass Sie alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks einbetten.
1. Führen Sie für zukünftige Updates auf die aktuelle Version unseres SDK einfach folgenden Befehl aus:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Manuelles Framework

1. Gehen Sie auf unsere [GitHub-Release-Seite](https://github.com/stripe/stripe-ios/releases/latest), laden Sie **Stripe.xcframework.zip** herunter und entpacken Sie die Datei.
1. Ziehen Sie **StripePaymentsUI.xcframework** in den Abschnitt **Embedded Binaries** (Eingebettete Binärdateien) der Einstellungen unter **General** (Allgemeines) Ihres Xcode-Projekts. Aktivieren Sie dabei die Option **Copy items if needed** (Elemente kopieren, falls nötig).
1. Wiederholen Sie Schritt 2 für alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks.
1. Wiederholen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK die Schritte 1–3.

> Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-ios/releases) auf GitHub. Um bei Veröffentlichung einer neuen Version eine Benachrichtigung zu erhalten, [achten Sie auf die Releases zum jeweiligen Repository](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository).

Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/test/apikeys) von Stripe, um es beim Start der App auszuführen. Dadurch kann Ihre App Anfragen an die Stripe-API senden.

#### Swift

```swift
import UIKitimportStripePaymentsUI

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<<YOUR_PUBLISHABLE_KEY>>"
        // do any other necessary launch configuration
        return true
    }
}
```

> Verwenden Sie Ihre [Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App.

## Erstellen Sie ein PaymentIntent [Serverseitig] [Clientseitig]

Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert.

### Serverseitig

Erstellen Sie ein PaymentIntent auf Ihrem Server mit einem Betrag und der Währung `mxn` (andere Währungen werden von OXXO nicht unterstützt). Wenn Sie bereits eine Integration mit der [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) haben, fügen Sie `oxxo` zur Liste der [Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) für Ihren `PaymentIntent` hinzu.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="mxn" \
  -d "payment_method_types[]"="oxxo"
```

### Zusätzliche Optionen für Zahlungsmethoden

Sie können für Ihren `PaymentIntent` den optionalen Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) nutzen, um die Gültigkeit eines OXXO-Gutscheins in Kalendertagen anzugeben. Wenn Sie beispielsweise einen OXXO-Gutschein am Montag erstellen und `expires_after_days` auf 2 setzen, läuft der OXXO-Gutschein am Mittwoch um 23:59 Uhr amerikanischer/mexikanischer Zeit (UTC-6) ab. Der Parameter `expires_after_days` kann Werte zwischen 1 und 7 aufweisen. Der Standardwert ist 3 Tage.

### Clientseitig

Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie das zugehörige Client-Geheimnis.

#### Swift

```swift
class CheckoutViewController: UIViewController {
    var paymentIntentClientSecret: String?

    func startCheckout() {
        // Request a PaymentIntent from your server and store its client secret
    }
}
```

## Angaben zur Zahlungsmethode erfassen [Clientseitig]

Erfassen Sie in Ihrer App die folgenden erforderlichen Rechnungsdetails der Kundin/des Kunden. Erstellen Sie ein [STPPaymentIntentParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentParams.html)-Objekt mit den Rechnungsdetails.

| Feld    | Wert                                                                                                                                   |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`  | Der vollständige Name (Vor- und Nachname) der Kundin/des Kunden. Der Vor- und Nachname muss jeweils mindestens zwei Zeichen lang sein. |
| `email` | Die vollständige E-Mail-Adresse des/der Kund/in.                                                                                       |

#### Swift

```swift
let billingDetails = STPPaymentMethodBillingDetails()
billingDetails.name = "Jane Doe"
billingDetails.email = "test@example.com" EOF )
```

## Zahlung an Stripe senden [Clientseitig]

Rufen Sie das Client-Geheimnis von dem in Schritt 2 erstellten PaymentIntent ab und rufen Sie [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) auf. Dies entspricht einer Webansicht, in der der OXXO-Gutschein angezeigt wird. Nach Abschluss wird der Completion-Block mit dem Ergebnis der Zahlung aufgerufen.

#### Swift

```swift
let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret)
let oxxoParams = STPPaymentMethodOXXOParams();
paymentIntentParams.paymentMethodParams = STPPaymentMethodParams(
    oxxo: oxxoParams,
    billingDetails: billingDetails,
    metadata: nil
)

STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in
    switch handlerStatus {
    case .succeeded:
        // The OXXO voucher was displayed successfully. The customer can now pay the OXXO voucher at the OXXO convenience store.
    case .canceled:
        // Payment was canceled

    case .failed:
        // Payment failed

    @unknown default:
        fatalError()
    }
}
```

### Optional: Gutschein-Link per E-Mail an Kund/innen senden

Stripe sendet ein [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action)-Ereignis, wenn ein OXXO-Gutschein erfolgreich erstellt wurde. Wenn Sie Ihren Kundinnen/Kunden den Gutschein-Link per E-Mail zusenden möchten, können Sie den [PaymentIntent abrufen](https://docs.stripe.com/api/payment_intents/retrieve.md), um den Link beim Empfang des Ereignisses zu erhalten. Das Feld `hosted_voucher_url` in [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) enthält den Link zum Gutschein.

### Optional: Gutschein anpassen

Auf der Seite mit den [Branding-Einstellungen](https://dashboard.stripe.com/account/branding) können Sie die Nutzeroberfläche für Ihre Kund/innen anpassen.

Folgende Branding-Einstellungen können auf den Gutschein angewendet werden:

- **Symbol** – Ihr Markenlogo und Ihr offizieller Firmenname
- **Akzentfarbe**: Farbe für die Schaltfläche „Nummer kopieren“
- **Markenfarbe** – Die Hintergrundfarbe

## Ereignisse nach der Zahlung verarbeiten [Serverseitig]

OXXO ist eine Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification), bei der Gelder nicht sofort verfügbar sind. *Kundinnen und Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) bezahlen den OXXO-Gutschein eventuell nicht sofort nach dem Abschluss des Bestellvorgangs in einem OXXO Convenience Store.

Für jeden bezahlten OXXO-Gutschein übermittelt Stripe am nächsten Werktag (Montag bis Freitag außer an mexikanischen Feiertagen) das Ereignis [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded). Verwenden Sie das Dashboard oder erstellen Sie einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)-Handler, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kundinnen/Kunden, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Nach Ablauf der Gültigkeit geht der Status des PaymentIntent in `processing` über und die Kundinnen und Kunden können nicht mehr mit den abgelaufenen OXXO-Gutschein bezahlen. Wenn der OXXO-Gutschein nicht vor 23:59&nbsp;Uhr America/Mexico_City (UTC-6) am Ablaufdatum bezahlt wird, sendet Stripe innerhalb von 10&nbsp;Kalendertagen nach dem Ablaufdatum ein [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed)-Ereignis (in den meisten Fällen wird es innerhalb von 7&nbsp;Kalendertagen gesendet). Wenn der OXXO-Gutschein z.&nbsp;B. am 1. September abgelaufen ist, wird das Ereignis spätestens am 10.&nbsp;September gesendet.

| Ereignis                         | Beschreibung                                                               | Nächste Schritte                                                                                                      |
| -------------------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | Der OXXO-Gutschein wurde erfolgreich erstellt.                             | Warten Sie, bis die Kundin/der Kunde den OXXO-Gutschein bezahlt hat.                                                  |
| `payment_intent.processing`      | Die Kundin/der Kunde kann den OXXO-Gutschein nicht mehr bezahlen.          | Warten Sie, bis die Zahlung erfolgt oder fehlschlägt.                                                                 |
| `payment_intent.succeeded`       | Die Kundin/der Kunde hat den OXXO-Gutschein vor Ablauf bezahlt.            | Wickeln Sie die Bestellung der Kundin/des Kunden ab.                                                                  |
| `payment_intent.payment_failed`  | Die Kundin bzw. der Kunde hat den OXXO-Gutschein nicht vor Ablauf bezahlt. | Kontaktieren Sie Ihre/n Kund/in per E-Mail oder Push-Benachrichtigung und fordern Sie eine andere Zahlungsmethode an. |

### Ereignisse empfangen und Geschäftsaktionen ausführen

#### Manuell

Im Stripe-Dashboard können Sie alle Stripe-Zahlungen anzeigen, Zahlungsbelege per E-Mail versenden, Auszahlungen abwickeln oder fehlgeschlagene Zahlungen erneut durchführen.

- [Testzahlungen im Dashboard anzeigen](https://dashboard.stripe.com/test/payments)

#### Nutzerdefinierter Code

Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und nutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben.

- [Erstellen eines benutzerdefinierten Webhooks](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Integration testen

Legen Sie in einer *Sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) [STPPaymentMethodBillingDetails email](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodBillingDetails.html#/c:@M@StripePayments@objc\(cs\)STPPaymentMethodBillingDetails\(py\)email) auf die folgenden Werte fest, wenn Sie [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) aufrufen, um verschiedene Szenarien zu testen.

| E-Mail-Adresse                                 | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simuliert einen OXXO-Gutschein, bei dem Kund/innen nach 3 Minuten bezahlen und der Webhook `payment_intent.succeeded` nach etwa 3 Minuten eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `{any_prefix}succeed_immediately@{any_domain}` | Simuliert einen OXXO-Gutschein, bei dem Kund/innen sofort bezahlen und der Webhook `payment_intent.succeeded` nach wenigen Sekunden eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `{any_prefix}expire_immediately@{any_domain}`  | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach wenigen Sekunden eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf die aktuelle Zeit festgelegt.

  Beispiel: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen zahlen, und bei dem der Webhook `payment_intent.payment_failed` nach ca. 3 Minuten eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf 3&nbsp;Minuten festgelegt.

  Beispiel: expire_with_delay@test.com          |
| `{any_prefix}fill_never@{any_domain}`          | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach 1 Werktag und 2 Kalendertagen eingeht. Im Live-Betrieb geht dieser Webhook zur gleichen Zeit ein wie im Test-Modus.

  Beispiel: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                                                 |

## Ablauf und Stornierung

OXXO-Gutscheine gelten bis zum UNIX-Zeitstempel `expires_after`, und Kundinnen und Kunden können einen OXXO-Gutschein nicht mehr bezahlen, wenn er abgelaufen ist. OXXO-Gutscheine können nicht vor Ablauf storniert werden.

Nachdem ein OXXO-Gutschein abgelaufen ist, ändert sich der Status des PaymentIntent in`requires_payment_method`. Zu diesem Zeitpunkt können Sie den PaymentIntent mit einer anderen Zahlungsmethode bestätigen oder stornieren.


# Android

> This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/oxxo/accept-a-payment?payment-ui=mobile&platform=android.

> Wir empfehlen Ihnen, den Leitfaden [Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md) zu befolgen, es sei denn, Sie müssen eine manuelle serverseitige Bestätigung verwenden oder Ihre Integration erfordert die separate Angabe von Zahlungsmethoden. Wenn Sie Elements bereits integriert haben, lesen Sie den [Migrationsleitfaden für Payment Element](https://docs.stripe.com/payments/payment-element/migration.md).

Für die Unterstützung von OXXO-Zahlungen in Ihrer App muss eine Webansicht mit dem OXXO-Gutschein angezeigt werden. Die *Kund/innen* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) nutzen den OXXO-Gutschein mit einer generierten Nummer zur Barzahlung in einem OXXO-Verbrauchermarkt. Stripe benachrichtigt Sie, wenn die Zahlung abgeschlossen ist.

## Stripe einrichten [Serverseitig] [Clientseitig]

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

### Serverseitig

Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie diese offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus:

#### 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'
```

### Clientseitig

Das [Stripe Android SDK](https://github.com/stripe/stripe-android) ist Open Source und [vollständig dokumentiert](https://stripe.dev/stripe-android/).

Um das SDK zu installieren, fügen Sie `stripe-android` in den Block `dependencies` Ihrer [app/build.gradle](https://developer.android.com/studio/build/dependencies)-Datei ein:

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Stripe Android SDK
  implementation("com.stripe:stripe-android:23.8.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.8.0")
}
```

> Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-android/releases) auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, [beobachten Sie Veröffentlichungen für das jeweilige Repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) von Stripe so, dass dieser Anfragen an die API stellen kann, wie beispielsweise in Ihrer Unterklasse `Application`:

#### Kotlin

```kotlin
import com.stripe.android.PaymentConfiguration

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        PaymentConfiguration.init(
            applicationContext,
            "<<YOUR_PUBLISHABLE_KEY>>"
        )
    }
}
```

> Verwenden Sie Ihre [Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App.

Stripe-Beispiele nutzen auch [OkHttp](https://github.com/square/okhttp) und [GSON](https://github.com/google/gson), um HTTP-Anfragen an einen Server zu stellen.

## Erstellen Sie ein PaymentIntent [Serverseitig] [Clientseitig]

Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert.

### Serverseitig

Erstellen Sie ein PaymentIntent auf Ihrem Server mit einem Betrag und der Währung `mxn` (andere Währungen werden von OXXO nicht unterstützt). Wenn Sie bereits eine Integration mit der [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) haben, fügen Sie `oxxo` zur Liste der [Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) für Ihren `PaymentIntent` hinzu.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="mxn" \
  -d "payment_method_types[]"="oxxo"
```

### Zusätzliche Optionen für Zahlungsmethoden

Sie können für Ihren `PaymentIntent` den optionalen Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) nutzen, um die Gültigkeit eines OXXO-Gutscheins in Kalendertagen anzugeben. Wenn Sie beispielsweise einen OXXO-Gutschein am Montag erstellen und `expires_after_days` auf 2 setzen, läuft der OXXO-Gutschein am Mittwoch um 23:59 Uhr amerikanischer/mexikanischer Zeit (UTC-6) ab. Der Parameter `expires_after_days` kann Werte zwischen 1 und 7 aufweisen. Der Standardwert ist 3 Tage.

### Clientseitig

Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie das zugehörige Client-Geheimnis.

#### Kotlin

```kotlin
class OXXOActivity: AppCompatActivity() {
    private lateinit var paymentIntentClientSecret: String

    private fun startCheckout() {
        // Request a PaymentIntent from your server and store its client secret
    }
}
```

## Angaben zur Zahlungsmethode erfassen [Clientseitig]

Erfassen Sie in Ihrer App die folgenden erforderlichen Rechnungsdaten von den Kund/innen. Erstellen Sie dann mit diesen Angaben ein [PaymentMethodCreateParams](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-create-params/index.html)-Modell.

| Feld    | Wert                                                                                                                                   |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`  | Der vollständige Name (Vor- und Nachname) der Kundin/des Kunden. Der Vor- und Nachname muss jeweils mindestens zwei Zeichen lang sein. |
| `email` | Die vollständige E-Mail-Adresse des/der Kund/in.                                                                                       |

#### Kotlin

```kotlin
val billingDetails =
  PaymentMethod.BillingDetails(email = "email@email.com", name = "Jenny Rosen")
val paymentMethodCreateParams = PaymentMethodCreateParams.createOxxo(billingDetails)
```

## Zahlung an Stripe senden [Clientseitig]

Rufen Sie vom in Schritt 2 erstellten PaymentIntent das Client-Geheimnis ab und rufen Sie [PaymentLauncher bestätigen](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690) auf. Dies entspricht einer Webansicht, die den OXXO-Gutschein anzeigt. Anschließend wird `onPaymentResult` mit dem Ergebnis der Zahlung aufgerufen.

#### Kotlin

```kotlin
class OXXOActivity : AppCompatActivity() {
    // ...
    private lateinit var paymentIntentClientSecret: String
    private val paymentLauncher: PaymentLauncher by lazy {
        val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext)
        PaymentLauncher.Companion.create(
            this,
            paymentConfiguration.publishableKey,
            paymentConfiguration.stripeAccountId,
            ::onPaymentResult
        )
    }

    private fun startCheckout() {
        // ...

        val confirmParams = ConfirmPaymentIntentParams
                .createWithPaymentMethodCreateParams(
                  paymentMethodCreateParams = paymentMethodCreateParams,
                  clientSecret = paymentIntentClientSecret
                )
        paymentLauncher.confirm(confirmParams)
    }

    private fun onPaymentResult(paymentResult: PaymentResult) {
        when (paymentResult) {
            is PaymentResult.Completed -> {
                // The OXXO voucher was displayed successfully.
                // The customer can now pay the OXXO voucher at the OXXO convenience store.
            }
            is PaymentResult.Canceled -> {
                // handle cancel flow
            }
            is PaymentResult.Failed -> {
                // handle failures
                // (for example, the customer may need to choose a new payment
                // method)
            }
        }
    }
}
```

### Optional: Gutschein-Link per E-Mail an Kund/innen senden

Stripe sendet ein [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action)-Ereignis, wenn ein OXXO-Gutschein erfolgreich erstellt wurde. Wenn Sie Ihren Kundinnen/Kunden den Gutschein-Link per E-Mail zusenden möchten, können Sie den [PaymentIntent abrufen](https://docs.stripe.com/api/payment_intents/retrieve.md), um den Link beim Empfang des Ereignisses zu erhalten. Das Feld `hosted_voucher_url` in [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) enthält den Link zum Gutschein.

### Optional: Gutschein anpassen

Auf der Seite mit den [Branding-Einstellungen](https://dashboard.stripe.com/account/branding) können Sie die Nutzeroberfläche für Ihre Kund/innen anpassen.

Folgende Branding-Einstellungen können auf den Gutschein angewendet werden:

- **Symbol** – Ihr Markenlogo und Ihr offizieller Firmenname
- **Akzentfarbe**: Farbe für die Schaltfläche „Nummer kopieren“
- **Markenfarbe** – Die Hintergrundfarbe

## Ereignisse nach der Zahlung verarbeiten [Serverseitig]

OXXO ist eine Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification), bei der Gelder nicht sofort verfügbar sind. *Kundinnen und Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) bezahlen den OXXO-Gutschein eventuell nicht sofort nach dem Abschluss des Bestellvorgangs in einem OXXO Convenience Store.

Für jeden bezahlten OXXO-Gutschein übermittelt Stripe am nächsten Werktag (Montag bis Freitag außer an mexikanischen Feiertagen) das Ereignis [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded). Verwenden Sie das Dashboard oder erstellen Sie einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)-Handler, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kundinnen/Kunden, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Nach Ablauf der Gültigkeit geht der Status des PaymentIntent in `processing` über und die Kundinnen und Kunden können nicht mehr mit den abgelaufenen OXXO-Gutschein bezahlen. Wenn der OXXO-Gutschein nicht vor 23:59&nbsp;Uhr America/Mexico_City (UTC-6) am Ablaufdatum bezahlt wird, sendet Stripe innerhalb von 10&nbsp;Kalendertagen nach dem Ablaufdatum ein [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed)-Ereignis (in den meisten Fällen wird es innerhalb von 7&nbsp;Kalendertagen gesendet). Wenn der OXXO-Gutschein z.&nbsp;B. am 1. September abgelaufen ist, wird das Ereignis spätestens am 10.&nbsp;September gesendet.

| Ereignis                         | Beschreibung                                                               | Nächste Schritte                                                                                                      |
| -------------------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | Der OXXO-Gutschein wurde erfolgreich erstellt.                             | Warten Sie, bis die Kundin/der Kunde den OXXO-Gutschein bezahlt hat.                                                  |
| `payment_intent.processing`      | Die Kundin/der Kunde kann den OXXO-Gutschein nicht mehr bezahlen.          | Warten Sie, bis die Zahlung erfolgt oder fehlschlägt.                                                                 |
| `payment_intent.succeeded`       | Die Kundin/der Kunde hat den OXXO-Gutschein vor Ablauf bezahlt.            | Wickeln Sie die Bestellung der Kundin/des Kunden ab.                                                                  |
| `payment_intent.payment_failed`  | Die Kundin bzw. der Kunde hat den OXXO-Gutschein nicht vor Ablauf bezahlt. | Kontaktieren Sie Ihre/n Kund/in per E-Mail oder Push-Benachrichtigung und fordern Sie eine andere Zahlungsmethode an. |

### Ereignisse empfangen und Geschäftsaktionen ausführen

#### Manuell

Im Stripe-Dashboard können Sie alle Stripe-Zahlungen anzeigen, Zahlungsbelege per E-Mail versenden, Auszahlungen abwickeln oder fehlgeschlagene Zahlungen erneut durchführen.

- [Testzahlungen im Dashboard anzeigen](https://dashboard.stripe.com/test/payments)

#### Nutzerdefinierter Code

Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und nutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben.

- [Erstellen eines benutzerdefinierten Webhooks](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Integration testen

Legen Sie in einer Sandbox [PaymentMethod.BillingDetails#email](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method/-billing-details/index.html) auf die folgenden Werte fest, wenn Sie [Stripe\# confirmPayment()](https://stripe.dev/stripe-android/payments-core/com.stripe.android/-stripe/confirm-payment.html) aufrufen, um verschiedene Szenarien zu testen.

| E-Mail-Adresse                                 | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simuliert einen OXXO-Gutschein, bei dem Kund/innen nach 3 Minuten bezahlen und der Webhook `payment_intent.succeeded` nach etwa 3 Minuten eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `{any_prefix}succeed_immediately@{any_domain}` | Simuliert einen OXXO-Gutschein, bei dem Kund/innen sofort bezahlen und der Webhook `payment_intent.succeeded` nach wenigen Sekunden eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `{any_prefix}expire_immediately@{any_domain}`  | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach wenigen Sekunden eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf die aktuelle Zeit festgelegt.

  Beispiel: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen zahlen, und bei dem der Webhook `payment_intent.payment_failed` nach ca. 3 Minuten eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf 3&nbsp;Minuten festgelegt.

  Beispiel: expire_with_delay@test.com          |
| `{any_prefix}fill_never@{any_domain}`          | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach 1 Werktag und 2 Kalendertagen eingeht. Im Live-Betrieb geht dieser Webhook zur gleichen Zeit ein wie im Test-Modus.

  Beispiel: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                                                 |

## Ablauf und Stornierung

OXXO-Gutscheine gelten bis zum UNIX-Zeitstempel `expires_after`, und Kundinnen und Kunden können einen OXXO-Gutschein nicht mehr bezahlen, wenn er abgelaufen ist. OXXO-Gutscheine können nicht vor Ablauf storniert werden.

Nachdem ein OXXO-Gutschein abgelaufen ist, ändert sich der Status des PaymentIntent in`requires_payment_method`. Zu diesem Zeitpunkt können Sie den PaymentIntent mit einer anderen Zahlungsmethode bestätigen oder stornieren.


# React Native

> This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/oxxo/accept-a-payment?payment-ui=mobile&platform=react-native.

> Wir empfehlen Ihnen, den Leitfaden [Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md) zu befolgen, es sei denn, Sie müssen eine manuelle serverseitige Bestätigung verwenden oder Ihre Integration erfordert die separate Angabe von Zahlungsmethoden. Wenn Sie Elements bereits integriert haben, lesen Sie den [Migrationsleitfaden für Payment Element](https://docs.stripe.com/payments/payment-element/migration.md).

Für die Unterstützung von OXXO-Zahlungen in Ihrer App muss eine Webansicht mit dem OXXO-Gutschein angezeigt werden. Die *Kund/innen* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) nutzen den OXXO-Gutschein mit einer generierten Nummer zur Barzahlung in einem OXXO-Verbrauchermarkt. Stripe benachrichtigt Sie, wenn die Zahlung abgeschlossen ist.

## Stripe einrichten [Serverseitig] [Clientseitig]

### Serverseitig

Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus:

#### 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'
```

### Clientseitig

Das [React Native SDK](https://github.com/stripe/stripe-react-native) ist Open Source und vollständig dokumentiert. Intern werden [native iOS](https://github.com/stripe/stripe-ios) und [Android](https://github.com/stripe/stripe-android) SDKs verwendet. Um das React Native SDK von Stripe zu installieren, führen Sie einen der folgenden Befehle im Verzeichnis Ihres Projekts aus (je nachdem, welchen Paket-Manager Sie verwenden):

#### yarn

```bash
yarn add @stripe/stripe-react-native
```

#### npm

```bash
npm install @stripe/stripe-react-native
```

Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten:

- Für iOS wechseln Sie in das Verzeichnis **ios** und führen Sie `pod install` aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Dependencies installiert haben.
- Für Android müssen keine Abhängigkeiten mehr installiert werden.

> Wir empfehlen Ihnen, die [offizielle Anleitung zu TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) zu befolgen, um TypeScript zu unterstützen.

### Stripe Initialisierung

Um Stripe in Ihrer React Native-App zu initialisieren, umschließen Sie entweder Ihren Zahlungsbildschirm mit der Komponente `StripeProvider` oder verwenden Sie die Initialisierungsmethode `initStripe`. Nur der [veröffentlichbare API-Schlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) in `publishableKey` ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente `StripeProvider` initialisiert wird.

```jsx
import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

> Verwenden Sie Ihre API-[Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App.

## Erstellen Sie ein PaymentIntent [Serverseitig] [Clientseitig]

Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert.

### Serverseitig

Erstellen Sie ein PaymentIntent auf Ihrem Server mit einem Betrag und der Währung `mxn` (andere Währungen werden von OXXO nicht unterstützt). Wenn Sie bereits eine Integration mit der [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) haben, fügen Sie `oxxo` zur Liste der [Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) für Ihren `PaymentIntent` hinzu.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="mxn" \
  -d "payment_method_types[]"="oxxo"
```

### Zusätzliche Optionen für Zahlungsmethoden

Sie können für Ihren `PaymentIntent` den optionalen Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) nutzen, um die Gültigkeit eines OXXO-Gutscheins in Kalendertagen anzugeben. Wenn Sie beispielsweise einen OXXO-Gutschein am Montag erstellen und `expires_after_days` auf 2 setzen, läuft der OXXO-Gutschein am Mittwoch um 23:59 Uhr amerikanischer/mexikanischer Zeit (UTC-6) ab. Der Parameter `expires_after_days` kann Werte zwischen 1 und 7 aufweisen. Der Standardwert ist 3 Tage.

### Clientseitig

Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein *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)).

```javascript
const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email,
      currency: 'mxn',
      payment_method_types: ['oxxo'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};
```

## Angaben zur Zahlungsmethode erfassen [Clientseitig]

Erfassen Sie in Ihrer App den vollständigen Namen und die E-Mail-Adresse Ihrer Kund/innen.

```javascript
export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}
```

## Zahlung an Stripe senden [Clientseitig]

Rufen Sie das Client-Geheimnis aus dem von Ihnen erstellten PaymentIntent ab und rufen Sie `confirmPayment` auf. Nun wird eine Webansicht präsentiert, in der der OXXO-Gutschein angezeigt wird.

```javascript
export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name,
      email,
    };

    const { error, paymentIntent } = await confirmPayment(clientSecret, {
      paymentMethodType: 'Oxxo',
      paymentMethodData: {
        billingDetails,
      }
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Payment confirmation error', error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.RequiresAction) {
        Alert.alert(
          'Success',
          `The OXXO voucher was created successfully. Awaiting payment from customer.`
        );
      } else {
        Alert.alert('Payment intent status:', paymentIntent.status);
      }
    }
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}
```

### Optional: Gutschein-Link per E-Mail an Kund/innen senden

Stripe sendet ein [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action)-Ereignis, wenn ein OXXO-Gutschein erfolgreich erstellt wurde. Wenn Sie Ihren Kundinnen/Kunden den Gutschein-Link per E-Mail zusenden möchten, können Sie den [PaymentIntent abrufen](https://docs.stripe.com/api/payment_intents/retrieve.md), um den Link beim Empfang des Ereignisses zu erhalten. Das Feld `hosted_voucher_url` in [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) enthält den Link zum Gutschein.

### Optional: Gutschein anpassen

Auf der Seite mit den [Branding-Einstellungen](https://dashboard.stripe.com/account/branding) können Sie die Nutzeroberfläche für Ihre Kund/innen anpassen.

Folgende Branding-Einstellungen können auf den Gutschein angewendet werden:

- **Symbol** – Ihr Markenlogo und Ihr offizieller Firmenname
- **Akzentfarbe**: Farbe für die Schaltfläche „Nummer kopieren“
- **Markenfarbe** – Die Hintergrundfarbe

## Ereignisse nach der Zahlung verarbeiten [Serverseitig]

OXXO ist eine Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification), bei der Gelder nicht sofort verfügbar sind. *Kundinnen und Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) bezahlen den OXXO-Gutschein eventuell nicht sofort nach dem Abschluss des Bestellvorgangs in einem OXXO Convenience Store.

Für jeden bezahlten OXXO-Gutschein übermittelt Stripe am nächsten Werktag (Montag bis Freitag außer an mexikanischen Feiertagen) das Ereignis [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded). Verwenden Sie das Dashboard oder erstellen Sie einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)-Handler, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kundinnen/Kunden, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Nach Ablauf der Gültigkeit geht der Status des PaymentIntent in `processing` über und die Kundinnen und Kunden können nicht mehr mit den abgelaufenen OXXO-Gutschein bezahlen. Wenn der OXXO-Gutschein nicht vor 23:59&nbsp;Uhr America/Mexico_City (UTC-6) am Ablaufdatum bezahlt wird, sendet Stripe innerhalb von 10&nbsp;Kalendertagen nach dem Ablaufdatum ein [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed)-Ereignis (in den meisten Fällen wird es innerhalb von 7&nbsp;Kalendertagen gesendet). Wenn der OXXO-Gutschein z.&nbsp;B. am 1. September abgelaufen ist, wird das Ereignis spätestens am 10.&nbsp;September gesendet.

| Ereignis                         | Beschreibung                                                               | Nächste Schritte                                                                                                      |
| -------------------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | Der OXXO-Gutschein wurde erfolgreich erstellt.                             | Warten Sie, bis die Kundin/der Kunde den OXXO-Gutschein bezahlt hat.                                                  |
| `payment_intent.processing`      | Die Kundin/der Kunde kann den OXXO-Gutschein nicht mehr bezahlen.          | Warten Sie, bis die Zahlung erfolgt oder fehlschlägt.                                                                 |
| `payment_intent.succeeded`       | Die Kundin/der Kunde hat den OXXO-Gutschein vor Ablauf bezahlt.            | Wickeln Sie die Bestellung der Kundin/des Kunden ab.                                                                  |
| `payment_intent.payment_failed`  | Die Kundin bzw. der Kunde hat den OXXO-Gutschein nicht vor Ablauf bezahlt. | Kontaktieren Sie Ihre/n Kund/in per E-Mail oder Push-Benachrichtigung und fordern Sie eine andere Zahlungsmethode an. |

### Ereignisse empfangen und Geschäftsaktionen ausführen

#### Manuell

Im Stripe-Dashboard können Sie alle Stripe-Zahlungen anzeigen, Zahlungsbelege per E-Mail versenden, Auszahlungen abwickeln oder fehlgeschlagene Zahlungen erneut durchführen.

- [Testzahlungen im Dashboard anzeigen](https://dashboard.stripe.com/test/payments)

#### Nutzerdefinierter Code

Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und nutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben.

- [Erstellen eines benutzerdefinierten Webhooks](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Integration testen

Verwenden Sie in einer Sandbox die folgenden E-Mail-Adressen, wenn Sie `confirmPayment` aufrufen, um verschiedene Szenarien zu testen.

| E-Mail-Adresse                                 | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simuliert einen OXXO-Gutschein, bei dem Kund/innen nach 3 Minuten bezahlen und der Webhook `payment_intent.succeeded` nach etwa 3 Minuten eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `{any_prefix}succeed_immediately@{any_domain}` | Simuliert einen OXXO-Gutschein, bei dem Kund/innen sofort bezahlen und der Webhook `payment_intent.succeeded` nach wenigen Sekunden eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `{any_prefix}expire_immediately@{any_domain}`  | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach wenigen Sekunden eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf die aktuelle Zeit festgelegt.

  Beispiel: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen zahlen, und bei dem der Webhook `payment_intent.payment_failed` nach ca. 3 Minuten eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf 3&nbsp;Minuten festgelegt.

  Beispiel: expire_with_delay@test.com          |
| `{any_prefix}fill_never@{any_domain}`          | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach 1 Werktag und 2 Kalendertagen eingeht. Im Live-Betrieb geht dieser Webhook zur gleichen Zeit ein wie im Test-Modus.

  Beispiel: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                                                 |

## Ablauf und Stornierung

OXXO-Gutscheine gelten bis zum UNIX-Zeitstempel `expires_after`, und Kundinnen und Kunden können einen OXXO-Gutschein nicht mehr bezahlen, wenn er abgelaufen ist. OXXO-Gutscheine können nicht vor Ablauf storniert werden.

Nachdem ein OXXO-Gutschein abgelaufen ist, ändert sich der Status des PaymentIntent in`requires_payment_method`. Zu diesem Zeitpunkt können Sie den PaymentIntent mit einer anderen Zahlungsmethode bestätigen oder stornieren.


# Direkt-API

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

> Der Inhalt dieses Abschnitts bezieht sich auf ein *Legacy* (Technology that's no longer recommended)-Produkt. Verwenden Sie den Leitfaden [Zahlungen akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md) für den aktuellsten Integrationspfad. Auch wenn Stripe dieses Produkt jetzt noch unterstützt, kann sich dies ändern, wenn das Produkt nicht mehr unterstützt wird.

Stripe-Nutzer/innen in Mexiko können OXXO-Zahlungen von Kund/innen in Mexiko mithilfe der Payment Intents API und Payment Methods API annehmen. Die*Kund/innen* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) nutzen einen OXXO-Gutschein mit einer generierten Nummer zur Barzahlung in einem OXXO Convenience Store. Stripe benachrichtigt Sie, wenn die Zahlung abgeschlossen ist.

## Stripe einrichten [Serverseitig]

Als Erstes benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/test/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'
```

## Erstellen Sie ein PaymentIntent [Serverseitig]

Stripe verwendet ein [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)-Objekt, um Ihre Absicht darzustellen, Zahlungen von Kundinnen/Kunden einzuziehen und Statusänderungen von der Erstellung des OXXO-Gutscheins bis zum Zahlungsabschluss zu verfolgen.

Erstellen Sie ein PaymentIntent auf Ihrem Server mit einem Betrag und der Währung `mxn` (andere Währungen werden von OXXO nicht unterstützt). Wenn Sie bereits eine Integration mit der [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) haben, fügen Sie `oxxo` zur Liste der [Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) für Ihren `PaymentIntent` hinzu.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="mxn" \
  -d "payment_method_types[]"="oxxo"
```

### 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
```

### Zusätzliche Optionen für Zahlungsmethoden

Sie können für Ihren `PaymentIntent` den optionalen Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) nutzen, um die Gültigkeit eines OXXO-Gutscheins in Kalendertagen anzugeben. Wenn Sie beispielsweise einen OXXO-Gutschein am Montag erstellen und `expires_after_days` auf 2 setzen, läuft der OXXO-Gutschein am Mittwoch um 23:59 Uhr amerikanischer/mexikanischer Zeit (UTC-6) ab. Der Parameter `expires_after_days` kann Werte zwischen 1 und 7 aufweisen. Der Standardwert ist 3 Tage.

## Angaben zur Zahlungsmethode erfassen [Clientseitig]

Erstellen Sie ein Zahlungsformular auf Ihrem Client, um die erforderlichen Rechnungsdaten von den Kund/innen zu erfassen:

| Feld    | Wert                                                                                                                                   |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`  | Der vollständige Name (Vor- und Nachname) der Kundin/des Kunden. Der Vor- und Nachname muss jeweils mindestens zwei Zeichen lang sein. |
| `email` | Die vollständige E-Mail-Adresse des/der Kund/in.                                                                                       |

```html
<form id="payment-form">
  <div class="form-row">
    <label for="name">
      Name
    </label>
    <input id="name" name="name" required>
  </div>

  <div class="form-row">
    <label for="email">
      Email
    </label>
    <input id="email" name="email" required>
  </div>

  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>

  <button id="submit-button">Pay with OXXO</button>
</form>
```

## Zahlung an Stripe senden [Clientseitig]

Verwenden Sie Stripe.js zur Übermittlung von Zahlungen an Stripe, wenn Kundinnen/Kunden mit OXXO bezahlen möchten. [Stripe.js](https://docs.stripe.com/payments/elements.md) ist unsere grundlegende JavaScript-Bibliothek für die Erstellung von Zahlungsabläufen.

Binden Sie das Stripe.js-Skript in Ihre Bezahlseite ein, indem Sie es im `head` Ihrer HTML-Datei einfügen.

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

Erstellen Sie einen Instanz von Stripe.js mit dem folgenden JavaScript auf Ihrer Bezahlseite.

```javascript
// Set your publishable key. Remember to switch to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
```

Verwenden Sie [stripe.confirmOxxoPayment](https://docs.stripe.com/js/payment_intents/confirm_oxxo_payment) und das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts, das Sie in Schritt&nbsp;2 erstellt haben, um die Rechnungsdaten der Kundin/des Kunden zu übermitteln.

Nach der Bestätigung öffnet Stripe automatisch ein Modal, um den OXXO-Gutschein für Ihre Kundin/Ihren Kunden anzuzeigen.

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const result = await stripe.confirmOxxoPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        billing_details: {
          name: document.getElementById('name').value,
          email: document.getElementById('email').value,
        },
      },
    });
  // Stripe.js will open a modal to display the OXXO voucher to your customer
  // This async function finishes when the customer closes the modal

  if (result.error) {
    // Display error to your customer
    const errorMsg = document.getElementById('error-message');
    errorMsg.innerText = result.error.message;
  }
});
```

> Die Ausführung von `stripe.confirmOxxoPayment` kann einige Sekunden dauern. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Lassen Sie stattdessen ein Wartesymbol einblenden, wie beispielsweise eine Sanduhr. Tritt ein Fehler auf, lassen Sie eine Fehlermeldung für die Kundin/den Kunden anzeigen, aktivieren Sie das Formular erneut und blenden Sie das Wartesymbol aus.

Wenn die Erstellung eines OXXO-Gutscheins erfolgreich war, lautet der Wert der zurückgegebenen `status`-Eigenschaft des PaymentIntent `requires_action`. Sie können den Status eines PaymentIntent im [Dashboard](https://dashboard.stripe.com/test/payments) oder in der Statuseigenschaft des Objekts einsehen. War die Erstellung des OXXO-Gutscheins nicht erfolgreich, prüfen Sie den zurückgegebenen `error`, um den Grund zu erfahren (z.&nbsp;B. ein ungültiges E-Mail-Format).

### Optional: Gutschein-Link per E-Mail an Kund/innen senden

Stripe sendet ein [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action)-Ereignis, wenn ein OXXO-Gutschein erfolgreich erstellt wurde. Wenn Sie Ihren Kundinnen/Kunden den Gutschein-Link per E-Mail zusenden möchten, können Sie den [PaymentIntent abrufen](https://docs.stripe.com/api/payment_intents/retrieve.md), um den Link beim Empfang des Ereignisses zu erhalten. Das Feld `hosted_voucher_url` in [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) enthält den Link zum Gutschein.

### Optional: Gutschein anpassen

Auf der Seite mit den [Branding-Einstellungen](https://dashboard.stripe.com/account/branding) können Sie die Nutzeroberfläche für Ihre Kund/innen anpassen.

Folgende Branding-Einstellungen können auf den Gutschein angewendet werden:

- **Symbol** – Ihr Markenlogo und Ihr offizieller Firmenname
- **Akzentfarbe**: Farbe für die Schaltfläche „Nummer kopieren“
- **Markenfarbe** – Die Hintergrundfarbe

## Ereignisse nach der Zahlung verarbeiten [Serverseitig]

OXXO ist eine Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification), bei der Gelder nicht sofort verfügbar sind. *Kundinnen und Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) bezahlen den OXXO-Gutschein eventuell nicht sofort nach dem Abschluss des Bestellvorgangs in einem OXXO Convenience Store.

Für jeden bezahlten OXXO-Gutschein übermittelt Stripe am nächsten Werktag (Montag bis Freitag außer an mexikanischen Feiertagen) das Ereignis [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded). Verwenden Sie das Dashboard oder erstellen Sie einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)-Handler, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kundinnen/Kunden, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Nach Ablauf der Gültigkeit geht der Status des PaymentIntent in `processing` über und die Kundinnen und Kunden können nicht mehr mit den abgelaufenen OXXO-Gutschein bezahlen. Wenn der OXXO-Gutschein nicht vor 23:59&nbsp;Uhr America/Mexico_City (UTC-6) am Ablaufdatum bezahlt wird, sendet Stripe innerhalb von 10&nbsp;Kalendertagen nach dem Ablaufdatum ein [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed)-Ereignis (in den meisten Fällen wird es innerhalb von 7&nbsp;Kalendertagen gesendet). Wenn der OXXO-Gutschein z.&nbsp;B. am 1. September abgelaufen ist, wird das Ereignis spätestens am 10.&nbsp;September gesendet.

| Ereignis                         | Beschreibung                                                               | Nächste Schritte                                                                                                      |
| -------------------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | Der OXXO-Gutschein wurde erfolgreich erstellt.                             | Warten Sie, bis die Kundin/der Kunde den OXXO-Gutschein bezahlt hat.                                                  |
| `payment_intent.processing`      | Die Kundin/der Kunde kann den OXXO-Gutschein nicht mehr bezahlen.          | Warten Sie, bis die Zahlung erfolgt oder fehlschlägt.                                                                 |
| `payment_intent.succeeded`       | Die Kundin/der Kunde hat den OXXO-Gutschein vor Ablauf bezahlt.            | Wickeln Sie die Bestellung der Kundin/des Kunden ab.                                                                  |
| `payment_intent.payment_failed`  | Die Kundin bzw. der Kunde hat den OXXO-Gutschein nicht vor Ablauf bezahlt. | Kontaktieren Sie Ihre/n Kund/in per E-Mail oder Push-Benachrichtigung und fordern Sie eine andere Zahlungsmethode an. |

### Ereignisse empfangen und Geschäftsaktionen ausführen

#### Manuell

Im Stripe-Dashboard können Sie alle Stripe-Zahlungen anzeigen, Zahlungsbelege per E-Mail versenden, Auszahlungen abwickeln oder fehlgeschlagene Zahlungen erneut durchführen.

- [Testzahlungen im Dashboard anzeigen](https://dashboard.stripe.com/test/payments)

#### Nutzerdefinierter Code

Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und nutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben.

- [Erstellen eines benutzerdefinierten Webhooks](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Integration testen

Legen Sie in einer Sandbox `payment_method.billing_details.email` auf die folgenden Werte fest, wenn Sie [stripe.confirmOxxoPayment](https://docs.stripe.com/js/payment_intents/confirm_oxxo_payment) aufrufen, um verschiedene Szenarien zu testen.

| E-Mail-Adresse                                 | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simuliert einen OXXO-Gutschein, bei dem Kund/innen nach 3 Minuten bezahlen und der Webhook `payment_intent.succeeded` nach etwa 3 Minuten eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `{any_prefix}succeed_immediately@{any_domain}` | Simuliert einen OXXO-Gutschein, bei dem Kund/innen sofort bezahlen und der Webhook `payment_intent.succeeded` nach wenigen Sekunden eingeht. Im Live-Betrieb geht dieser Webhook nach 1 Werktag ein.

  Beispiel: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `{any_prefix}expire_immediately@{any_domain}`  | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach wenigen Sekunden eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf die aktuelle Zeit festgelegt.

  Beispiel: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen zahlen, und bei dem der Webhook `payment_intent.payment_failed` nach ca. 3 Minuten eingeht.

  Das Feld `expires_after` in [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) wird unabhängig davon, auf was der Parameter `expires_after_days` in den [Optionen für Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) gesetzt ist, auf 3&nbsp;Minuten festgelegt.

  Beispiel: expire_with_delay@test.com          |
| `{any_prefix}fill_never@{any_domain}`          | Simuliert einen OXXO-Gutschein, der abläuft, bevor Kund/innen bezahlen, und bei dem der Webhook `payment_intent.payment_failed` nach 1 Werktag und 2 Kalendertagen eingeht. Im Live-Betrieb geht dieser Webhook zur gleichen Zeit ein wie im Test-Modus.

  Beispiel: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                                                 |

## Optional: OXXO-Details für die Kund/innen anzeigen [Clientseitig]

Wir empfehlen, den OXXO-Gutschein mithilfe von Stripe.js und `confirmOxxoPayment` darstellen zu lassen. Sie können Kund/innen den Gutschein aber auch manuell anzeigen.

Sie können `handleActions: false` beim Aufruf von `stripe.confirmOxxoPayment` in Schritt&nbsp;4 festlegen. Dadurch geben Sie an, dass Sie die nächste Aktion vornehmen werden, um OXXO-Details für Ihre Kundinnen und Kunden anzuzeigen.

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const result = await stripe.confirmOxxoPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        billing_details: {
          name: document.getElementById('name').value,
          email: document.getElementById('email').value,
        },
      },
    }, {handleActions: false},
  );

  if (result.error) {
    // Display error to your customer
    const errorMsg = document.getElementById('error-message');
    errorMsg.innerText = result.error.message;
  } else {
    // An OXXO voucher was successfully created
    const amount = result.paymentIntent.amount;
    const currency = result.paymentIntent.currency;

    const details = result.paymentIntent.next_action.oxxo_display_details;
    const number = details.number;
    const expires_after = details.expires_after;

    // Handle the next action by displaying the OXXO details to your customer

    // You can also use the generated hosted voucher
    const hosted_voucher_url = result.paymentIntent.next_action.oxxo_display_details.hosted_voucher_url;
  }
});
```

Geben Sie mindestens Folgendes an:

| Details             | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| OXXO-Logo           | [Laden Sie das OXXO-Logo herunter](https://stripe.com/img/docs/payments/oxxo.png) und zeigen Sie es auf dem Gutschein an.
oxxo                                                                                                                                                                                                                                                                                            |
| Nummer              | Suchen Sie die Nummer im `PaymentIntent`-Objekt unter [next_action.oxxo_display_details.number](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-number).                                                                                                                                                                                                     |
| Ablaufdatum         | Suchen Sie den UNIX-Zeitstempel, zu dem der OXXO-Gutschein abläuft, im `PaymentIntent` unter [next_action.oxxo_display_details.expires_after](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after).                                                                                                                                                |
| Betrag              | Der einzuziehende Betrag.                                                                                                                                                                                                                                                                                                                                                                                                 |
| Währung             | OXXO-Gutscheine sind immer in mexikanischen Pesos ausgestellt.                                                                                                                                                                                                                                                                                                                                                            |
| Barcode             | Erzeugen Sie mit [Code 128](https://en.wikipedia.org/wiki/Code_128) aus der Nummer einen Barcode. Der Barcode sollte gedruckt ca. 7,5 cm breit sein. Stellen Sie bei mobilen Displays sicher, dass der Barcode vergrößert werden kann. Dies erleichtert den Mitarbeiter/innen des OXXO Convenience Store das Einlesen. Sie können eine externe Bibliothek wie z. B. [JSBarcode](https://lindell.me/JsBarcode/) verwenden. |
| Zahlungsanweisungen | Die Zahlungsanweisungen für Kundinnen/Kunden. Die englischen und spanischen Versionen finden Sie unten.                                                                                                                                                                                                                                                                                                                   |

### OXXO-Zahlungsanweisungen

#### Englisch

OXXO-Zahlungsanweisungen:

1. Zeigen Sie den Gutschein an der Kasse vor, damit der Barcode gescannt werden kann.
1. Bezahlen Sie in bar an der Kasse.
1. Bewahren Sie nach Abschluss der Zahlung den Zahlungsbeleg für Ihre Unterlagen auf.
1. Bei Fragen oder Unklarheiten wenden Sie sich bitte an das Unternehmen.

#### HTML

```html
<!-- Include a library for generating OXXO bar codes, such as JsBarcode -->
<!-- <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/barcodes/JsBarcode.code128.min.js"></script> -->

<div class="result-oxxo">
  <img width="100px" src="/images/payments/oxxo.png">
  <div class="amount">MX <span class="order-amount"></span></div>
  <div>Expires <span class="oxxo-expiry-date"></span></div>
  <div class="oxxo-display"></div>

  <button onclick="window.print()">Print</button>

  <div class="instructions">
    Instructions to pay your OXXO:
    <ol>
      <li><p>Give the voucher to the cashier to scan the barcode.</p></li>
      <li><p>Provide cash payment to the cashier.</p></li>
      <li><p>After the payment is complete, keep the receipt of your payment for your records.</p></li>
      <li><p>For any questions or clarification, please contact the merchant.</p></li>
    </ol>
  </div>
</div>
```

#### Spanisch

Instrucciones de pago en OXXO:

1. Entregue el código al cajero en cualquier OXXO para que lo escanee.
1. Proporcione el pago en efectivo al cajero.
1. Una vez completado el pago, guarde el recibo de su pago para sus archivos.
1. Para cualquier duda o aclaración, por favor contacte al comerciante.

#### HTML

```html
<!-- Include a library for generating OXXO bar codes, such as JsBarcode -->
<!-- <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/barcodes/JsBarcode.code128.min.js"></script> -->

<div class="result-oxxo section-to-print">
  <img width="100px" src="/images/payments/oxxo.png">
  <div class="amount">MX <span class="order-amount"></span></div>
  <div>Expira el <span class="oxxo-expiry-date"></span></div>
  <div class="oxxo-display"></div>

  <button onclick="window.print()">Imprimir</button>

  <div class="instructions">
    Instrucciones de pago en OXXO:
    <ol>
      <li><p>Entregue el código al cajero en cualquier OXXO para que lo escanee.</p></li>
      <li><p>Proporcione el pago en efectivo al cajero.</p></li>
      <li><p>Una vez completado el pago, guarde el recibo de su pago para sus archivos.</p></li>
      <li><p>Para cualquier duda o aclaración, por favor contacte al comerciante.</p></li>
    </ol>
  </div>
</div>
```

In der Regel drucken *Kund/innen* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) den OXXO-Gutschein aus, um ihn bei einem OXXO Convenience Store vorzulegen. Sie können eine einfache Drucken-Schaltfläche bereitstellen und/oder den OXXO-Gutschein per E-Mail an die Kundinnen/Kunden senden. Drucken Sie den OXXO-Gutschein selbst aus, um die Größe des Barcodes zu prüfen (er sollte etwa 7,5 cm breit sein).

## Optional: Zahlungsanweisungen per E-Mail senden

Sie können E-Mails mit OXXO-Zahlungsanweisungen auf der Seite [E-Mail-Einstellungen](https://dashboard.stripe.com/settings/emails) im Dashboard aktivieren. Nach der Aktivierung sendet Stripe E-Mails mit Zahlungsanweisungen, nachdem der PaymentIntent bestätigt wurde. Die E-Mails enthalten die OXXO-Nummer und einen Link zu der von Stripe gehosteten Gutscheinseite.

> In Testumgebungen werden E-Mails mit Anweisungen nur an E-Mail-Adressen gesendet, die mit dem Stripe-Konto verknüpft sind.

## Ablauf und Stornierung

OXXO-Gutscheine gelten bis zum UNIX-Zeitstempel `expires_after`, und Kundinnen und Kunden können einen OXXO-Gutschein nicht mehr bezahlen, wenn er abgelaufen ist. OXXO-Gutscheine können nicht vor Ablauf storniert werden.

Nachdem ein OXXO-Gutschein abgelaufen ist, ändert sich der Status des PaymentIntent in`requires_payment_method`. Zu diesem Zeitpunkt können Sie den PaymentIntent mit einer anderen Zahlungsmethode bestätigen oder stornieren.