Adding the Payment Application and Payment Acceptance {#ctp-getting-started-button-widget-intro}
================================================================================================

After you initialize the `Unified Checkout` object, you can add the payment application and payment acceptance pages to your webpage. You can attach the `Unified Checkout` embedded tool and payment acceptance pages to any named element within your HTML. Typically, they are attached to explicit named `&lt;div&gt;` components that are replaced with `Click to Pay Drop-In UI` `iframes`.
IMPORTANT If you do not specify a location for the payment acceptance page, it is placed in the sidebar.

JavaScript Example: Setting Up with Full Sidebar {#ctp-getting-started-button-widget-sidebar}
=============================================================================================

```
&lt;html&gt;
&lt;head&gt;
  &lt;script
    src="[INSERT clientLibrary VALUE HERE]"
    integrity="[INSERT clientLibraryIntegrity VALUE HERE]”
    crossorigin=”anonymous"
  &gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Unified Checkout Integration&lt;/h1&gt;
  &lt;input
    type="hidden"
    name="sessionJWT"
    value="[INSERT sessionJWT HERE]"
  /&gt;
  &lt;script type="text/javascript"&gt;
    const sessionJWT = document.getElementById("sessionJWT").value;
    
    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();
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
```

JavaScript Example: Setting Up with the Embedded Component {#ctp-getting-started-button-widget-embedded}
========================================================================================================

The main difference between using an embedded component and the sidebar is that the accept.unifiedPayments object is set to `false`, and the location of the payment screen is passed in the containers argument.

> IMPORTANT If you do not specify a location for the payment acceptance page, it is placed in the side bar.

```
&lt;html&gt;
&lt;head&gt;
  &lt;script
    src="[INSERT clientLibrary VALUE HERE]"
    integrity="[INSERT clientLibraryIntegrity VALUE HERE]"
    crossorigin="anonymous"
  &gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Unified Checkout Integration&lt;/h1&gt;
  &lt;input
    type="hidden"
    id="sessionJWT"
    name="sessionJWT"
    value="[INSERT sessionJWT HERE]"
  /&gt;
  &lt;script type="text/javascript"&gt;
    const sessionJWT = document.getElementById("sessionJWT").value;

    async function launchCheckout() {
      let client;
      let checkout;

      try {
        client = await VAS.UnifiedCheckout(sessionJWT);
        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 {
        if (checkout) {
          checkout.destroy();
        }

        if (client) {
          client.destroy();
        }
      }
    }

    launchCheckout();
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
```

{#ctp-getting-started-button-widget-embedded_codeblock_ugy_tb1_2jc}