Allow your projects to take payments in as few lines of code possible.

Credit/Debit cards supported only.

Testing Credit Cards


This component requires no dependencies, use the <paymentech-ui> HTML custom element where you wish to display. Ensure to import the script on your page.

Consume the payload event, which gets emitted when a valid payment method is chosen and completed by the user.

<paymentech-ui data-config="{{ { "token": "", "environment": "" } }}"></paymentech-ui>
<script src=""></script>
el = document.querySelector('paymentech-ui')
function makePayment (nonce) {
     .then(response => response.json())
     .then(result => {
       // Pass the result through to the component.
       // Expected format:
       // {
       //  success: Boolean,
       //  verification: {
       //    status: String("processor_declined|processor_declined"),
       //    gatewayRejectionReason: String
       //  }
       // }
       el.dispatchEvent(new CustomEvent('complete', { detail: result }))
       if (result.success) {
         alert('Payment successful')
       } else {
         el.dataset.error = 'There was an error'

el.addEventListener('payload', function(event) {
   // { nonce: "kz4r7k_7c2fsp_4qyf6q_wb5vmy_6y8", ... }



To view debugging in DevTools Console, enable the debug key on LocalStorage.

localStorage.debug = "paymentech-ui:*"

Sandbox Example

See demo here

Example cards
Card NumberCard TypeResponse
371449635398431American ExpressValid

More information, see CPS Test Conditions

API Options

Properties and events that can be used to interface with this Web Component.


configdata-config{ token: null; environment: null; }{"token":null,"environment":null}Object that contains both Paymentech tokenization key token that authorizes to render a predefined payment iframe.
And the Environment status environment, values must be either test or live.

As an integrator of this component, This object is returned from the paymentGateway/client-config payments api endpoint, via your server layer.

Learn more about uiD's
errorMessagedata-error-messagestring""Display a Paymentech related error message, ideal for server side errors when attempting transactions.


completeDispatch this event to the component when you've successfully completed a transaction or when the transaction has failed from your server.
errorHandle the human readable display of a Server Side error, and allow the user to change payment method. List of all Paymentech errors.
payloadDispatched when the payment is payment method has been provided
readyDispatched when the payment iframe has rendered successfully ready for input.

CSS Custom Properties

--borderControls the main theme colors for borders not contained within the iframe. (default: #E2E8EB)
--primaryControls the main theme colors for elements not contained within the iframe. (default: #032f61)