Direct Debit SEPA UI Component

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

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.