Nutzerdefinierte Zahlungsmethoden hinzufügen

Gehen Sie zu Einstellungen > Zahlungen > Nutzerdefinierte Zahlungsmethoden, um zu der Seite der nutzerdefinierten Zahlungsmethoden zu gelangen. Erstellen Sie eine nutzerdefinierte Zahlungsmethode und geben Sie den Anzeigenamen und das Logo an, das das Payment Element anzeigt.

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.

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.

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.

Aktualisieren Sie die Funktion handleSubmit, die aufgerufen wird, wenn Nutzer/innen auf Ihrer Website auf die Schaltfläche zum Bezahlen klicken, damit Transaktionen mit nutzerdefinierten Zahlungsmethoden außerhalb von Stripe verarbeitet werden.

Die Funktion elements.submit() ruft die aktuell ausgewählte Art der Zahlungsmethode ab. Wenn die ausgewählte Zahlungsmethode Ihre nutzerdefinierte Zahlungsmethode ist, verarbeiten Sie die Transaktion entsprechend. Beispielsweise können Sie ein Modal anzeigen und die Zahlung dann auf Ihrem eigenen Server verarbeiten oder Ihren Kunden/Ihre Kundin auf eine externe Zahlungsseite weiterleiten.

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
    ...
  }
}