- 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
Payment Method Selection UI Component
The Payment Method Selection UI Component displays the available payment methods and provides functionality to select one of them.
Basic implementation
This code sample demonstrates a basic implementation of Payment Method Selection UI Component.
Implementation
Layout
public class PaymentMethodSelectionUiComponentFragment extends Fragment implements PaymentMethodSelectionUiComponent {
private PaymentMethodSelectionUiComponentFragmentBinding binding;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
binding = PaymentMethodSelectionUiComponentFragmentBinding.inflate(inflater, container, false);
return binding.getRoot();
}
@Override
public void onUiComponentCreated(@NonNull PaymentMethodSelectionUiComponentInteraction 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,
// use interaction to get available payment methods
PaymentMethod[] paymentMethods = interaction.getPaymentMethods();
PaymentMethodAdapter adapter = new PaymentMethodAdapter(
paymentMethods,
// use interaction to select payment method
position -> interaction.onPaymentMethodSelected(paymentMethods[position])
);
binding.paymentMethodRecyclerView.setAdapter(adapter);
}
private static class PaymentMethodAdapter extends RecyclerView.Adapter<PaymentMethodAdapter.ViewHolder> {
@FunctionalInterface
interface OnItemClickListener {
void onItemClick(int position);
}
static class ViewHolder extends RecyclerView.ViewHolder {
private final PaymentMethodItemBinding binding;
public ViewHolder(@NonNull PaymentMethodItemBinding binding,
@NonNull OnItemClickListener listener) {
super(binding.getRoot());
this.binding = binding;
binding.getRoot().setOnClickListener(view -> {
int position = getAbsoluteAdapterPosition();
if (position != RecyclerView.NO_POSITION) {
listener.onItemClick(position);
}
});
}
}
private final PaymentMethod[] paymentMethods;
private final OnItemClickListener listener;
public PaymentMethodAdapter(@NonNull PaymentMethod[] paymentMethods,
@NonNull OnItemClickListener listener) {
this.paymentMethods = paymentMethods;
this.listener = listener;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent,
int viewType) {
PaymentMethodItemBinding binding = PaymentMethodItemBinding.inflate(
LayoutInflater.from(parent.getContext()), parent, false);
return new ViewHolder(binding, listener);
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder,
int position) {
PaymentMethod paymentMethod = paymentMethods[position];
holder.binding.paymentMethodName.setText(paymentMethod.getDisplayableName());
}
@Override
public int getItemCount() {
return paymentMethods.length;
}
}
}
class PaymentMethodSelectionUiComponentFragment : Fragment(), PaymentMethodSelectionUiComponent {
private var _binding: PaymentMethodSelectionUiComponentFragmentBinding? = null
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
_binding = PaymentMethodSelectionUiComponentFragmentBinding.inflate(
inflater, container, false)
return binding.root
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
override fun onUiComponentCreated(interaction: PaymentMethodSelectionUiComponentInteraction) {
// 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,
// use interaction to get available payment methods.
val paymentMethods = interaction.paymentMethods
val adapter = PaymentMethodAdapter(paymentMethods) {
// use interaction to select payment method
position -> interaction.onPaymentMethodSelected(paymentMethods[position])
}
binding.paymentMethodRecyclerView.adapter = adapter
}
class PaymentMethodAdapter(private val paymentMethods: Array,
private val listener: OnItemClickListener) :
RecyclerView.Adapter() {
fun interface OnItemClickListener {
fun onItemClick(position: Int)
}
class ViewHolder(val binding: PaymentMethodListItemBinding, listener: OnItemClickListener) :
RecyclerView.ViewHolder(binding.root) {
init {
itemView.setOnClickListener {
val position = adapterPosition
if (position != RecyclerView.NO_POSITION) listener.onItemClick(position)
}
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val binding = PaymentMethodListItemBinding.inflate(
LayoutInflater.from(parent.context), parent, false)
return ViewHolder(binding, listener)
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.binding.paymentMethodName.text = paymentMethods[position].displayableName
}
override fun getItemCount() = paymentMethods.size
}
}
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/payment_method_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<?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:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/payment_method_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>