# Karte in Issuing

Zeigt eine individuell ausgestellte Karte an.

„Issuing-Karte“ zeigt die Details einer einzelnen [Karte](https://docs.stripe.com/api/issuing/cards.md) an, die an Ihre verbundenen Konten ausgestellt wurde.

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

Die Berechtigungsgrenze für diese Komponente liegt auf der Ebene des verbundenen Kontos, nicht auf der individuellen card Ebene. Diese Nutzeroberfläche sollte Nutzern/Nutzerinnen angezeigt werden, die Zugriff auf alle cards haben, nicht Nutzern/Nutzerinnen, die eigenschränkten Zugriff auf ein einzelnes card haben.

Aktivieren Sie beim [Erstellen einer Kontositzung](https://docs.stripe.com/api/account_sessions/create.md) die Komponente „Karte in Issuing“, indem Sie `issuing_card` im Parameter `components` angeben.

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[issuing_card][enabled]=true" \
  -d "components[issuing_card][features][card_management]=true" \
  -d "components[issuing_card][features][cardholder_management]=true" \
  -d "components[issuing_card][features][card_spend_dispute_management]=true" \
  -d "components[issuing_card][features][spend_control_management]=true"
```

Nachdem die Kontositzung erstellt und [ConnectJS initiiert wurde](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), können Sie die Komponente „Karte in Issuing“ im Frontend anzeigen:

#### JavaScript

```js
// Include this element in your HTML
const issuingCard = stripeConnectInstance.create('issuing-card');
issuingCard.setDefaultCard('{{ISSUING_CARD_ID_ID}}');
issuingCard.setShowSpendControls(true);
container.appendChild(issuingCard);
```

Diese eingebettete Komponente unterstützt die folgenden Attribute:

#### HTML + JS

| Setter                 | Typ                  | Beschreibung                                                                                                                                                                                                      |
| ---------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setDefaultCard`       | `(string) => void`   | Legt die ID der [Karte](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) in Issuing fest, die beim erstmaligen Laden angezeigt wird.                                                   |
| `setCardSwitching`     | `(boolean) => void`  | Legt fest, ob die Auswahl des Karten-Dropdown-Menüs angezeigt werden soll. Der Standardwert ist „true“.                                                                                                           |
| `setFetchEphemeralKey` | `(function) => void` | Legt den Callback fest, der den temporären Schlüssel für die Karte abruft. Siehe [Sensible Daten anzeigen](https://docs.stripe.com/connect/supported-embedded-components/issuing-card.md#sensitive-data-display). |

#### React

| React-Eigenschaft   | Typ          | Beschreibung                                                                                                                                                                                            |
| ------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultCard`       | `string`     | Die ID der [Karte](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) in Issuing, die beim erstmaligen Laden angezeigt wird.                                                   |
| `cardSwitching`     | `boolean`    | Gibt an, ob die Auswahl des Karten-Dropdown-Menüs angezeigt werden soll. Der Standardwert ist „true“.                                                                                                   |
| `fetchEphemeralKey` | `() => void` | Der Callback, der den temporären Schlüssel für die Karte abruft. Siehe [Sensible Daten anzeigen](https://docs.stripe.com/connect/supported-embedded-components/issuing-card.md#sensitive-data-display). |

## Ausgabenkontrollen festlegen

Sie können die eingebetteten Connect-Komponenten von Issuing verwenden, um die [Ausgabenkontrollen](https://docs.stripe.com/issuing/controls/spending-controls.md) für Ihre Karten anzuzeigen und optional zu bearbeiten, indem Sie das Attribut `showSpendControls` der Issuing-Komponente aktivieren.

#### JavaScript

```js
const issuingCard = stripeConnectInstance.create('issuing-card');
issuingCard.setShowSpendControls(true);
document.body.appendChild(issuingCard);
```

Um die Bearbeitung der Ausgabenkontrollen in der Komponente zu ermöglichen, übergeben Sie `spend_control_management: true` als Funktion, wenn Sie eine [AccountSession erstellen](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md#server-endpoint).

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[issuing_card][enabled]=true" \
  -d "components[issuing_card][features][spend_control_management]=true"
```

## Anzeige sensibler Daten

Die eingebetteten Komponenten von Issuing Connect können in [Issuing Elements](https://docs.stripe.com/issuing/elements.md) integriert werden. Dadurch können Ihre Administratoren auf PCI-konforme Weise Kartennummern (PANs) und Prüfziffern/CVVs oder CVCs für virtuelle Karten anzeigen. Die sensiblen Daten werden in von Stripe gehosteten iFrames angezeigt und gelangen nicht auf Ihre Server.

Die Komponenten können einen temporären Schlüssel verwenden, um Karteninformationen sicher von der Stripe API abzurufen, ohne Ihre geheimen Schlüssel öffentlich anzuzeigen

Um diese Funktionalität zu aktivieren, müssen Sie:

1. Richten Sie einen Austausch für temporäre Schlüssel auf Ihrem Server ein.
1. Einen asynchronen Rückruf an die Komponenten übergeben.

Stripe generiert eine `nonce` aus der [Karten-ID](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) in der Komponente „Issuing-Karte“ oder „Liste der Issuing-Karten“, wenn eine Karte ausgewählt oder geladen wird. Stripe ruft dann Ihre Rückruf-Funktion auf, die einen temporären Schlüssel zurückgibt und die Schaltfläche `Show numbers` anzeigt, wenn der temporäre Schlüssel gültig ist.

### Austausch der temporären Schlüssel

Ihr serverseitiger Endpoint muss eine [Karten-ID](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) und eine `nonce` akzeptieren. Der Endpoint kann dann über Stripe einen temporären Schlüssel erstellen.

So können Sie einen Endpoint zur Erstellung temporärer Schlüssel in den Frameworks der Webanwendung in verschiedenen Sprachen implementieren:

#### Node.js

```javascript
// This example sets up an endpoint using the Express framework.

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
const stripe = require('stripe')('<<YOUR_SECRET_KEY>>');

app.post('/ephemeral-keys', async (request, response) => {
  const { card_id, nonce } = request.body;

  const ephemeralKey = await stripe.ephemeralKeys.create({
    nonce: nonce,
    issuing_card: card_id,
  }, {
    apiVersion: '2026-04-22.dahlia',
    stripeAccount: '{{CONNECTED_ACCOUNT_ID}}',
  });

  response.json({
    ephemeralKeySecret: ephemeralKey.secret,
    nonce: nonce,
    issuingCard: card_id,
  });
});
```

### Asynchroner Rückruf

Sie müssen eine asynchrone Funktion definieren, die ein benanntes Argument mit der Eigenschaft `issuingCard`, d.&nbsp;h. eine [Karten](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id)-ID, und zusätzlich eine `nonce`-Eigenschaft akzeptiert. Diese Funktion muss ein `Object` mit den Eigenschaften `issuingCard`, `nonce` und `ephemeralKeySecret` zurückgeben. Diese werden von dem Endpoint abgerufen, den Sie im vorherigen Schritt eingerichtet haben.

So implementieren Sie einen Rückruf:

#### JavaScript

```js
const issuingCard = stripeConnectInstance.create('issuing-card');
const fetchEphemeralKey = async (fetchParams) =>  {
  const { issuingCard, nonce } = fetchParams;

  // This may vary greatly based on your implementation
  const response = await myServer.getEphemeralKey({issuingCard, nonce})

  return {
    issuingCard: response.issuingCard,
    nonce: response.nonce,
    ephemeralKeySecret: response.ephemeralKeySecret
  }
}

issuingCard.setFetchEphemeralKey(fetchEphemeralKey);
document.body.appendChild(issuingCard);
```