Enviso Pay template Libema

EnvisoPay.tsx

"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import Script from "next/script";

import { ShopError } from "@features/shop/components/ShopError";
import type { EnvisoPayCustomer } from "@services/enviso/types";
import { useGetSession } from "@services/session/endpoints";

import { EnvisoPaymentScripts } from "../components/EnvisoScripts";

export default function EnvisoPayPageTemplate() {
  const params = useSearchParams();
  const payId = params.get("payId");

  const { data: session } = useGetSession<EnvisoPayCustomer>();
  const sessionToken = payId ?? session?.sessionToken;

  const [paymentStatus, setPaymentStatus] = useState<null | {
    reference: string;
    status: string;
    method: string;
  }>(null);

  const [paymentError, setPaymentError] = useState<null | string>(null);

  useEffect(() => {
    const paymentElement = document.getElementById("enviso-pay-el");
    if (!paymentElement) return;

    const handleVerified = (event: any) => {
      console.log("Verified", event);

      setPaymentStatus({
        reference: event.detail.paymentReference,
        status: event.detail.paymentStatus,
        method: event.detail.paymentMethod.type,
      });
    };

    const handleFailed = (event: any) => {
      console.error("Payment failed", event);

      setPaymentError("Payment failed");
    };

    const handleVerificationFailed = (event: any) => {
      console.error("Verification failed", event);

      setPaymentError("Payment verification failed");
    };

    paymentElement.addEventListener("paymentverified", handleVerified);
    paymentElement.addEventListener("paymentfailed", handleFailed);
    paymentElement.addEventListener(
      "paymentverificationfailed",
      handleVerificationFailed,
    );

    return () => {
      paymentElement.removeEventListener("paymentverified", handleVerified);
      paymentElement.removeEventListener("paymentfailed", handleFailed);
      paymentElement.removeEventListener(
        "paymentverificationfailed",
        handleVerificationFailed,
      );
    };
  }, []);

  return (
    <>
      {paymentStatus || paymentError ? (
        <>
          {paymentStatus && (
            <div className="text-green-600 mt-4">
              Payment {paymentStatus.status} via {paymentStatus.method} (Ref:{" "}
              {paymentStatus.reference})
            </div>
          )}

          {paymentError && <ShopError errorKey={paymentError} />}
        </>
      ) : (
        <>
          <enviso-payment id="enviso-pay-el" session-token={sessionToken} />
          <enviso-style hidden>
            {`/* This markup is applied to all enviso-elements */
              :host {
                color: red;
                --enviso-primary-color: purple;
                --color-legacy-primary: red;
                --enviso-secondary-color: blue;
              }
            `}
          </enviso-style>
          <enviso-style for="enviso-payment" hidden>
            {`/* This markup is applied to the enviso-payment element */
              :host {
                font-weight: bold;
                --enviso-primary-color: purple;
                --color-legacy-primary: red;
                --enviso-secondary-color: blue;
              }
              
              :host button {
                background-color: red;
              }

              .enviso-payment-inner-wrapper {
                background: pink;
              }

              .enviso-payment-inner-wrapper .adyen-checkout__button.adyen-checkout__button--standalone.adyen-checkout__button--pay {
                background-color: red !important;
              }

              .enviso-payment-inner-wrapper .adyen-checkout__button {
                background-color: green !important;
              }

              .adyen-checkout__button {
                background-color: var(--color-legacy-primary);
              }

              enviso-adyen-payment .adyen-checkout__button {
                background-color: brown;
              }

              .enviso-payment-inner-wrapper button {
                background-color: yellow !important;
              }
            `}
          </enviso-style>
        </>
      )}

      <Script
        dangerouslySetInnerHTML={{
          __html: `
            if (window.enviso && window.enviso.load) {
              window.enviso.load([
                "https://widget.staging-enviso.io/build-ts/components/payment/enviso-payment-element.js",
                "https://widget.staging-enviso.io/build-ts/components/common/enviso-style-element.js"
              ]);
            } else {
              console.warn("Enviso not ready on enviso-scripts-loaded");
            }
          `,
        }}
        id="enviso-payment-loader"
        strategy="afterInteractive"
      />
    </>
  );
}

When cancelling the payment, there doesn't seem to be an option to continue anymore.

This callback function

    const handleVerificationFailed = (event: any) => {
      console.error("Verification failed", event);

      setPaymentError("Payment verification failed");
    };

From the console.log event returns

{
  ...,
  detail: {
    canRetry: false
  }
}

The styling doesn't apply on the buttons, but we do not seem to know how to target them correctly.