Nutzerdefinierte Zahlungsmethoden hinzufügenÖffentliche Vorschau

Fügen Sie dem Mobile Payment Element nutzerdefinierte Zahlungsmethoden hinzu.

Mit dem Mobile 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 Mobile 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 den nachstehenden Leitfaden, um das Mobile Payment Element zu konfigurieren. Das Einrichten des Mobile Payment Element erfordert einige zusätzliche Konfigurationsschritte, da Transaktionen mit nutzerdefinierten Zahlungsmethoden außerhalb von Stripe verarbeitet und abgeschlossen 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.

Bevor Sie loslegen

Erstellen Sie ein Stripe-Konto oder melden Sie sich an.
Folgen Sie dem Payment Sheet-Beispiel, um eine Zahlungsintegration abzuschließen.

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 deutlich angezeigt wird.
Wenn Sie ein Logo mit einer Hintergrundfüllung bereitstellen, versehen Sie Ihre Datei mit abgerundeten Ecken, da wir diese nicht bereitstellen werden.
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.

Benutzerdefinierte Zahlungsmethodentypen hinzufügen

Wenn Sie Ihr PaymentSheet.Configuration-Objekt erstellen und PaymentSheet initialisieren, geben Sie die externen Zahlungsmethoden an, die Sie dem Mobile Payment Element hinzufügen möchten, und einen Handler zum Abschließen der Zahlung an.

@_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

class MyCheckoutVC: UIViewController {
  func setUpPaymentSheet() {
      // ...
      var configuration = PaymentSheet.Configuration()
      let customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                            subtitle: "Optional subtitle")
      configuration.customPaymentMethodConfiguration = .init(customPaymentMethods: [customPaymentMethod],
                                                             customPaymentMethodConfirmHandler: handleCustomPaymentMethod(_:_:))
      // ...
  }

  func handleCustomPaymentMethod(
        _ customPaymentMethodType: PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod,
        _ billingDetails: STPPaymentMethodBillingDetails
    ) async -> PaymentSheetResult {
      // ...explained in the next step
  }
}

Zahlung abschließen

Wenn der Kunde/die Kundin im PaymentSheet auf die Schaltfläche Kaufen tippt, die eine benutzerdefinierte Zahlungsmethode verwendet, wird der Handler mit der benutzerdefinierten Zahlungsmethode aufgerufen und alle von Ihnen erfassten Abrechnungsdaten verwendet.

Ihre Implementierung schließt die Zahlung ab (beispielsweise mithilfe des SDK Ihres externen Zahlungsmethodenanbieters) und kehrt mit dem Ergebnis einer Zahlung von der Funktion zurück: completed , canceled oder failure(error:).

Wenn Sie .failure(error:) übergeben, zeigt das PaymentSheet den Fehler mithilfe von errorDescription für Swift-Fehler und localizedDescription für NSErrors an.

import StripePaymentSheet

class MyCheckoutVC: UIViewController {
    func setUpPaymentSheet() {
        // ...
        var configuration = PaymentSheet.Configuration()
        let customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                              subtitle: "Optional subtitle")
        configuration.customPaymentMethodConfiguration = .init(customPaymentMethods: [customPaymentMethod],
                                                              customPaymentMethodConfirmHandler: handleCustomPaymentMethod(_:_:))
        // ...
    }

    func handleCustomPaymentMethod(
          _ customPaymentMethodType: PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod,
          _ billingDetails: STPPaymentMethodBillingDetails
     ) async -> PaymentSheetResult {
        // Your implementation needs to complete the payment with the payment method provider
        // When the payment completes, cancels, or fails, return the result.
        // Note you can present on top of PaymentSheet by using the `self.presentedViewController`.
        // This example code just immediately fails:
        let exampleError = NSError(domain: "MyErrorDomain", code: 0, userInfo: [NSLocalizedDescriptionKey: "Failed to complete payment!"])
        return .failed(error: exampleError)
    }
}

OptionalGeben Sie die Reihenfolge der nutzerdefinierten Zahlungsmethoden an

Abrechnungdaten erfassen

Sie können Rechnungsdetails mit billingDetailsCollectionConfiguration auf der Payment Sheet-Konfiguration erfassen. Benutzerdefinierte Zahlungsmethoden erfassen jedoch standardmäßig keine Rechnungsdetails. Um die Erfassung von Rechnungsdetails zu aktivieren, setzen Sie disableBillingDetailCollection für Ihre CustomPaymentMethod auf false.

var customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                      subtitle: "Optional subtitle")
customPaymentMethod.disableBillingDetailCollection = false

Ihre Integration testen

Durchlaufen Sie Ihren eigenen Bezahlvorgang und vergewissern Sie sich, dass das Mobile Payment Element Ihre benutzerdefinierte Zahlungsmethode anzeigt. In diesem Beispiel wird Ihre benutzerdefinierte Zahlungsmethode an zweiter Stelle, nach der Kartenzahlung, konfiguriert.
Wählen Sie Ihre nutzerdefinierte Zahlungsmethode aus.
Klicken Sie auf Jetzt bezahlen, um Ihre benutzerdefinierte Zahlungsmethodenintegration zu testen. Vergewissern Sie sich, dass Ihre Integration die Transaktion abschließt, und dass alle Aktionen nach der Zahlung (z. B. das Anzeigen einer Bestätigungsseite, Erfolgsmeldung oder Fehlermeldung) mit Ihrer benutzerdefinierten Zahlungsmethodenintegration weiterhin funktionieren.