ACI Instant Pay UI Component

ACI Instant Pay UI Component

The ACI Instant Pay UI Component collects account holder, account number and routing number for ACI Instant Pay payment in US region.

Basic implementation

This code sample demonstrates a basic implementation of ACI Instant Pay UI Component for US region. 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 AciInstantPayUiComponentFragment extends Fragment
	implements AciInstantPayUiComponent {

    private AciInstantPayUiComponentFragmentBinding binding;
    
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
			     @Nullable ViewGroup container,
    	                     @Nullable Bundle savedInstanceState) {
        binding = AciInstantPayUiComponentFragmentBinding
    		    .inflate(inflater, container, false);
    
        return binding.getRoot();
    }
    
    @Override
    public void onUiComponentCreated(@NonNull AciInstantPayUiComponentInteraction 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.accountHolder;
    }
    
    @NonNull
    @Override
    public EditText getAccountNumberEditText() {
    	return binding.accountNumber;
    }
    
    @NonNull
    @Override
    public EditText getRoutingNumberEditText() {
    	return binding.routingNumber;
    }
}

class AciInstantPayUiComponentFragment : Fragment(), AciInstantPayUiComponent {

    private var _binding: AciInstantPayUiComponentFragmentBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = AciInstantPayUiComponentFragmentBinding.inflate(
            inflater, container, false)

        return binding.root
    }

    override fun onDestroyView() {
        super.onDestroyView()

        _binding = null
    }
  
    override fun onUiComponentCreated(interaction: AciInstantPayUiComponentInteraction) {
        // 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.accountHolder
    }

    override fun getAccountNumberEditText(): EditText {
        return binding.accountNumber
    }

    override fun getRoutingNumberEditText(): EditText {
        return binding.routingNumber
    }
}