# Link Authentication Element

Verwenden Sie das Link Authentication Element, um Link zu integrieren.

[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 [Link Authentifizierungselement](https://docs.stripe.com/js/element/link_authentication_element), 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                | Description                                                                                                                                                        |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Customer location** | Localize the UI language and display locally relevant payment methods.                                                                                             |
| **Size**              | Set the maximum pixel width of the parent Element that the Link Authentication Element is mounted to. You can set it to 750px (**Desktop**) or 320px (**Mobile**). |
| **Theme**             | Select the general appearance of the Element.                                                                                                                      |
| **Layout**            | Use the dropdown to align the funding sources list horizontally (**Tabs**) or vertically (**Accordion**).                                                          |

## Mit Beispielen starten

Um das Link Authentication 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 Anweisungen zum Akzeptieren einer Zahlung und zur Verwendung des Link Authentication Element zur Integration 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).

## Erstellen Sie das Link Authentifizierungselement

Der folgende Code [erstellt](https://docs.stripe.com/js/elements_object/create_link_authentication_element) eine Instanz des  Authentifizierungselements und [verbindet](https://docs.stripe.com/js/element/mount) es mit dem DOM:

#### 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 Link Authentication Element.
const linkAuthenticationElement = elements.create("linkAuthentication");

// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
paymentElement.mount("#payment-element");
```

#### React

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  LinkAuthenticationElement,
  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>
      <LinkAuthenticationElement/>
      <h3>Payment</h3>
      <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 `linkAuthenticationElement` 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
linkAuthenticationElement.on('change', (event) => {
  const email = event.value.email;
});
```

## Kundendaten vorab ausfüllen

Das  Authentifizierungselement akzeptiert E-Mail-Adressen. Wenn eine Kunden/Kundin E-Mail eingegeben wird, wird der -Authentifizierungsablauf mit der Option [defaultValues`](https://docs.stripe.com/js/elements_object/create_link_authentication_element#link_authentication_element_create-options-defaultValues) begonnen, sobald die Kundin/der Kunde auf der Zahlungsseite aufgerufen wird.

```javascript
// Create the Link Authentication Element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});

// Mount the Link Authentication Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-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");
```

## Elemente kombinieren

The Link Authentication Element only interacts with the Payment Element by prefilling payment information for returning Link users. However, it can still be displayed with other Elements as well, like the following example with the Link Authentication Element, Address Element, and Payment Element:
![Eine Zahlungsseite, die das Link Authentication Element, das Address Element und das Payment Element enthält.](https://b.stripecdn.com/docs-statics-srv/assets/lae-with-ae-pe.b70e0386757f6061d9b27c7211794173.png)

Verwenden Sie das Link Link Authentication Element mit anderen Elementen, um Ihre Zahlungsseite zu gestalten.

## Erscheinungsbild

You can use the [Appearance API](https://docs.stripe.com/elements/appearance-api.md) to control the style of all Elements. Choose a theme or update specific details.
![Examples of light and dark modes for the Payment Element checkout form.](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 }); // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details.
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
```