On This Page

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.
RELATED TO THIS PAGE