Nutzerdefinierte Zahlungsmethoden hinzufügen

Fügen Sie dem Payment Element nutzerdefinierte Zahlungsmethoden hinzu.

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.

Um eine nutzerdefinierte Zahlungsmethode zu konfigurieren, erstellen Sie sie in Ihrem Stripe-Dashboard und geben Sie einen Anzeigenamen und ein Symbol an, die auch im Payment Element angezeigt werden. Das Stripe-Dashboard bietet außerdem Zugriff auf über 50 voreingestellte nutzerdefinierte Zahlungsmethoden. Nachdem Sie die Zahlungsmethode erstellt haben, befolgen Sie die nachstehende Anleitung, um das Payment Element zu konfigurieren. Die Einrichtung des Payment Element erfordert zusätzlichen Konfigurationsaufwand, da Transaktionen mit nutzerdefinierten Zahlungsmethoden außerhalb von Stripe verarbeitet und finalisiert werden.

Notiz

Wenn Sie sich mit einem Drittanbieter-Zahlungsabwickler vernetzen, sind Sie für die Einhaltung geltender rechtlicher Anforderungen verantwortlich, einschließlich Ihrer Vereinbarung mit Ihrem PSP, der geltenden Gesetze usw.

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

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

Ihre nutzerdefinierte Zahlungsmethode im Dashboard erstellen
Dashboard

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.

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.

Stripe Payment Element zeigt eine nutzerdefinierte Zahlungsmethode namens PM Name an.

OptionalEingebettete nutzerdefinierte Inhalte anzeigen
Vorschau
Clientseitig

Zeigen Sie Ihre Inhalte im Kontext von Payment Element an, indem Sie den Typ embedded customPaymentMethod verwenden. Sie können eingebettete Inhalte verwenden, um Ihre nutzerdefinierte Zahlungsformularlogik in die Nutzeroberfläche von Payment Element zu integrieren.

Das Stripe Payment Element, das eine nutzerdefinierte Zahlungsmethode namens „Name der Zahlungsmethode“ anzeigt, wobei der benutzerdefinierte Inhalt im Formular-Container überlagert wird.

Um die Einbettungsfunktion zu verwenden, fügen Sie eine nutzerdefinierte Zahlungsmethode hinzu type: 'embedded' und verwalten Sie Ihre nutzerdefinierten Inhalte mithilfe dieser zwei Callbacks:

handleRender: handleRender wird aufgerufen, wenn eine Zahlungsmethode ausgewählt wird. Es enthält einen Verweis auf einen Container-DOM-Knoten, in den Sie Ihren Inhalt rendern können.
(Optional) handleDestroy: Der Hook handleDestroy wird aufgerufen, wenn die Auswahl einer Zahlungsmethode aufgehoben und Payment Element deaktiviert wird. Verwenden Sie es, um Bereinigungen durchzuführen, z. B. Ereignis-Listener oder ein nutzerdefiniertes SDK zu entfernen.

Sicherheitshinweis

Sie sollten vertrauenswürdige Inhalte nur innerhalb des von handleEmbed bereitgestellten container rendern. Das Rendern von Markup, das Sie nicht kontrollieren können, insbesondere von Nutzerinnen und Nutzern oder einer nicht bereinigten Quelle, kann leicht zu einer Cross-Site-Scripting-Schwachstelle (XSS) führen.

Mit Tools wie React-Portalen können Sie Ihre Rendering-Logik in Ihren Anwendungscode integrieren:

checkout.js
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

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

export default function App() {
  const [embedContainer, setEmbedContainer] = useState();

  const options = {
    customPaymentMethods: [
      {
        id: '{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}',
        options: {
          type: 'embedded',
          subtitle: 'Embedded payment method',
          embedded: {
            handleRender: (container) => {
              setEmbedContainer(container);
            },
            handleDestroy: () => {
              setEmbedContainer(null);
            }
          }
        }
      }
    ]
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutFormWithPaymentElement />
      {embedContainer && createPortal(<EmbeddedCpmContent />, embedContainer)}
    </Elements>
  );
};

Übermittlung der Zahlungsmethode handhaben
Clientseitig

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.

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

OptionalGeben Sie die Reihenfolge der nutzerdefinierten Zahlungsmethoden an
Clientseitig

Standardmäßig zeigt das Payment Element die letzten nutzerdefinierten Zahlungsmethoden an. Um die Reihenfolge der Zahlungsmethoden manuell festzulegen, legen Sie die Eigenschaft paymentMethodOrder in der Konfiguration der Optionen fest, wenn Sie Ihre Payment Element-Instanz erstellen.

checkout.js
const paymentElement = elements.create('payment', {
  // an array of payment method types, including custom payment method types
  paymentMethodOrder: [...]
});

Nutzerdefinierte Zahlungsmethoden hinzufügen

Fügen Sie dem Payment Element nutzerdefinierte Zahlungsmethoden hinzu.

Notiz

Bevor Sie beginnen

Ihre nutzerdefinierte Zahlungsmethode im Dashboard erstellenDashboard

Wahl des richtigen Logos

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

OptionalEingebettete nutzerdefinierte Inhalte anzeigenVorschauClientseitig