On This Page

Loading the JavaScript Library and Invoking the Accept Function

Use the client library asset path and client library integrity value that is returned by the capture context response to invoke
Unified Checkout
 on your page.
You can retrieve these values from the
clientLibrary
 and
clientLibraryIntegrity
 fields that are returned in the JWT from
https://api.smartpayfuse-test.barclaycard
/up/v1/capture-contexts
. You can use these values to create your script tags.
You must perform this process for each transaction, as these values may be unique for each transaction. You must avoid hard-coding values for the
clientLibrary
 and
clientLibraryIntegrity
 fields to prevent client-side errors.
For example, a response from
https://api.smartpayfuse-test.barclaycard
/up/v1/capture-contexts
 would include:
"data": {
    "clientLibrary":"[EXTRACT clientLibrary VALUE from here]",
    "clientLibraryIntegrity": "[EXTRACT clientLibraryIntegrity VALUE from here]"
}
Below is an example script tag:
<script src="[INSERT clientLibrary VALUE HERE]" 
    integrity=”[INSERT clientLibraryIntegrity VALUE HERE]”
    crossorigin=”anonymous”></script>
IMPORTANT
Use the
clientLibrary
 and
clientLibraryIntegrity
 parameter values in the capture context response to obtain the
Unified Checkout
 JavaScript library URL and the integrity value. This ensures that you are always using the most up-to-date library and protects against fraud. Do not hard-code the
Unified Checkout
 JavaScript library URL or integrity value.
When you load the library, the capture context from your initial server-side request is used to invoke the accept function.

JavaScript Example: Initializing the SDK

try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);


      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }
In this example,
captureContext
 refers to the capture context JWT.

JavaScript Example: Displaying the Button List

After you initialize the
Unified Checkout
 object, you can add the payment application and payment acceptance pages to your webpage. You can attach the embedded
Unified Checkout
 tool and payment acceptance pages to any named element within your HTML. Typically, they are attached to explicit named components that are replaced with
Unified Checkout
’s iframes.
try {
    const accept = await Accept(captureContext);
    const up = await accept.unifiedPayments(sidebar);
    const tt = await up.show(showArgs);
} catch (error) {
    // merchant logic for handling issues
    console.error("something went wrong: " + error);
}
To display the
Unified Checkout
 Button List within your payment page, a call is made to the unifiedPayments.Show() function. This function accepts a JSON object that links the
<div>
 tags within your payment page to place the
Unified Checkout
 button list and optional embeddable payment page.
const showArgs = {
    containers: {
        paymentSelection: '#buttonPaymentListContainer',
        paymentScreen: '#embeddedPaymentContainer'
    }
};
The response to the unifiedPayment.show() method is a JWT data object referred to here as a transient token. The transient token contains all the payment information captured during the
Unified Checkout
 payment journey.

JavaScript Example: Client-Defined Trigger for
Click to Pay
 or PAN Entry

When you display
CLICKTOPAY
 or
PANENTRY
 as allowed payment types, you can load the UI without displaying the
Unified Checkout
 checkout button. You can do this by creating a trigger that defines what event loads the UI.
You can create a trigger by calling the
createTrigger()
 method on an existing unified payments object and pass in these two parameters:
  • The payment method that the trigger is linked to. This is required.
  • The container for the payment screen. It is required when you are in embedded mode.
    IMPORTANT
    You can create a trigger only for
    CLICKTOPAY
     or
    PANENTRY
     payment methods. 
// Example: Basic usage with full sidebar experience
// Create a trigger
const trigger = up.createTrigger("CLICKTOPAY");

// Show the trigger
// In this example, when a button in your UI is clicked
const myButton = document.getElementById("myButton");

myButton.addEventListener("click", async () => {
  const transientToken = await trigger.show();
  console.log(transientToken);
})

// Example: Payment screen in a container
// Define the container for the payment screen to be rendered in 
var options = { containers: { paymentScreen: '#paymentScreenContainer' } };
// Create the trigger
const trigger = up.createTrigger("CLICKTOPAY", options);

// Show the trigger
// In this example, when a button in your UI is clicked
const myButton = document.getElementById("myButton");

myButton.addEventListener("click", async () => {
  const transientToken = await trigger.show();
  console.log(transientToken);
})
IMPORTANT
When you use the
createTrigger()
 method for
Click to Pay
, you must create a custom UI. See Click to Pay UI.

JavaScript Example: Processing a Payment

Payment is initiated when
Unified Checkout
 captures the customer's payment information by calling the
unifiedPayment.complete()
 function and passing the transient token.
IMPORTANT
If you are updating an existing
Unified Checkout
 configuration to use the complete mandate, you must update your JavaScript to include the
unifedPayment.complete()
 function.
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);
}
}
When you include this in your capture context,
Unified Checkout
 is leveraged to initiate payment and any follow-on services that you include in your capture context request. Alternatively, you can call the payment APIs directly. See Authorizations with a Transient Token.
RELATED TO THIS PAGE