Server-Side Set Up

This section contains the information you need to set up your server. Initializing
Unified Checkout
 within your webpage begins with a server-to-server call to the sessions API. This step authenticates your merchant credentials, and establishes how the
Unified Checkout
 frontend components will function. The sessions API request contains parameters that define how
Unified Checkout
 performs.
The server-side component provides this information:
  • A transaction-specific public key is used by the customer's browser to protect the transaction.
  • An authenticated context description package that manages the payment experience on the client side. It includes available payment options such as card networks, payment interface styling, and interaction methods.
The functions are compiled in a JSON Web Token (JWT) object referred to as the
capture context
. For information JSON Web Tokens, see JSON Web Tokens.

Capture Context

The capture context request is a signed JSON Web Token (JWT) that includes all of the merchant-specific parameters. This request tells the frontend JavaScript library how to behave within your payment experience. For information on JSON Web Tokens, see JSON Web Tokens.
You can define the payment cards and digital payments that you want to accept in the capture context. Use the
allowedCardNetworks
 field to define the card types.
Available card networks for card entry:
  • American Express
  • Diners Club
  • Discover
  • JCB
  • Mastercard
  • Visa
IMPORTANT
Click to Pay
 supports American Express, Mastercard, and Visa for saved cards.
Use the
allowedPaymentTypes
 field to define the digital payment methods.
Example:
{
          "targetOrigins" : [ "https://www.test.com" ],
          "clientVersion" : "0.19",
          "allowedCardNetworks" : [ "VISA", "MASTERCARD", "AMEX" ],
          "allowedPaymentTypes" : ["CLICKTOPAY"],
          "country" : "US",
          "locale" : "en_US",
          "captureMandate" : {
          "billingType" : "FULL",
          "requestEmail" : true,
          "requestPhone" : true,
          "requestShipping" : true,
          "shipToCountries" : [ "US", "GB" ],
          "showAcceptedNetworkIcons" : true
          },
          "orderInformation" : {
          "amountDetails" : {
          "totalAmount" : "1.01",
          "currency" : "USD"
          },
          }
          }
This diagram shows how elements of the capture context request appear in the card entry form.

Figure:

Anatomy of a Manual Card Entry Form
Image of the capture context request code and how it appears in the entry form elements.
For more information on requesting the capture context, see Capture Context API.
Server-Side Set Up