`Click to Pay Drop-In UI` Flow {#ctp_uc_getting_started_integration_flow}
=========================================================================

To integrate `Click to Pay Drop-In UI` into your platform, you must follow several integration steps. This section gives a high-level overview of how to integrate and launch `Click to Pay Drop-In UI` on your webpage and process a transaction. You can find the detailed specifications of the APIs later in this document.

1. You send a server-to-server API request for a capture context. This request is fully authenticated and returns a JSON Web Token (JWT) that is necessary to invoke the frontend JavaScript library. For information on setting up the server side, see [Server-Side Set Up](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/ctp-getting-started-ss-setup.md "").
2. You invoke the `Unified Checkout` JavaScript library using the JWT response from the capture context request. For information on setting up the client side, see [Client-Side Set Up](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/ctp-getting-started-cs-setup-intro.md "").
3. You use the response from the `Click to Pay Drop-In UI` to retrieve payment credentials for payment processing or other steps.
   This figure illustrates the system's payment flow.

#### Figure: {#ctp_uc_getting_started_integration_flow_fig_uc-payment-flow}

`Click to Pay` Payment Flow  
![Diagram that shows the sequence and flow of a Click to Pay payment.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/click-to-pay/images/ctp-srvorch-authdm-gateway-600x680.svg/jcr:content/renditions/original)  
For more information on the specific APIs referenced, see these topics:

* [Sessions API - Capture Context](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/ctp-setup-capture-context.md "")
* [Payment Details API](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/ctp-token-get-pymnt-details.md "")
* [Payment Credentials API](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/ctp-token-get-pymnt-credentials.md "")