On This Page

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

When you are presenting
CLICKTOPAY
 or
PANENTRY
 as allowed payment types, you can load the UI without displaying the
Checkout with Card
 button by creating a trigger that defines what 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. It is required.
    IMPORTANT
    You can create a trigger only for
    CLICKTOPAY
     or
    PANENTRY
     payment methods.
  • The container for the payment screen. It is required when you are in embedded mode.
// 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);
})