On This Page

`Unified Checkout` with Complete Mandate

This section contains the capture context and JavaScript examples to integrate Unified Checkout into your e-commerce page. You can use these examples to collect your customer'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 Prefer Authorization

Capture Context Request

{
  "targetOrigins" : [ "https://the-up-demo.appspot.com" ],
    "clientVersion": "0.31",
    "buttonType": "CHECKOUT_AND_CONTINUE",
    "allowedCardNetworks": [
        "VISA",
        "MASTERCARD"
    ],
    "allowedPaymentTypes": [
        "PANENTRY",
        "CLICKTOPAY",
        "APPLEPAY",
        "GOOGLEPAY"
    ],
    "completeMandate": {
        "type": "PREFER_AUTH"
        
    },
    "country": "US",
    "locale": "en_US",
    "captureMandate": {
        "billingType": "FULL",
        "requestEmail": true,
        "requestPhone": true,
        "requestShipping": true,
        "shipToCountries": [
            "US",
            "GB"
        ],
        "showAcceptedNetworkIcons": true
    },
"data":
 {
    "orderInformation": {
        "billTo": {
            "country": "US",
            "firstName": "NEW",
            "lastName": "Test",
            "phoneNumber": "1234567890",
            "address2": "Desk M3-5573",
            "address1": "901 Metro Center Blvd",
            "buildingNumber": "150",
            "postalCode": "94404",
            "locality": "Foster City",
            "administrativeArea": "CA",
            "email": "[email protected]"
        },
        "shipTo": {
            "country": "US",
            "firstName": "NEW",
            "lastName": "Test",
            "address2": "Desk M3-5573",
            "address1": "901 Metro Center Blvd",
            "buildingNumber": "150",
            "postalCode": "94404",
            "locality": "Foster City",
            "administrativeArea": "CA"
        },
        "amountDetails": {
            "totalAmount": "13.00",
            "currency": "USD"
        }
    },
    "clientReferenceInformation": {
      "code": "TAGX001"
    }
  }
}

JavaScript

<script type="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();
  </script>

Unified Checkout with Complete Mandate

Example: Unified Checkout with Prefer Authorization

`Unified Checkout` with Complete Mandate

Example: `Unified Checkout` with Prefer Authorization