Kaarttransacties: De UI aanpassen

De Drop-In Payment View bevat aanpassingsopties, waarmee u het uiterlijk van uw kassa kunt aanpassen om beter bij de branding van uw app te passen. Er zijn opties waarmee u het uiterlijk van het betalingsformulier kunt veranderen.

Aanvullende parameters voor het configureren van de Drop-In Payment View

Wanneer u de Drop-In Payment View in uw lay-out opblaast, kunt u aanvullende stylingparameters definiëren om het uiterlijk van het betalingsformulier aan te passen aan de vereisten van uw toepassing.

U kunt bijvoorbeeld de grootte en de kleur van de etikettekst wijzigen:

(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>

De volledige lijst van beschikbare styling attributen staat hieronder:

(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>

Wat betreft de instantie Drop-In Payment View die beschikbaar is in uw activiteitencomponent, kunt u de zichtbaarheid van de ingangen wijzigen en een aangepaste weergave aan het betalingsformulier koppelen. Dat kan door gebruik te maken van de passende methodes voor de Drop-In Payment View:

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

Donkere modus

Betalingsformulier

Het betalingsformulier heeft een vooraf gedefinieerd kleurenpalet voor de donkere modus. Dit wordt automatisch weergegeven wanneer het apparaat van de klant waarop uw app draait, is ingesteld om de donkere modus van het systeem te gebruiken (via de instellingen van het apparaat of lokaal in de app).

Het aanpassen van het uiterlijk van het betalingsformulier en het aanpassen van bepaalde elementen in de donkere modus gebeurt met dezelfde technieken als hierboven beschreven.

3-D Secure uitdaging pop-up

Vergelijkbaar met het betalingsformulier wordt ook de challenge pop-up die kan worden weergegeven tijdens 3-D Secure authenticatie automatisch weergegeven in een donkerder kleurenpalet wanneer het apparaat of de app in de donkere modus staat.

Er zijn echter extra stappen nodig bij het aanpassen van het uiterlijk van deze pop-up wanneer het apparaat of de app in de donkere modus staat. Zie het onderstaande codefragment voor meer informatie. Een voorbeeld hiervan in actie is te vinden in de voorbeeld-app die bij de SDK is gevoegd.

/**
* 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
}

U kunt het standaard uiterlijk veranderen en bepaalde elementen van de uitdaging pop-up aanpassen, door extra te definiëren CardinalStyleManager instanties voor de lichte of donkere modus (of beide), en geef ze door als optionele parameters voor de PaymentTransactionManager constructor. Bijvoorbeeld:

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
)

De volledige lijst van stylingattributen voor pop-ups kan worden gevonden in de 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
  )
}

Waar nu?