Nextjs React Typescript customization example

This is the best I could come up with:

import AdyenCheckout from "@adyen/adyen-web"
import React, { useLayoutEffect, useRef } from "react"

const Card = () => {
  const divRef = useRef<HTMLDivElement>(null)

  const onload = () => {
    // @ts-expect-error window.AdyenCheckout hack
    const adyenCheckout: AdyenCheckout = new window.AdyenCheckout({
      environment: "test",
      clientKey: "test",
    })

    if (divRef.current) {
      const card = adyenCheckout.create("card").mount(divRef.current)
      console.log(card)
    }
  }

  useLayoutEffect(() => {
    const script = document.createElement("script")
    script.src = "https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/4.7.3/adyen.js"
    script.async = true
    script.onload = onload
    document.body.appendChild(script)
  })

  return <div ref={divRef}>card</div>
}

const Adyen = () => {
  return <div suppressHydrationWarning>{process.browser && <Card />}</div>
}

export default Adyen

Is there a less hack way to add Adyen to a Nextjs React Typescript project? What about style customization?

[djeka07]

@incompletude , here is my styles, maybe it can help you.

export const AdyenContainer = styled.div`
  ${({ theme }) => `
    .adyen-checkout__payment-method {
      background-color: ${theme.palette.grey[100]};
      border-radius: 3px;
    }
    .adyen-checkout__button--pay {
      background-color: ${theme.palette.primary.main};
    }
    .adyen-checkout__checkbox__input {
      background-color: ${theme.palette.primary.main};
    }
    .adyen-checkout__payment-method__radio--selected {
      background-color: ${theme.palette.primary.main};
    }
    .adyen-checkout__input {
      border-radius: 3px;
      border: 0;
      box-shadow: 0px 0px 0px 1px ${theme.palette.grey[500]};
      transition: all 0.3s ease-in-out;
    }
    .adyen-checkout__input--focus,
    .adyen-checkout__input--focus:hover,
    .adyen-checkout__input:active,
    .adyen-checkout__input:active:hover,
    .adyen-checkout__input:focus,
    .adyen-checkout__input:focus:hover {
      border: 0;
      box-shadow: 0px 0px 0px 2px ${theme.palette.primary.main}};
      transition: all 0.3s ease-in-out;
    }
    .adyen-checkout__label--focused .adyen-checkout__label__text {
      color: ${theme.palette.primary.main};
    }
    .adyen-checkout__error-text {
      background-color: ${theme.palette.error.light};
      margin-top: 0;
      color: ${theme.palette.error.dark};
      padding: 10px;
      position: relative;
      border-radius: 3px;
      font-size: ${theme.typography.size.small};
      :after {
        position: absolute;
        content: "";
        border-color: transparent transparent rgb(248, 215, 218);
        border-style: solid;
        border-width: 0px 14px 14px;
        top: -10px;
        left: 6px;
        }
      }
      .adyen-checkout__label__text--error {
        color: ${theme.palette.error.dark};
    }
    }
  `}
`;

The AdyenContainer is the element that i mount the dropin on.

 <AdyenContainer ref={containerRef} />

I used the form from https://docs.adyen.com/online-payments/web-drop-in/customization#styling-examples to find the classes i needed to override.

[ribeiroguilherme]

@incompletude @djeka07 thanks for sharing your Next.js examples.

More about the styles customization can be found here: https://docs.adyen.com/online-payments/web-drop-in/customization#styling

If you guys find any issue integrating the library into your projects, feel free to get back to us.