generic-component

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:

   <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:

   <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)

4. 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 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:

   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