Generic-component NPM

Getting Started

Installation

1) Download the latest build zip file from the releases and extract the content. 2) Add script tags to your HTML and point them to the extracted files:

```html
<script type="module" src="/build/adyen-checkout.esm.js"></script>
<script nomodule src="/build/adyen-checkout.js"></script>
```

3) Add checkout web-component to your HTML. Example:

```html
<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](./src/components/checkout))

4) Listening to events (i.e. onSubmit, onChange and etc...) can be done like this:

 ```javascript
  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` and `component`) in the `event.detail`

5) If your payment response includes an action, the checkout component includes a createFromAction method. You can call it this way:

 ```javascript
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

1) Run chmod +x ./install.sh and then ./install.sh 2) 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 accepts value, currency, countryCode and locale as query parameters. i.e.: http://localhost:3024/?value=1000&currency=EUR&countryCode=NL&locale=nl_NL
If you need to add more payment methods, you can edit the ./src/index.html