windcave-ui

Allow your projects to take payments with Windcave.

Credit/Debit cards supported only.

Testing Credit Cards

Usage

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

Consume the windcaveTransactionFinished event, which gets emitted when a transaction is chosen and performed by the user. Please note that this event only informs that the transaction has occurred, but it does not show its status. To do so, you need to obtain the transaction result.

<windcave-ui submit-card-link="https://test-submit-link.com"></stripe-ui>
<script src="https://uicomponent.live.pci.cavu-tech.com/payments.js"></script>
<script>
el = document.querySelector('windcave-ui')
function getTransactionResult () {
   fetch('https://example.com/transactions')
     .then(response => response.json())
     .then(result => {
       // Pass the result through to the component.

       el.dispatchEvent(new CustomEvent('complete', { detail: result }))
       if (result.success) {
         alert('Payment successful')
       } else {
         el.dataset.error = 'There was an error'
       }
     })
};

el.addEventListener('windcaveTransactionFinished', function(event) {
   console.log(event.detail);
   getTransactionResult();
});

</script>

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