Nutzerdefinierte Zahlungsmethoden hinzufügen

Mit dem Stripe Payment Element können Ihre Nutzer/innen mit vielen Zahlungsmethoden über eine einzige Integration bezahlen. Verwenden Sie nutzerdefinierte Zahlungsmethoden, wenn Sie zusätzliche Zahlungsmethoden anzeigen müssen, die nicht über Stripe verarbeitet werden. Wenn Sie nutzerdefinierte Zahlungsmethoden verwenden, können Sie Einkäufe, die außerhalb von Stripe abgewickelt werden, optional zu Berichtszwecken in Ihrem Stripe-Konto erfassen.

To configure a custom payment method, create it in your Stripe Dashboard, and provide a display name and icon that the Payment Element also displays. The Stripe Dashboard also provides access to over 50 preset custom payment methods. After you create the payment method, follow the guide below to configure the Payment Element. Setting up the Payment Element requires some additional configuration work because custom payment method transactions process and finalize outside of Stripe.

In diesem Leitfaden wird eine nutzerdefinierte Zahlungsmethode unter Verwendung des HTML- oder JS-Beispiels aus dem Leitfaden Zahlungsdetails erfassen, bevor Sie einen Intent erstellen hinzugefügt.

Bevor Sie beginnen

1. Erstellen Sie ein Stripe-Konto oder melden Sie sich an.
2. Befolgen Sie die Anweisungen unter Zahlungsdetails erfassen, bevor Sie einen Intent erstellen, um eine Zahlungsintegration abzuschließen.
3. Führen Sie dann für jede nutzerdefinierte Zahlungsmethode, die Sie angeben möchten, die folgenden Schritte aus.

Wahl des richtigen Logos

• Wenn Sie ein Logo mit einem transparenten Hintergrund bereitstellen, berücksichtigen Sie die Hintergrundfarbe des Payment Element auf Ihrer Seite und stellen Sie sicher, dass es auffällt.
• Wenn Sie ein Logo mit einer Hintergrundfüllung bereitstellen, bieten wir keine abgerundeten Ecken an - schließen Sie diese in Ihre Datei ein.
• Wählen Sie eine Logo-Variante, die auf 16 Pixel x 16 Pixel verkleinert werden kann. Dies ist oft die eigenständige Logo-Marke für eine Marke.

Nach dem Erstellen der nutzerdefinierten Zahlungsmethode zeigt das Dashboard die ID der nutzerdefinierten Zahlungsmethode (beginnend mit cpmt_) an, die in Schritt 2 benötigt wird.

Fügen Sie die nutzerdefinierte Art der Zahlungsmethode zu Ihrer Stripe Elements-Konfiguration hinzu

Clientseitig

Geben Sie in Ihrer Datei checkout.js, in der Sie Stripe Elements initialisieren, die customPaymentMethods an, die dem Payment Element hinzugefügt werden sollen. Zusätzlich zur Angabe der ID aus Schritt 1 (sie beginnt mit cpmt_) geben Sie den options.type und den optionalen subtitle an.

checkout.js

const elements = stripe.elements({
  // ...
  customPaymentMethods: [
    {
      id: 
'{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}',
      options: {
        type: 'static',
        subtitle: 'Optional subtitle',
      }
    }
  ]
});

Wenn das Payment Element geladen wird, wird nun Ihre nutzerdefinierte Zahlungsmethode angezeigt.

async function handleSubmit(e) {
  const { submitError, selectedPaymentMethod } = await elements.submit();

  if (selectedPaymentMethod === 
'{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}') {
    // Process CPM payment on merchant server and handle redirect
    const res = await fetch("/process-cpm-payment", { method: 'post' });
    ...
  } else {
    // Process Stripe payment methods
    ...
  }
}