Adding the Payment Application and Payment Acceptance

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
<div>
 components that are replaced with
Unified Checkout
’s
iframes
.
IMPORTANT
If you do not specify a location for the payment acceptance page, it is placed in the side bar.

JavaScript Example: Setting Up with Full Sidebar

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

var cc = document.getElementById("captureContext").value;
var showArgs = {
  containers: {
    paymentSelection: "#buttonPaymentListContainer"
  }
};
Accept(cc)
  .then(function(accept) {
    return accept.unifiedPayments();
  })
  .then(function(up) {
    return up.show(showArgs);
  })
  .then(function(tt) {
    transientToken.value = tt;
    authForm.submit();
  });
Adding the Payment Application and Payment Acceptance

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");
  });
Adding the Payment Application and Payment Acceptance