On This Page

{#jumplink-list}  
[Markdown](/docs/vas/en-us/click-to-pay/developer/all/rest/click-to-pay/ctp-uc-getting-started-integration-flow.md)  
Filter  
FILTER BY TAG

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

To integrate the `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/vas/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/vas/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/new-documentation/documentation/en-us/topics/payments-processing/card-processing/click-to-pay/images/ctp-sequence-diagram.svg/jcr:content/renditions/original)  
For more information on the specific APIs referenced, see these topics:

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