# Contact Details Element

Verwenden Sie das Contact Details Element zur Integration von Link.

[Link](https://stripe.com/payments/link) speichert Zahlungs- und Versanddaten von Kundinnen und Kunden und füllt diese automatisch aus. Kundinnen und Kunden können bei Link verschiedene Zahlungsmethoden nutzen, darunter Kreditkarten, Debitkarten und US-Bankkonten. Erfahren Sie mehr unter [link.com](https://www.link.com).

Verwenden Sie das [Contact Details Element](https://docs.stripe.com/js/element/contact_details_element) (früher als Link-Authentifizierungselement bezeichnet), um ein einziges Eingabefeld für die E-Mail-Adresse zu erstellen, das sowohl zur Erfassung der E-Mail-Adresse als auch zur Authentifizierung bei Link dient.

| Option             | Beschreibung                                                                                                                                                                                                         |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Kundenstandort** | Passen Sie die Nutzeroberfläche lokal an und lassen Sie sich lokal relevante Zahlungsmethoden anzeigen.                                                                                                              |
| **Größe**          | Legen Sie die maximale Pixelbreite des übergeordneten Elements fest, an das das Contact Details Element angebunden ist. Sie können die Breite auf 750 px (**Desktop**) oder 320 px (**Mobil**) einstellen. |
| **Design**         | Wählen Sie das allgemeine Erscheinungsbild des Elements aus.                                                                                                                                                         |
| **Layout**         | Verwenden Sie das Dropdown-Menü, um die Liste der Finanzierungsquellen horizontal (**Registerkarten**) oder vertikal (**Akkordeon**) auszurichten.                                                                   |

## Mit Beispielen starten

Um das Contact Details Element in Aktion zu sehen, beginnen Sie mit einem dieser Beispiele:

[Quickstart](https://docs.stripe.com/payments/link/add-link-elements-integration.md): Code und Anleitungen zum Akzeptieren einer Zahlung und zur Verwendung des Contact Details Element zum Integrieren von Link.

[Kopieren Sie eine Beispiel-App in GitHub](https://github.com/stripe-samples/accept-a-payment)

## Before you begin

Bevor Sie beginnen, müssen Sie [Ihre Domain registrieren](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

## Das Contact Details Element erstellen

Der folgende Code [erstellt](https://docs.stripe.com/js/elements_object/create_contact_details_element) eine Instanz des Contact Details Elements und [bindet](https://docs.stripe.com/js/element/mount) sie in das DOM ein:

#### HTML + JS

```javascript
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

// Create an elements group from the Stripe instance passing in the clientSecret and enabling the loader UI.
const elements = stripe.elements({clientSecret, loader});

// Create an instance of the Contact Details Element.
const contactDetailsElement = elements.create("contactDetails");

// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
paymentElement.mount("#payment-element");
```

#### React

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  ContactDetailsElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Contact info</h3>
      <ContactDetailsElement/>
      <h3>Payment</h3>
      <PaymentElement/>
      <button type="submit">Submit</button>
    </form>
  );
}
```

## E-Mail-Adresse abrufen

Sie können die Details der E-Mail-Adresse mithilfe der Eigenschaft `onChange` der Komponente `ContactDetailsElement` abrufen. Der `onChange`-Handler wird immer dann ausgelöst, wenn der/die Nutzer/in das E-Mail-Feld aktualisiert oder wenn eine gespeicherte Kunden-E-Mail-Adresse automatisch angegeben wird.

```javascript
contactDetailsElement.on('change', (event) => {
  const email = event.value.email;
});
```

## Kundendaten vorausfüllen

Das Contact Details Element akzeptiert E-Mail-Adressen. Das Angeben der Kunden-E-Mail-Adresse startet den Link Authentifizierungsablauf, sobald die Kundin oder der Kunde über die Option [defaultValues](https://docs.stripe.com/js/elements_object/create_contact_details_element#contact_details_element_create-options-defaultValues) auf die Zahlungsseite gelangt:

```javascript
// Create the Contact Details Element with the defaultValues option
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});

// Mount the Contact Details Element to its corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
```

Wenn Sie zusätzliche Kundendaten vorab ausfüllen möchten, fügen Sie das Objekt [defaultValues.billingDetails](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues-billingDetails) zum [Payment Element](https://docs.stripe.com/payments/payment-element.md) hinzu. Dadurch werden der Name, die Telefonnummer und die Versandadresse der Kundin bzw. des Kunden automatisch ausgefüllt. Indem Sie so viele Kundendaten wie möglich vorab ausfüllen, vereinfachen Sie die Erstellung und Wiederverwendung von Link-Konten.

Der folgende Code zeigt ein Payment Element, in dem alle Werte vorab ausgefüllt sind:

#### React

```jsx
<PaymentElement
  options={{
    defaultValues: {
      billingDetails: {
        name: 'John Doe',
        phone: '888-888-8888',
        address: {
          postal_code: '10001',
          country: 'US',
        }
      },
    },
  }}
/>;
```

#### HTML + JS

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      name: 'John Doe',
      phone: '888-888-8888',
      address: {
        postal_code: '10001',
        country: 'US',
      },
    },
  },
});

// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```

## Elements kombinieren

Das Contact Details Element interagiert nur mit dem Payment Element, indem es die Zahlungsinformationen für wiederkehrende Link-Nutzer/innen vorausfüllt. Es kann jedoch auch mit anderen Elements angezeigt werden, wie im folgenden Beispiel mit dem Contact Details Element, Address Element und Payment Element:
![Eine Zahlungsseite, die das Contact Details Element, das Address Element und das Payment Element enthält.](https://b.stripecdn.com/docs-statics-srv/assets/cde-with-ae-pe.30a772ba14b5b6b62ea625aea56d6d0c.png)

Verwenden Sie das Contact Details Element zusammen mit anderen Elements, um Ihre Zahlungsseite zu gestalten

## Erscheinungsbild

Verwenden Sie die [Appearance API](https://docs.stripe.com/elements/appearance-api.md), um das Design aller Elemente zu steuern. Wählen Sie einen Stil oder aktualisieren Sie bestimmte Details.
![Beispiele für helle und dunkle Modi für das Bezahlvorgangsformular des Payment Elements.](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png)

Verwenden Sie die Appearance API, um das Erscheinungsbild und Design Ihrer Elemente zu ändern

Im folgenden Beispiel überschreibt das „flache“ Design die für Elemente verwendete Standardtextfarbe:

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = {
  theme: 'flat'
  variables: { colorPrimaryText: '#262626' }
};
const options = { /* options */ };
const elements = stripe.elements({ clientSecret, appearance }); // Bei einer funktionierenden Integration ist dies ein Wert, den Ihr Backend mit Details wie dem Betrag einer Zahlung übergibt. Einzelheiten finden Sie im vollständigen Beispiel.
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
```