- Get Started
- Guides
- Integrations
- References
- API Reference
- Basic Payment
- Forex
- Authentication
- Card Account
- Apple Pay
- Virtual Account
- Bank Account
- Token Account
- Customer
- Billing Address
- Merchant Billing Address
- Shipping Address
- Merchant Shipping Address
- Corporate
- Sender
- Recipient
- Merchant
- Marketplace & Cart
- Airline
- Lodging
- Passenger
- Tokenization
- Recurring Migration
- 3D Secure
- Custom Parameters
- Async Payments
- Webhook notifications
- Job
- Risk
- Point of Sale
- Response Parameters
- Card On File
- Chargeback
- Result Codes
- Payment Methods
- Transaction Flows
- Regression Testing
- Data Retention Policy
- Release Notes
- API Reference
- Support
Direct Debit SEPA UI Component
The Direct Debit SEPA UI Component collects account holder and iban for SEPA payment.
Basic implementation
This code sample demonstrates a basic implementation of Direct Debit SEPA UI Component. It uses links to the EditText views to format, validate and collect the input. The callbacks notify your fragment about the events which require the UI update.
Implementation
Layout
public class DirectDebitSepaUiComponentFragment extends Fragment
implements DirectDebitSepaUiComponent {
private DirectDebitSepaUiComponentFragmentBinding binding;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
binding = DirectDebitSepaUiComponentFragmentBinding
.inflate(inflater, container, false);
return binding.getRoot();
}
@Override
public void onUiComponentCreated(@NonNull DirectDebitSepaUiComponentInteraction interaction) {
// this method will be called after onViewCreated() and before onStart(),
// it provides the link to the UI Component interaction, use it to initialize your UI
binding.payButton.setOnClickListener(v -> interaction.submitPaymentDetails());
}
@Override
public void onInputValidation(@NonNull EditText editText, @Nullable String error) {
// use this callback to show or hide input validation errors
editText.setError(error);
}
@Override
public void onViewVisibilityChange(@NonNull View view, int visibility) {
// some views might be displayed or hidden depends on the brand
// or checkout settings, this callback provides the view and required visibility value
view.setVisibility(visibility);
}
@NonNull
@Override
public EditText getAccountHolderEditText() {
return binding.sepaAccountHolder;
}
@NonNull
@Override
public EditText getIbanEditText() {
return binding.sepaIban;
}
}
class DirectDebitSepaUiComponentFragment : Fragment(), DirectDebitSepaUiComponent {
private var _binding: DirectDebitSepaUiComponentFragmentBinding? = null
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
_binding = DirectDebitSepaUiComponentFragmentBinding.inflate(
inflater, container, false)
return binding.root
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
override fun onUiComponentCreated(interaction: DirectDebitSepaUiComponentInteraction) {
// this method will be called after onViewCreated() and before onStart(),
// it provides the link to the UI Component interaction, use it to initialize your UI
binding.payButton.setOnClickListener { interaction.submitPaymentDetails() }
}
override fun onInputValidation(editText: EditText, error: String?) {
// use this callback to show or hide input validation errors
editText.error = error
}
override fun onViewVisibilityChange(view: View, visibility: Int) {
// some views might be displayed or hidden depends on the card brand
// or checkout settings, this callback provides the view and required visibility value
view.visibility = visibility
}
override fun getAccountHolderEditText(): EditText {
return binding.sepaAccountHolder
}
override fun getIbanEditText(): EditText {
return binding.sepaIban
}
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/sepa_account_holder"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/sepa_iban"
android:layout_width="0dp"
android:layout_marginTop="25dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/sepa_account_holder" />
<Button
android:id="@+id/pay_button"
android:layout_width="0dp"
android:text="@string/pay_button_title"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Additional features
Tokenization
Payment form can be extended to display an option to the shopper that allows to store payment details.
@Override
public void onUiComponentCreated(@NonNull CardUiComponentInteraction interaction) {
// use the interaction to get the tokenization mode from CheckoutSettings
CheckoutStorePaymentDetailsMode storePaymentDetailsMode
= interaction.getCheckoutSettings().getStorePaymentDetailsMode();
switch (storePaymentDetailsMode) {
case NEVER:
// hide the tokenization option
break;
case PROMPT:
// display the tokenization option to shopper
break;
case ALWAYS:
// hide the tokenization option and enable it by default
interaction.setTokenizationEnabled(true);
break;
}
}
override fun onUiComponentCreated(interaction: DirectDebitSepaUiComponentInteraction) {
binding.payButton.setOnClickListener { interaction.submitPaymentDetails() }
// use the interaction to get the tokenization mode from CheckoutSettings
when (interaction.checkoutSettings.storePaymentDetailsMode) {
CheckoutStorePaymentDetailsMode.NEVER -> {} // hide the tokenization option
CheckoutStorePaymentDetailsMode.PROMPT -> {} // display the tokenization option to shopper
CheckoutStorePaymentDetailsMode.ALWAYS ->
// hide the tokenization option and enable it by default
interaction.setTokenizationEnabled(true)
}
}
More info in the Tokenization guide.