Überwachen Sie die Adresseingabe

Erstellen Sie zunächst ein Stripe-Konto oder melden Sie sich an.

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Mit dem Address Element können Sie nun Adressdaten auf dem Client erfassen.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import AddressForm from './AddressForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

function App() {
  const options = {
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

import React from 'react';
import {AddressElement} from '@stripe/react-stripe-js';

const AddressForm = () => {
  return (
    <form>
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping'}} />
    </form>
  );
};

export default AddressForm;

Sie können die Adressdaten abrufen, indem Sie das change-Ereignis überwachen. Das change-Ereignis wird immer dann ausgelöst, wenn Nutzer/innen ein Feld im Element aktualisieren.

<AddressElement onChange={(event) => {
  if (event.complete) {
    // Extract potentially complete address
    const address = event.value.address;
  }
}} />

Alternativ können Sie getValue verwenden.

const handleNextStep = async () => {
  const addressElement = elements.getElement('address');

  const {complete, value} = await addressElement.getValue();

  if (complete) {
    // Allow user to proceed to the next step
    // Optionally, use value to store the address details
  }
};

Bei einem einseitigen Bezahlvorgang mit dem Payment Element übergibt das Address Element automatisch die Versand- oder Rechnungsinformationen, wenn Sie den PaymentIntent oder SetupIntent bestätigen.

Bei einem mehrseitigen Bezahlvorgang können Sie den PaymentIntent manuell aktualisieren oder das Customer-Objekt mit den vom change-Ereignis oder der getValue-Methode erhaltenen Daten aktualisieren, bevor Sie zum nächsten Schritt übergehen.

Sie können das Address Element nach Ihren Wünschen konfigurieren.

Automatische Vervollständigung

Das Address Element verfügt über eine integrierte Funktion zur automatischen Vervollständigung von Adressen, die die Google Maps API Places Library verwendet. Standardmäßig ist die Autovervollständigung mit einem von Stripe bereitgestellten Google Maps API-Schlüssel aktiviert, wenn eine der folgenden Bedingungen erfüllt ist:

• Bei einem einseitigen Bezahlvorgang, bei dem das Payment Element in der gleichen Elementgruppe wie das Address Element ist.
• Bei einem Bezahlvorgang, bei dem das Address Element in einer aktiven Link-Sitzung verwendet wird.

Um die automatische Vervollständigung im Address Element für alle anderen Szenarien zu aktivieren, können Sie die Option automatische Vervollständigung verwenden, wobei mode auf google_maps_api festgelegt wird. Legen Sie apiKey als Ihren eigenen Google Maps API-Schlüssel fest, der so konfiguriert ist, dass die Verwendung der Places API zulässig ist. Ihr Google Maps API-Schlüssel wird nur verwendet, wenn der von Stripe bereitgestellte Google Maps API-Schlüssel nicht verfügbar ist.

<AddressElement options={{
  mode: "shipping",
  autocomplete: {
    mode: "google_maps_api",
    apiKey: "{YOUR_GOOGLE_MAPS_API_KEY}",
  },
}} />

Adressformular vorab ausfüllen

Das Address Element akzeptiert ein defaultValues-Objekt, mit dem Sie das Adressformular beim Laden der Seite vorab ausfüllen können. Ein Address Element mit allen vorab ausgefüllten Werten ähnelt dem Folgenden:

<AddressElement options={{
  mode: "shipping",
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    },
  },
}} />

Andere Optionen

Eine vollständige Liste der Optionen finden Sie unter Stripe.js.

// Sample of a options object
<AddressElement options={{
  mode: 'shipping',
  allowedCountries: ['US'],
  blockPoBox: true,
  fields: {
    phone: 'always',
  },
  validation: {
    phone: {
      required: 'never',
    },
  },
}} />

Stripe bietet einige Möglichkeiten, um eine Adresse auf Vollständigkeit zu überprüfen und Fehler wie „Dieses Feld ist unvollständig“ auszulösen, die auf unvollständigen einzelnen Adressfelder erscheinen.

Wenn Sie das Address Element mit einem Payment Intent oder Setup Intent verwenden, verwenden Sie stripe.confirmPayment oder stripe.confirmSetup, um die Absicht zu vervollständigen. Dann erscheinen, falls vorhanden, Validierungsfehler im Address Element.

Verwenden Sie für andere Anwendungsfälle, wie z. B. einen mehrseitigen Checkout-Ablauf, getValue, um Validierungsfehler auszulösen, die im Address Element angezeigt werden.