Unified Checkout
Integration
Examples

On This Page
This section includes examples that show how to integrate
Unified Checkout
 within your e-commerce experience and use the
unifiedPayment.complete()
 method.

Unified Checkout
 with Authorization

This section contains the capture context and JavaScript examples that can be used to integrate
Unified Checkout
 into your e-commerce page. You can use these examples to collect your consumer's payment information and process an authorization. You must initiate a capture request to move funds and complete the transaction.
For information on the capture context, see Capture Context API.

Example:
Unified Checkout
 with Authorization

Unified Checkout
 with Sale

This section contains the capture context and JavaScript examples that can be used to integrate
Unified Checkout
 into your ecommerce page. You can use these examples to collect your consumer's payment information and process a sale.
For information on the capture context, see Capture Context API.

Example:
Unified Checkout
 with Sale

Unified Checkout
 with Sale and
Decision Manager

This section contains the capture context and JavaScript examples that can be used to integrate
Unified Checkout
 into your e-commerce page. You can use these examples to collect your consumer's payment information and process a sale while also invoking the
Decision Manager
 fraud solution. Before the sale is initiated,
Decision Manager
 is invoked for fraud screening.
For information on the capture context, see Capture Context API.

Example:
Unified Checkout
 with Sale and
Decision Manager

Unified Checkout
 without Service Orchestration

This section contains the capture context and JavaScript examples that can be used to integrate
Unified Checkout
 into your e-commerce page. You can use these examples to collect your consumer's payment information. Payment processing and service orchestration are completed through the back end of the integrator.
For information on the capture context, see Capture Context API.

Example:
Unified Checkout
 without Service Orchestration

Echeck Payment with a Transient Token

This section contains an example request for making a payment with an eCheck using a transient token. To make an eCheck payment with a transient token, these requirements must be met:
  • The
    paymentType.name.value
     field value must be set to
    CHECK
     in the transient token.
  • You must include the
    paymentInformation.paymentType.name
     field in your request and the value must be set to
    CHECK
     in your request.

Example: Echeck Payment with a Transient Token

Light Dark
Capture Context Request
12345678910111213141516171819202122232425262728293031323334353637
{"clientVersion": "0.26",
  "targetOrigins": [
    "https://yourCheckoutPage.com"
  ],
  "allowedCardNetworks": [
    "VISA",
    "MASTERCARD",
    "AMEX"
  ],
  "allowedPaymentTypes": [
    "APPLEPAY",
    "CLICKTOPAY",
    "GOOGLEPAY",
    "PAZE"
  ],
  "country": "US",
  "locale": "en_US",
  "captureMandate": {
    "billingType": "FULL",
    "requestEmail": true,
    "requestPhone": true,
    "requestShipping": true,
    "shipToCountries": [
      "US",
      "GB"
    ],
    "showAcceptedNetworkIcons": true
  },
  "orderInformation": {
    "amountDetails": {
      "totalAmount": "21.00",
      "currency": "USD"
    }
  },
  "completeMandate": {
    "type": "AUTH"
  }}
JavaScript
123456789101112131415161718192021222324
<="text/javascript">
    const sidebar = true;
    const captureContext = document.getElementById("captureContext").value;
    const showArgs = {
      containers: { paymentSelection: "#buttonPaymentListContainer" }
    };
    
    async function launchCheckout() {
      try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);
        const tt = await up.show(showArgs);
        const completeResponse = await up.complete(tt);
    
        console.log(completeResponse); // merchant logic for handling complete response
      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }
    }

    // Call the function
    launchCheckout();
  </>
