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
Example cards
Card Number | Card Type | Response |
---|---|---|
4111 1111 1111 1111 | VISA | Valid |
5431 1111 1111 1111 | MasterCard | Valid |
3711 1111 1111 114 | American Express | Valid |
More information, see CPS Test Conditions
API Options
Properties and events that can be used to interface with this Web Component.
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
config | data-config | { monitorApplicationId: null; monitorClientToken: null; environment: string; submitCardDetailsLinks: never[]; } | Object that contains config for Windcave monitorApplicationId, monitorClientToken are used for DataDog logs submitCardDetailsLink - link for submitting user card details This link is received while creating a session with rel="ajaxSubmitCard" See https://www.windcave.com/developer-ecommerce-drop-in#creating_a_session | |
configurable | boolean | |||
enumerable | boolean | |||
errorCode | string | "" | ||
isBasicStyling | data-basic-styling | boolean | false | This option hides certain UI elements (payment button, borders, padding) to provide more basic appearance for Windcave payment widget |
lang | data-lang | string | "en-US" | The language to use for the display text. This will determine which translated text to display. Default is 'en-US'. |
showError | data-show-error | boolean | false | This options notifies windcave widget that transaction is not successful |
Events
Event | Description |
---|---|
complete | Dispatch this event to the component when you've successfully completed a transaction or when the transaction has failed from your server. |
error | Handle the human readable display of a Server Side error, and allow the user to change payment method. List of all stripe errors. |
payload | Dispatched when the payment is payment method has been provided |
ready | Dispatched when the payment iframe has rendered successfully ready for input. |
stripePaymentIntentPayload | Dispatched when the payload is successfully retrieved from stripe sdk. Should be used to trigger sales/transactions processing. |
userError | Handle the human readable display of a Server Side error. |
windcavePaymentError | |
windcaveTransactionFinished | |
windcaveWidgetLoaded |
CSS Custom Properties
Property | Description |
---|---|
--border | Controls the main theme colors for borders not contained within the iframe. (default: #E2E8EB) |
--primary | Controls the main theme colors for elements not contained within the iframe. (default: #032f61) |