# generic-component

> Stencil Component Starter

Latest version **0.1.2** (published 2020-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install generic-component
pnpm add generic-component
yarn add generic-component
bun add generic-component
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2020-03-12 |
| First published | 2019-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kadobot |

## Links

- npm: https://www.npmjs.com/package/generic-component
- npm.io page: https://npm.io/package/generic-component

## Dependencies (5)

- [redux](https://npm.io/package/redux.md) ^4.0.5
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.3.0
- [redux-logger](https://npm.io/package/redux-logger.md) ^3.0.6
- [@stencil/redux](https://npm.io/package/@stencil/redux.md) ^0.1.2
- [@adyen/api-library](https://npm.io/package/@adyen/api-library.md) 2.2.1

## Recent versions

- 0.1.2 (latest) — 2020-03-12
- 0.1.1 — 2020-03-11
- 0.1.0 — 2020-03-11
- 0.0.28 — 2020-03-10
- 0.0.27 — 2020-03-09
- 0.0.26 — 2020-03-09
- 0.0.25 — 2020-03-09
- 0.0.24 — 2020-03-05
- 0.0.23 — 2020-03-02
- 0.0.22 — 2020-02-28
- 0.0.21 — 2020-02-25
- 0.0.20 — 2020-02-25
- 0.0.19 — 2020-02-21
- 0.0.18 — 2020-02-21
- 0.0.17 — 2020-02-19
- … 16 more at https://npm.io/package/generic-component/versions

## README

<!-- Auto Generated Below -->
# Getting Started
## Installation
1) Download the [latest build zip file](https://github.com/Adyen/adyen-generic-component/releases/download/latest/build.zip) 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](./src/components/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: 
 ```javascript
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/`](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`](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`](./src/index.html)

---
_Source: https://npm.io/package/generic-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._