Nutzerdefinierte Zahlungsmethoden hinzufügenÖffentliche Vorschau

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

The Mobile Payment Element lets your users pay with many payment methods through a single integration. Use custom payment methods if you need to display additional payment methods that aren’t processed through Stripe. If you use custom payment methods, you can optionally record purchases processed outside of Stripe to your Stripe account for reporting purposes.

To configure a custom payment method, create it in your Stripe Dashboard, and provide a display name and icon that the Mobile 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 Mobile Payment Element. Setting up the Mobile Payment Element requires some additional configuration work because custom payment method transactions process and finalize outside of Stripe.

Notiz

When integrating with a third party payment processor, you’re responsible for complying with applicable legal requirements, including your agreement with your PSP, applicable laws, and so on.

Bevor Sie loslegen

Erstellen Sie ein Stripe-Konto oder melden Sie sich an.
Befolgen Sie den Leitfaden In-App-Zahlungen akzeptieren, 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

If you provide a logo with a transparent background, consider the background color of the Payment Element on your page and make sure that it displays clearly.
If you provide a logo with a background fill, provide rounded corners in your file because we won’t provide them.
Choose a logo variant that can scale down to 16 pixels × 16 pixels. This is often the standalone logo mark for a brand.

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 EmbeddedPaymentElement.Configuration-Objekt erstellen und EmbeddedPaymentElement initialisieren, geben Sie die benutzerdefinierten Zahlungsmethoden an, die Sie dem eingebetteten Payment Element hinzufügen möchten, und einen Handler zum Abschließen der Zahlung.

@_spi(EmbeddedPaymentElementPrivateBeta) @_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

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

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

Zahlung abschließen

Wenn Sie confirm in Ihrer EmbeddedPaymentElement-Instanz aufrufen und der Kunde/die Kundin eine benutzerdefinierte Zahlungsmethode ausgewählt hat, wird der Handler mit der nutzerdefinierten Zahlungsmethode und alle im Sheet erfassten Abrechnungsdetails aufgerufen.

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:).

@_spi(EmbeddedPaymentElementPrivateBeta) @_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

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

    func handleCustomPaymentMethod(
        _ customPaymentMethodType: EmbeddedPaymentElement.CustomPaymentMethodConfiguration.CustomPaymentMethod,
        _ billingDetails: STPPaymentMethodBillingDetails
    ) async -> EmbeddedPaymentElementResult {
        // Your implementation needs to complete the payment with the payment method provider
        // When the payment completes, cancels, or fails, return the result.
        // 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 eingebetteten 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 = EmbeddedPaymentElement.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.