Schaltfläche für ZahlungsanfrageVeraltet

Das Schaltfläche für Zahlungsanfragen-Element zeigt dynamisch Wallet-Optionen während des Bezahlvorgangs an und bietet Ihnen eine zentrale Integration für Apple Pay, Google Pay und Link. Alternativ können Sie mit dem Express Checkout Element Ihren Kundinnen/Kunden mehrere One-Click-Zahlungsschaltflächen anbieten. Vergleichen Sie das Express Checkout Element und die Schaltfläche für Zahlungsanfragen.

Kundinnen und Kunden sehen Apple Pay oder Google Pay, wenn sie diese Funktionen auf ihrem Gerät aktiviert haben und je nachdem, welchen Browser sie verwenden. Wenn Link angezeigt wird, könnte es sein, weil Kundinnen/Kunden:

• Sie haben auf ihrem Gerät weder Apple Pay noch Google Pay aktiviert.
• Verwenden Sie Chrome mit aktiven, authentifizierten Link-Sitzungen.

<script src="https://js.stripe.com/v3/"></script>
<div id="payment-request-button">
  <!-- A Stripe Element will be inserted here. -->
</div>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx', {
  apiVersion: "2024-11-20.acacia",
});

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1099,
  },
  requestPayerName: true,
  requestPayerEmail: true,
});

const elements = stripe.elements();
const prButton = elements.create('paymentRequestButton', {
  paymentRequest,
});

(async () => {
  // Check the availability of the Payment Request API first.
  const result = await paymentRequest.canMakePayment();
  if (result) {
    prButton.mount('#payment-request-button');
  } else {
    document.getElementById('payment-request-button').style.display = 'none';
  }
})();

PaymentIntent erstellen

Serverseitig

Stripe verwendet ein PaymentIntent-Objekt, um Ihre Absicht darzustellen, eine Kundenzahlung einzuziehen. Dabei werden die Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs dokumentiert.

Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag und einer Währung. Entscheiden Sie immer auf der Server-Seite, einer vertrauenswürdigen Umgebung, im Gegensatz zum Client, wie viel berechnet werden soll. Dadurch wird verhindert, dass böswillige Kund/innen ihre eigenen Preise wählen können.

Command Line

cURL

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card

Im zurückgegebenen PaymentIntent ist ein Client-Geheimnis enthalten, mit dem Sie den Zahlungsvorgang sicher abschließen können, anstatt das gesamte PaymentIntent-Objekt zu übergeben. Senden Sie das Client-Geheimnis zur Verwendung im nächsten Schritt zurück an den Client.

paymentRequest.on('paymentmethod', async (ev) => {
  // Confirm the PaymentIntent without handling potential next actions (yet).
  const {paymentIntent, error: confirmError} = await stripe.confirmCardPayment(
    clientSecret,
    {payment_method: ev.paymentMethod.id},
    {handleActions: false}
  );

  if (confirmError) {
    // Report to the browser that the payment failed, prompting it to
    // re-show the payment interface, or show an error message and close
    // the payment interface.
    ev.complete('fail');
  } else {
    // Report to the browser that the confirmation was successful, prompting
    // it to close the browser payment method collection interface.
    ev.complete('success');
    // Check if the PaymentIntent requires any actions and, if so, let Stripe.js
    // handle the flow. If using an API version older than "2019-02-11"
    // instead check for: `paymentIntent.status === "requires_source_action"`.
    if (paymentIntent.status === "requires_action") {
      // Let Stripe.js handle the rest of the payment flow.
      const {error} = await stripe.confirmCardPayment(clientSecret);
      if (error) {
        // The payment failed -- ask your customer for a new payment method.
      } else {
        // The payment has succeeded -- show a success message to your customer.
      }
    } else {
      // The payment has succeeded -- show a success message to your customer.
    }
  }
});

Versandinformationen erfassen

Um Versandinformationen zu erfassen, nehmen Sie zunächst die Zeile requestShipping: true in die Erstellung der Zahlungsanfrage auf.

In diesem Schritt können Sie auch ein Array mit shippingOptions bereitstellen, wenn die Adresse der Kundin/des Kunden keine Auswirkungen auf Ihre Versandoptionen hat.

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1099,
  },

  requestShipping: true,
  // `shippingOptions` is optional at this point:
  shippingOptions: [
    // The first shipping option in this list appears as the default
    // option in the browser payment interface.
    {
      id: 'free-shipping',
      label: 'Free shipping',
      detail: 'Arrives in 5 to 7 days',
      amount: 0,
    },
  ],
});

