JavaScript Example: Setting Up with the Embedded Component

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.
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"); });