Light Dark
Capture Context Request
12345678910111213141516171819202122232425262728293031323334353637
{"clientVersion": "0.26",
  "targetOrigins": [
    "https://yourCheckoutPage.com"
  ],
  "allowedCardNetworks": [
    "VISA",
    "MASTERCARD",
    "AMEX"
  ],
  "allowedPaymentTypes": [
    "APPLEPAY",
    "CLICKTOPAY",
    "GOOGLEPAY",
    "PAZE"
  ],
  "country": "US",
  "locale": "en_US",
  "captureMandate": {
    "billingType": "FULL",
    "requestEmail": true,
    "requestPhone": true,
    "requestShipping": true,
    "shipToCountries": [
      "US",
      "GB"
    ],
    "showAcceptedNetworkIcons": true
  },
  "orderInformation": {
    "amountDetails": {
      "totalAmount": "21.00",
      "currency": "USD"
    }
  },
  "completeMandate": {
    "type": " CAPTURE"
  }}
JavaScript
123456789101112131415161718192021222324
<="text/javascript">
    const sidebar = true;
    const captureContext = document.getElementById("captureContext").value;
    const showArgs = {
      containers: { paymentSelection: "#buttonPaymentListContainer" }
    };
    
    async function launchCheckout() {
      try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);
        const tt = await up.show(showArgs);
        const completeResponse = await up.complete(tt);
    
        console.log(completeResponse); // merchant logic for handling complete response
      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }
    }

    // Call the function
    launchCheckout();
  </>
Light Dark
Capture Context Request
1234567891011121314151617181920212223242526272829303132333435363738
{"clientVersion": "0.26",
  "targetOrigins": [
    "https://yourCheckoutPage.com"
  ],
  "allowedCardNetworks": [
    "VISA",
    "MASTERCARD",
    "AMEX"
  ],
  "allowedPaymentTypes": [
    "APPLEPAY",
    "CLICKTOPAY",
    "GOOGLEPAY",
    "PAZE"
  ],
  "country": "US",
  "locale": "en_US",
  "captureMandate": {
    "billingType": "FULL",
    "requestEmail": true,
    "requestPhone": true,
    "requestShipping": true,
    "shipToCountries": [
      "US",
      "GB"
    ],
    "showAcceptedNetworkIcons": true
  },
  "orderInformation": {
    "amountDetails": {
      "totalAmount": "21.00",
      "currency": "USD"
    }
  },
  "completeMandate": {
    "type": " CAPTURE",
    "decisionManager": true
  }}
JavaScript
123456789101112131415161718192021222324
<="text/javascript">
    const sidebar = true;
    const captureContext = document.getElementById("captureContext").value;
    const showArgs = {
      containers: { paymentSelection: "#buttonPaymentListContainer" }
    };
    
    async function launchCheckout() {
      try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);
        const tt = await up.show(showArgs);
        const completeResponse = await up.complete(tt);
    
        console.log(completeResponse); // merchant logic for handling complete response
      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }
    }

    // Call the function
    launchCheckout();
  </>
Light Dark
Capture Context Request
12345678910111213141516171819202122232425262728293031323334
{"clientVersion": "0.26",
  "targetOrigins": [
    "https://yourCheckoutPage.com"
  ],
  "allowedCardNetworks": [
    "VISA",
    "MASTERCARD",
    "AMEX"
  ],
  "allowedPaymentTypes": [
    "APPLEPAY",
    "CLICKTOPAY",
    "GOOGLEPAY",
    "PAZE"
  ],
  "country": "US",
  "locale": "en_US",
  "captureMandate": {
    "billingType": "FULL",
    "requestEmail": true,
    "requestPhone": true,
    "requestShipping": true,
    "shipToCountries": [
      "US",
      "GB"
    ],
    "showAcceptedNetworkIcons": true
  },
  "orderInformation": {
    "amountDetails": {
      "totalAmount": "21.00",
      "currency": "USD"
    }
  }}
JavaScript
123456789101112131415161718192021
<="text/javascript">
    const sidebar = true;
    const captureContext = document.getElementById("captureContext").value;
    const showArgs = {
      containers: { paymentSelection: "#buttonPaymentListContainer" }
    };
    
    async function launchCheckout() {
      try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);
        const tt = await up.show(showArgs);
        console.log(tt); // merchant logic for passing the Transient token to their backend for service orchestration
      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }
    }
    // Call the function
    launchCheckout();
  </>
