Step 3: Set Up the Client-Side Component {#uc-qsg-step3}
========================================================

To add the payment interface to your e-commerce site, you need to set up the client-side component using the `Unified Checkout` JavaScript library. This setup involves two primary components:

* The button widget, which lists available payment methods for the customer.
* The payment acceptance page, which captures payment information from the cardholder. This can be integrated with your webpage or added as a sidebar.

This example shows a complete client-side integration:

```
async function launchCheckout() {
  try {
    const client = await VAS.UnifiedCheckout(sessionJWT);
    const checkout = await client.createCheckout();
    const result = await checkout.mount('#payment-buttons');

    // result contains the completed payment result JWT
    // Send result to your server for verification
    sendToServer(result);
  } catch (error) {
    if (error.name === 'UnifiedCheckoutError') {
      handleError(error.reason, error.message);
    }
  } finally {
    checkout.destroy();
    client.destroy();
  }
}

launchCheckout();
```

Follow these steps to create the client-side integration:

1. Load the `Unified Checkout` JavaScript library:

   #### ADDITIONAL INFORMATION

   ```keyword
   <script src="https://apitest.visaacceptance.com/uc/v1/assets/1.0.0/UnifiedCheckout.js"></script>
   ```

   Replace the domain with the production URL for live environments:

   * **Test** : `https://apitest.visaacceptance.com`
   * **Production** : `https://api.visaacceptance.com`

   You must include the library in your webpage's HTML.

2. Initialize the SDK by calling `VAS.UnifiedCheckout()`. This returns a client instance:

   #### ADDITIONAL INFORMATION

   ```
   const client = await VAS.UnifiedCheckout(sessionJWT);
   ```

   Use the JWT obtained from the server-side setup in [Step 2: Set Up the Server-Side Component](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-qs-intro/uc-qsg-step2.md "").  
   Initialization validates the JWT signature, checks that the current page origin matches `targetOrigins`, and prepares the SDK for use. If the JWT is invalid or expired, a `UnifiedCheckoutError` is returned.

3. Create a checkout to render a list of available payment methods and handles the payment flow:

   #### ADDITIONAL INFORMATION

   ```
   const checkout = await client.createCheckout();
   ```

   When you include `autoProcessing` and set it to `true`, `mount()` returns the completed payment result:

   ```
   // Explicit auto-processing
   const checkout = await client.createCheckout({ autoProcessing: true });
   ```

   When you include it and set it to `false`, `mount()` returns a transient token that you pass to `checkout.complete()`:

   ```
   // Explicit manual processing
   const checkout = await client.createCheckout({ autoProcessing: false });
   ```

   The default value of `autoProcessing` us `true` when a completeMandate is included in the session.

4. Mount the checkout by calling `mount()`. This attaches the payment UI to your page. The argument determines the display mode:

   **Sidebar Mode**
   :
   The payment screen appears as an overlay sidebar. Pass a CSS selector for the payment button list, or omit it entirely:

       ```
       // Full sidebar — buttons and payment screen both in sidebar
       const result = await checkout.mount();

       // Buttons embedded, payment screen in sidebar
       const result = await checkout.mount('#payment-buttons');
       ```

   **Embedded Mode**
   :
   Both the button list and payment screen render inline within your page layout:

       ```
       const result = await checkout.mount({
         paymentSelection: '#payment-buttons',
         paymentScreen: '#payment-form'
       });
       ```

   **Mount Result**
   :
   When `autoProcessing` is enabled, `mount()` resolves with the completed payment result JWT once the customer finishes the payment flow.

       When `autoProcessing` is disabled, `mount()` resolves with a transient token JWT. You then call checkout.complete() to finish the payment:

       ```
       const checkout = await client.createCheckout({ autoProcessing: false });
       const transientToken = await checkout.mount('#payment-buttons');

       // Later, complete the payment
       const result = await checkout.complete(transientToken);
       ```

   **Unmount**
   :
   You can remove the payment UI from the page without destroying the checkout:

       ```
       checkout.unmount();

       // Later, mount again
       const result = await checkout.mount('#payment-buttons');
       ```

#### AFTER COMPLETING THE TASK

For more information about setting up the client side, see [Client-Side Set Up](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-getting-started-cs-setup-intro.md ""). For information about handling errors on the client side, see [Handle Errors](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-reference-test-cards/uc-handle-errors.md ""). Proceed to [Step 4: Configure Unified Checkout](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-qs-intro/uc-qsg-step4.md "").