On This Page
REST API

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