Light Dark
Echeck Payment Request with a Transient Token
12345678910111213141516171819202122
{"clientReferenceInformation" : {
    "code" : "tt-1745987284021"
  },
  "orderInformation" : {
    "amountDetails" : {
      "totalAmount" : "289.99",
      "currency" : "USD"
    }
  },
  "tokenInformation" : {
    "transientTokenJwt" : "eyJraWQiOiIwODV4cWN4TWdWRldxdFdnWXBPcElCcENTRGlzb0VkcCIsImFsZyI6IlJTMjU2In0.eyJpc3MiOiJGbGV4LzA3IiwiZXhwIjoxNzQ1OTg4MTgzLCJ0eXBlIjoiZ2RhLTAuMTAuMCIsImlhdCI6MTc0NTk4NzI4MywianRpIjoiMUUxQ0VJSFVVMDVESTlaNTJWWUw0S1hJVUtSQkJTUFUzT0JGN05aNDA4MEFTNzdCWTZVNjY4MTFBQTU3N0E0QSIsImNvbnRlbnQiOnsib3JkZXJJbmZvcm1hdGlvbiI6eyJiaWxsVG8iOnsibGFzdE5hbWUiOnt9LCJmaXJzdE5hbWUiOnt9LCJjb3VudHJ5Ijp7fSwicGhvbmVOdW1iZXIiOnt9LCJhZGRyZXNzMSI6e30sInBvc3RhbENvZGUiOnt9LCJsb2NhbGl0eSI6e30sImJ1aWxkaW5nTnVtYmVyIjp7fSwiYWRtaW5pc3RyYXRpdmVBcmVhIjp7fSwiZW1haWwiOnt9fSwiYW1vdW50RGV0YWlscyI6eyJ0b3RhbEFtb3VudCI6e30sImN1cnJlbmN5Ijp7fX0sInNoaXBUbyI6eyJsYXN0TmFtZSI6e30sImZpcnN0TmFtZSI6e30sImNvdW50cnkiOnt9LCJhZGRyZXNzMSI6e30sInBvc3RhbENvZGUiOnt9LCJsb2NhbGl0eSI6e30sImJ1aWxkaW5nTnVtYmVyIjp7fSwiYWRtaW5pc3RyYXRpdmVBcmVhIjp7fX19LCJwYXltZW50SW5mb3JtYXRpb24iOnsiYmFuayI6eyJyb3V0aW5nTnVtYmVyIjp7fSwiYWNjb3VudCI6eyJudW1iZXIiOnt9LCJ0eXBlIjp7fX19LCJwYXltZW50VHlwZSI6eyJuYW1lIjp7InZhbHVlIjoiQ0hFQ0sifX19fX0.SmkkDRm9yTYIUnL2R-HslqKQe0CCqm4HVFiGP78WQAE4mMkjwkd6Gu9_T0AvEcuBOTaYQUVofXmILvxlj2T_Yg8hD41LFBof32UlVeo8Wf0qF28cEnTnAXJExDVbxsJnJYTEH9iNwl_8_BTerNy0FzFVcQXJ55jBfdbJ0IeEuG685Wkc2U7Xw_nIgooL544qYmlTGx0Myjf3JVF4WVpM55HfebzDubvbTMMabhC9tA-pWSZOoC_YQcQaipr9gT1CEAeYA39ODQiHhS7EsPKITdTUmmkWqWuZ_HqFS8i8wvKr-HJ1CY0xAhEp7TzeLAxWixuLS00tTDKFZgx7obqA6g"
  },
  "processingInformation" : {
    "bankTransferOptions" : {
      "secCode" : "WEB"
    }
  },
  "paymentInformation" : {
    "paymentType" : {
      "name" : "CHECK"
    }
  }}