Skip to main content

Payment Method Selector

Overview​

The Payment Method Selector allows end users to display a list of payment methods and get notified of the selected payment method. Notifications can be received via callback in an embedded environment or via polling in a hosted environment. Users can also pre-select a payment method during session creation, and manage their wallet directly from the widget.

Supported Experiences​

Usage​

Create a Session​

  • To create a session, send a request object specifying the customer details, configuration modes, and optionally, the payment method ID to be pre-selected.

Example Request​

{
  "customer": {
    // Customer details here
  },
  "config": {
    "modes": ["PAYMENT_METHOD_SELECT"]
  },
  //optional
  "paymentMethod": {
    "id": "payment-method-id"
  }
}

Note: Use hostedURL from the session request response to launch the hosted experience.

Session Configuration Options​

  • paymentMethod.id: The ID of the payment method to be pre-selected.

Things to Keep in Mind​

Embedded Environment​

  • Merchants are notified via onEvent callback when a payment method is selected.
  • Users can manage their wallet through a CTA button below the list. When clicked, the merchant is notified that there is no selection. After wallet changes, the last added or updated card is selected, and the merchant is notified via callback.

Hosted Environment​

  • Merchants must poll session details to get the selected payment method ID, which is attached once the user confirms their selection.
  • The payment method selector page includes two additional buttons: Confirm payment method and Cancel.
  • If Confirm payment method button is clicked without a selection, an error message is displayed.
  • Once a selection is made and Confirm payment method is clicked, the selected payment method is added to the session, and the session is marked complete.