On This Page

{#jumplink-list}  
[Markdown](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/ctp-getting-started-cs-setup-intro/ctp-getting-started-button-widget-intro/ctp-getting-started-button-widget-embedded.md)  
Filter  
FILTER BY TAG

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.

```
var authForm = document.getElementById("authForm");
var transientToken = document.getElementById("transientToken");

var cc = document.getElementById("captureContext").value;
var showArgs = {
    containers: {
        paymentSelection: "#buttonPaymentListContainer",
        paymentScreen: "#embeddedPaymentContainer"
    }
};
Accept(cc)
    .then(function(accept) {
        // Gets the UC instance (e.g. what card brands I requested, any address information I pre-filled etc.)
        return accept.unifiedPayments();
    })
    .then(function(up) {
        // Display the UC instance
        return up.show(showArgs);
    })
    .then(function(tt) {
        // Return transient token from UC's UI to our app
        transientToken.value = tt;
        authForm.submit();
    }).catch(function(error) {
        //merchant logic for handling issues
        alert("something went wrong");
    });
```

RELATED TO THIS PAGE