Kartentransaktionen: Anpassung der Benutzeroberfläche

Drop-In Payment View enthält Anpassungsoptionen, mit denen Sie das Erscheinungsbild Ihrer Kasse besser an das Branding Ihrer App anpassen können. Es gibt Optionen, mit denen Sie das Aussehen des Zahlungsformulars ändern können.

Zusätzliche Parameter für die Konfiguration der Drop-In Payment View

Wenn Sie Drop-In Payment View in Ihr Layout einbinden, können Sie zusätzliche Styling-Parameter definieren, um das Aussehen des Zahlungsformulars an die Anforderungen Ihrer Anwendung anzupassen.

Sie können zum Beispiel die Textgröße und die Farbe des Etiketts ändern:

(XML)

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">

<com.trustpayments.mobile.ui.dropin.DropInPaymentView
android:id="@+id/dropInPaymentView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
app:labelTextColor="@color/colorAccent"
app:labelTextSize="20sp" />
</ScrollView>

Die vollständige Liste der verfügbaren Styling-Attribute finden Sie unten:

(XML)

<declare-styleable name="DropInPaymentView">
<attr name="inputTextColor" format="color" />
<attr name="inputTextSize" format="dimension" />
<attr name="inputBackgroundColor" format="color" />
<attr name="inputBorderColor" format="color" />
<attr name="inputBorderWidth" format="dimension" />
<attr name="inputCornerRadius" format="dimension" />
<attr name="inputHintTextColor" format="color" />
<attr name="inputSpacing" format="dimension" />
<attr name="labelTextColor" format="color" />
<attr name="labelTextSize" format="dimension" />
<attr name="labelSpacing" format="dimension" />
<attr name="errorTextColor" format="color" />
<attr name="payButtonTextColor" format="color" />
<attr name="payButtonTextSize" format="dimension" />
<attr name="payButtonBackgroundColor" format="color" />
<attr name="payButtonDisabledBackgroundColor" format="color" />
<attr name="payButtonPressedBackgroundColor" format="color" />
<attr name="payButtonBorderColor" format="color" />
<attr name="payButtonBorderWidth" format="dimension" />
<attr name="payButtonCornerRadius" format="dimension" />
<attr name="payButtonPadding" format="dimension" />
</declare-styleable>

Wie bei der Instanz Drop-In Payment View , die in Ihrer Aktivitätskomponente verfügbar ist, können Sie die Sichtbarkeit der Eingaben ändern und eine benutzerdefinierte Ansicht an das Zahlungsformular anhängen. Dies kann durch die Verwendung der entsprechenden Methoden erreicht werden, die für die Drop-In Payment View verfügbar sind:

class SampleActivity : AppCompatActivity(R.layout.activity_sample),
DropInPaymentView.DropInPaymentViewListener {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    dropInPaymentView.setupForTokenizedPayment(
      requiredFields = setOf(PaymentInputType.CVV),
      cardType = cardType
    )
    dropInPaymentView.setCustomView(
      layoutRes = R.layout.view_custom,
      customViewPosition = CustomViewPosition.UnderCvv
    )
  }
}

Dunkler Modus

Zahlungsformular

Das Zahlungsformular hat eine vordefinierte Farbpalette für den dunklen Modus. Diese wird automatisch angezeigt, wenn das Gerät des Kunden, auf dem Ihre App läuft, auf den dunklen Modus des Systems eingestellt wurde (entweder über die Einstellungen des Geräts oder lokal in der App).

Die Anpassung des Aussehens des Zahlungsformulars und die Anpassung bestimmter Elemente im Dunkelmodus erfolgt mit denselben Techniken wie oben beschrieben.

3-D Secure Herausforderung Pop-up

Ähnlich wie das Zahlungsformular wird auch das Challenge-Pop-up, das während der 3-D Secure -Authentifizierung angezeigt werden kann, automatisch in einer dunkleren Farbpalette dargestellt, wenn sich das Gerät oder die App im Dunkelmodus befindet.

Es sind jedoch zusätzliche Schritte erforderlich, wenn Sie das Erscheinungsbild dieses Popup-Fensters anpassen möchten, wenn sich das Gerät oder die App im Dunkelmodus befindet. Weitere Informationen entnehmen Sie bitte dem nachstehenden Codeausschnitt. Ein Beispiel für diese Funktion finden Sie in der Beispiel-App, die dem SDK beigefügt ist.

