generic-component
v0.1.2
Published
Stencil Component Starter
Downloads
1,193
Readme
Getting Started
Installation
- Download the latest build zip file from the releases and extract the content.
- Add script tags to your HTML and point them to the extracted files:
<script type="module" src="/build/adyen-checkout.esm.js"></script> <script nomodule src="/build/adyen-checkout.js"></script>
- Add checkout web-component to your HTML. Example:
<adyen-checkout locale="" country-code="" environment="" origin-key="" payment-methods="" amount="" payment-methods-configuration="" > <adyen-payment-method-card></adyen-payment-method-card> <adyen-payment-method-bcmc></adyen-payment-method-bcmc> <adyen-payment-method-local></adyen-payment-method-local> <adyen-payment-method-swish></adyen-payment-method-swish> </adyen-checkout>
Component documentation, including instructions, attributes, events and required properties can be found on it's folder (i.e. src/components/checkout)
- Listening to events (i.e.
onSubmit
,onChange
and etc...) can be done like this:const checkoutComponent = document.querySelector('adyen-checkout'); const logEvent = (ev) => console.log(ev); checkoutComponent.addEventListener('adyenChange', logEvent); checkoutComponent.addEventListener('adyenBrand', logEvent); checkoutComponent.addEventListener('adyenAdditionalDetails', logEvent); checkoutComponent.addEventListener('adyenSubmit', logEvent);
Note that all events will be prefixed with Adyen and the on word is removed. You can find checkout data (i.e
state
andcomponent
) in theevent.detail
- If your payment response includes an action, the checkout component includes a
createFromAction
method. You can call it this way:const checkoutComponent = document.querySelector('adyen-checkout'); checkoutComponent.createFromAction(response.action, response.resultCode);
Additional Information
If you need data to be available on your JavaScript before rendering your web-component, you can insert the web-component in your page using JavaScript and dynamically pass the values. Like this:
const node = `
<adyen-checkout
locale=${locale}
country-code=${countryCode}
environment=${environment}
origin-key=${originKey}
payment-methods='${paymentMethods}'
amount='${JSON.stringify(amount)}'
payment-methods-configuration='${paymentMethodsConfiguration}'
>
<adyen-payment-method-card enable-combo-cards installments='${installments}' show-pay-button></adyen-payment-method-card>
<adyen-payment-method-bcmc show-pay-button></adyen-payment-method-bcmc>
<adyen-payment-method-local></adyen-payment-method-local>
<adyen-payment-method-swish></adyen-payment-method-swish>
</adyen-checkout>
`;
document.body.insertAdjacentHTML("beforeend", node);
Running local demo
- Run
chmod +x ./install.sh
and then./install.sh
- Run
vagrant ssh -c "cd workspace && yarn run server"
You can access the demo by visiting the url
http://localhost:3024/
on your browser. The url acceptsvalue
,currency
,countryCode
andlocale
as query parameters. i.e.:http://localhost:3024/?value=1000¤cy=EUR&countryCode=NL&locale=nl_NL
If you need to add more payment methods, you can edit the
./src/index.html