question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nextjs React Typescript customization example

See original GitHub issue

Issue Description

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?

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
djeka07commented, Oct 14, 2021

@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.

1reaction
ribeiroguilhermecommented, Oct 14, 2021

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Basic Features: TypeScript - Next.js
Next.js provides an integrated TypeScript experience, including zero-configuration set up and built-in types for Pages, APIs, and more.
Read more >
Build a Next.js App with React & TypeScript - YouTube
How to build a website with the Next.js React framework using TypeScript.TL;DR: npx create-next-app@latest --ts; cd my-app; npm run build; ...
Read more >
Nextjs with Typescript integration and example - Medium
This tutorial will show how to integrate TypeScript to your Nextjs applications. For this purpose we should install required typescript libraries for our ......
Read more >
Using Next.js with TypeScript - LogRocket Blog
In this tutorial, learn how to use Next.js with TypeScript to build a modern stack for high-quality, search-optimized apps.
Read more >
A Guide for Next.js with TypeScript - Refine Dev
With this, you can now start creating files with .ts and .tsx extensions in your application. Usage example. import React ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found