> ## Documentation Index
> Fetch the complete documentation index at: https://devzone.nayax.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Drop-in UI

The Drop-in UI component allows you to easily display a complete, pre-configured list of available Payment Methods anywhere on your website, minimizing development time for integration.

Other features of the UI include:

* Payment method additions are instantly available with no development required.
* Complete styling control over the payment method list.
* Native 3D Secure 2 support is included.

<Note>
  **Implement Drop-in UI**

  The `startPayment` method automatically handles the implementation of the Drop-in UI.
</Note>

## How it Works

The Drop-in usage flow is as follows:

1. The consumer goes to the checkout page.
2. This creates an instance of Drop-in using the session data from the server.
3. The Drop-in shows the available payment methods and collects the consumer's payment details.

   <Frame>
     <img src="https://mintcdn.com/nayax-44d6e37b/VrZ-OU46FUlkm5RA/images/docs/drop-in-ui/image1.png?fit=max&auto=format&n=VrZ-OU46FUlkm5RA&q=85&s=383e9438c27003e15f30daf002c7f504" width="511" height="435" data-path="images/docs/drop-in-ui/image1.png" />
   </Frame>
4. Once the payment is performed, the UI will present the payment result to the consumer.

   <Frame>
     <img src="https://mintcdn.com/nayax-44d6e37b/VrZ-OU46FUlkm5RA/images/docs/drop-in-ui/image2.png?fit=max&auto=format&n=VrZ-OU46FUlkm5RA&q=85&s=2ed007e894e0d9a30e68687285de171a" width="693" height="391" data-path="images/docs/drop-in-ui/image2.png" />
   </Frame>

<Note>
  **Webhook Notification**

  Your webhook server simultaneously receives the event containing the payment outcome. See [Webhook Notifications](/docs/ecom-sdk/back-end-integration/webhook-notifications) for more details.
</Note>

### Field Validation

If the consumer enters incorrect information in the fields, the drop-in UI performs a validation check and informs them of the errors. See the example below:

<Frame>
  <img src="https://mintcdn.com/nayax-44d6e37b/VrZ-OU46FUlkm5RA/images/docs/drop-in-ui/image3.png?fit=max&auto=format&n=VrZ-OU46FUlkm5RA&q=85&s=7b0f08984fc22964e3ea500892d80bd8" width="506" height="476" data-path="images/docs/drop-in-ui/image3.png" />
</Frame>

## See Also

<CardGroup cols={2}>
  <Card icon="play" title="Initiate Payments" href="/docs/ecom-sdk/front-end-integration/ecom-sdk-create-payments">
    Call startPayment to launch a payment flow with the Nayax eCom SDK.
  </Card>

  <Card icon="bell" title="Payment Callbacks" href="/docs/ecom-sdk/front-end-integration/handling-payment-results">
    Handle the SDK's payment result callbacks for Android and iOS.
  </Card>
</CardGroup>

<br />