paymentech-ui

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

Credit/Debit cards supported only.

Testing Credit Cards

Usage

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="https://uicomponent.live.payments.maginfrastructure.com/payments.js"></script>
<script>
el = document.querySelector('paymentech-ui')
function makePayment (nonce) {
   fetch('https://example.com/checkout')
     .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) {
   console.log(event.detail)
   // { nonce: "kz4r7k_7c2fsp_4qyf6q_wb5vmy_6y8", ... }
   makePayment(event.detail.nonce)
})

</script>

Debugging

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
4788250000028291VISAValid
5454545454545454MasterCardValid
371449635398431American ExpressValid

More information, see CPS Test Conditions

API Options

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

Properties

PropertyAttributeTypeDefaultDescription
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
configurableboolean
enumerableboolean
errorMessagedata-error-messagestring""Display a Paymentech related error message, ideal for server side errors when attempting transactions.

Events

EventDescription
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.
userError

CSS Custom Properties

PropertyDescription
--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)