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

More information, see CPS Test Conditions

API Options

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

Properties

Events

CSS Custom Properties