Link Authentication Element

Link speichert Zahlungs- und Versandinformationen für Kundinnen und Kunden und füllt diese automatisch aus. Kundinnen und Kunden können verschiedene Zahlungsquellen für die Zahlung mit Link nutzen, darunter Kreditkarten, Debitkarten und US-Bankkonten. Weitere Informationen unter link.com.

Das Link Authentication Element nutzt ein einziges E-Mail-Eingabefeld sowohl für die Erfassung der E-Mail-Adresse als auch für die Link-Authentifizierung.

Mit Beispielen starten

Um das Link Authentication Element in Aktion zu sehen, beginnen Sie mit einem dieser Beispiele:

Bevor Sie loslegen

Bevor Sie beginnen, müssen Sie Ihre Domain registrieren.

Erstellen Sie das Link Authentication Element

Mit dem folgenden Code wird eine Instanz des Link Authentication Element erstellt und mit dem DOM verbunden:

// 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");

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.

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

Kundendaten vorab ausfüllen

Das Link Authentication Element akzeptiert E-Mail-Adressen. Wenn eine Kundenadresse eingegeben wird, wird der Link-Authentifizierungsablauf mit der Option defaultValues begonnen, sobald die Zahlungsseite aufgerufen wird:

// 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 zum Payment Element hinzu. Dadurch werden der Name, die Telefonnummer und die Versandadresse eines Kunden/einer Kundin vorausgefüllt. Indem Sie so viele Kundeninformationen 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:

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

Elemente kombinieren

Das Link Authentication Element interagiert 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 Link Authentication Element, Address Element und Payment Element:

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

Erscheinungsbild

Verwenden Sie die Appearance API, um das Design aller Elemente zu steuern. Wählen Sie einen Stil oder aktualisieren Sie bestimmte Details.

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:

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat'
  variables: { colorPrimaryText: '#262626' }
};