/**
* The isDarkThemeForced parameter indicates whether a merchant provides an option inside
* the app to override a default system theme (e.g. from a settings page inside their app).
* For the correct theme to be applied to the 3D Secure challenge pop-up, this parameter has to be set to:
*
* * true - when the dark theme is set from the local app settings;
* * false - when the light theme is set;
* * null - if the theme is set by the system.
*
* It's the merchants responsibility to assign the correct value based on any changes made inside the app settings.
*/
var isDarkThemeForced: Boolean? = null
set(value) {
  field = value
  threeDSecureManager.isDarkThemeForced = field
}

Sie können das Standardaussehen ändern und bestimmte Elemente des Challenge-Pop-ups anpassen, indem Sie zusätzliche CardinalStyleManager Instanzen für den hellen oder dunklen Modus (oder beide) und übergeben Sie diese als optionale Parameter für die PaymentTransactionManager Konstrukteur. Zum Beispiel:

private val CardinalStyleManager = CardinalStyleManager(
  verifyButtonStyle = CardinalStyleManager.ButtonStyle(
    backgroundColor = "#5585a2",
    cornerRadius = 150
  ),
  resendButtonStyle = CardinalStyleManager.ButtonStyle(
    textColor = "#ffffff",
    backgroundColor = "#5585a2",
    cornerRadius = 150
  ),
  labelStyle = CardinalStyleManager.LabelStyle(
    headingTextColor = "#660000",
    headingTextFontSize = 35,
    textColor = "#0086b3"
  ),
  toolbarStyle = CardinalStyleManager.ToolbarStyle(
    backgroundColor = "#003759",
    buttonText = "CANCEL",
    headerText = "DEMO CHECKOUT",
  ),
  textBoxStyle = CardinalStyleManager.TextBoxStyle(
    borderColor = "#000000",
    borderWidth = 5,
    cornerRadius = 1,
    textColor = "#00ff2a"
  )
)

private val cardinalDarkThemeStyleManager = CardinalStyleManager(
  verifyButtonStyle = CardinalStyleManager.ButtonStyle(
    backgroundColor = "#BB86FC",
    cornerRadius = 15
  ),
  labelStyle = CardinalStyleManager.LabelStyle(
    headingTextColor = "#660000",
    headingTextFontSize = 35,
    textColor = "#0086b3"
  ),
  toolbarStyle = CardinalStyleManager.ToolbarStyle(
    backgroundColor = "#121212",
    buttonText = "Cancel",
    headerText = "SECURE CHECKOUT",
  ),
  textBoxStyle = CardinalStyleManager.TextBoxStyle(
    borderColor = "#000000",
    borderWidth = 5,
    cornerRadius = 1,
    textColor = "#00ff2a"
  )
)
private val paymentTransactionManager =
PaymentTransactionManager(
  app,
  TrustPaymentsGatewayType.EU,
  false,
  BuildConfig.MERCHANT_USERNAME,
  CardinalStyleManager,
  cardinalDarkThemeStyleManager ,
  isLocationDataConsentGiven = false
)

Die vollständige Liste der Attribute für die Gestaltung von Challenge-Pop-ups finden Sie in der Datei CardinalStyleManager Klasse.

data class CardinalStyleManager(
  val verifyButtonStyle: ButtonStyle? = null,
  val resendButtonStyle: ButtonStyle? = null,
  val toolbarStyle: ToolbarStyle? = null,
  val textBoxStyle: TextBoxStyle? = null,
  val labelStyle: LabelStyle? = null
  ) {

  data class ButtonStyle(
    val textColor: String? = null,
    val backgroundColor: String? = null,
    val textFontName: String? = null,
    val cornerRadius: Int? = null,
    val textFontSize: Int? = null,
  )

  data class ToolbarStyle(
    val backgroundColor: String? = null,
    val buttonText: String,
    val headerText: String,
    val textFontName: String? = null,
    val textFontSize: Int? = null,
    val cancelButtonTextColor: String? = null,
    val cancelButtonBackgroundColor: String? = null,
    val cancelButtonTextFontName: String? = null,
    val cancelButtonCornerRadius: Int? = null,
    val cancelButtonTextFontSize: Int? = null,
  )

  data class TextBoxStyle(
    val borderColor: String? = null,
    val borderWidth: Int? = null,
    val cornerRadius: Int? = null,
    val textColor: String? = null,
    val textFontName: String? = null,
    val textFontSize: Int? = null
  )

  data class LabelStyle(
    val headingTextColor: String? = null,
    val headingTextFontName: String? = null,
    val headingTextFontSize: Int? = null,
    val textColor: String? = null,
    val textFontName: String? = null,
    val textFontSize: Int? = null
  )
}

Wie geht es weiter?