Überwachen Sie als Nächstes das Ereignis shippingaddresschange, um zu erkennen, wann eine Kundin/ein Kunde eine Versandadresse auswählt. Verwenden Sie die Adresse, um gültige Versandoptionen von Ihrem Server abzurufen, die Summe zu aktualisieren oder eine andere Geschäftslogik durchzuführen. Sie können die Adressdaten im Ereignis shippingaddresschange im Browser anonymisieren, um keine sensiblen Informationen preiszugeben, die für die Berechnung der Versandkosten nicht erforderlich sind.

Der/die Kund/in muss an dieser Stelle gültige shippingOptions angeben, um mit dem Ablauf fortzufahren.

paymentRequest.on('shippingaddresschange', async (ev) => {
  if (ev.shippingAddress.country !== 'US') {
    ev.updateWith({status: 'invalid_shipping_address'});
  } else {
    // Perform server-side request to fetch shipping options
    const response = await fetch('/calculateShipping', {
      data: JSON.stringify({
        shippingAddress: ev.shippingAddress
      })
    });
    const result = await response.json();

    ev.updateWith({
      status: 'success',
      shippingOptions: result.supportedShippingOptions,
    });
  }
});

Einzelposten anzeigen

Use displayItems to display PaymentItem objects and show the price breakdown in the browser’s payment interface.

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 2000,
  },

  displayItems: [
    {
      label: 'Sample item',
      amount: 1000,
    },
    {
      label: 'Shipping cost',
      amount: 1000,
    }
  ],
});

Schaltfläche anpassen

Verwenden Sie folgende Parameter, um das Element anzupassen:

elements.create('paymentRequestButton', {
  paymentRequest,
  style: {
    paymentRequestButton: {
      type: 'default',
      // One of 'default', 'book', 'buy', or 'donate'
      // Defaults to 'default'

      theme: 'dark',
      // One of 'dark', 'light', or 'light-outline'
      // Defaults to 'dark'

      height: '64px',
      // Defaults to '40px'. The width is always '100%'.
    },
  },
});

Verwendung Ihrer eigenen Schaltfläche

Falls Sie Ihre eigene Schaltfläche gestalten möchten, anstatt das Element paymentRequestButton zu verwenden, können Sie basierend auf dem Ergebnis von paymentRequest.canMakePayment() Ihre eigene individuelle Schaltfläche anzeigen. Verwenden Sie anschließend paymentRequest.show(), um bei einem Klick auf die Schaltfläche die Browseroberfläche anzuzeigen.

Falls Sie Ihre eigene Schaltfläche erstellen, befolgen Sie die Human Interface Guidelines für Apple Pay und die Brand Guidelines für Google Pay.

Ein Apple Pay-Händler-Token für vom Händler initiierte Transaktionen hinzufügen

Richten Sie Ihre Schaltfläche für Zahlungsanfragen ein, um eine Apple Pay MPAN anzufordern. Damit können Sie vom Händler initiierte Transaktionen (Merchant Initiated Transactions, MIT) für wiederkehrende, automatisch geladene oder zurückgestellte Zahlungen ermöglichen.

1. Erstellen Sie eine Instanz der Zahlungsanfrage.
2. Übergeben Sie das applePay-Objekt, das für Ihr MPAN-Anwendungsszenario relevant ist (über das Dropdown-Menü können Sie Codebeispiele verschiedener Anwendungsszenarien anzeigen).
3. Nehmen Sie relevante Parameter für Ihr Anwendungsszenario auf.

const paymentRequest = stripe.paymentRequest({
  applePay: {
    recurringPaymentRequest: {
      paymentDescription: 'My subscription',
      managementURL: 'https://example.com/billing',
      regularBilling: {
        amount: 2500,
        label: 'Monthly subscription fee',
        recurringPaymentIntervalUnit: 'month',
        recurringPaymentIntervalCount: 1,
      },
    },
  },
  // Other options
});

Schaltfläche für Zahlungsanfrage mit Stripe Connect verwenden

Connect-Plattformen, die für das verbundene Konto Direct Charges erstellen oder das Token einem Customer-Objekt hinzufügen, müssen bei Verwendung der Schaltfläche für Zahlungsanfragen zusätzliche Schritte durchführen.

1. Bevor Sie die PaymentRequest-Instanz in Ihrem Frontend erstellen, legen Sie die Option stripeAccount für die Stripe-Instanz fest:

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx', {
  apiVersion: "2024-11-20.acacia",
  stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID',
});

1. Registrieren Sie alle Domains, auf denen Sie die Schaltfläche für Zahlungsanfragen anzeigen möchten.

Link für die Schaltfläche für Zahlungsanfragen

When new customers come to your site, they can use Link in the Payment Request Button to pay with their saved payment details. With Link, they don’t need to manually enter their payment information. Link requires domain registration.