perlas-init

Perlas Payments widget.

Install

yarn add perlas-init / npm install perlas-init

Usage

/** @jsx jsx */
// Step 1. Import needed functions
import { getPerlasDataForInit, initPerlas } from "perlas-init";

// Step 2. In the component pass required data to get src and formed object to pass into iframe via postmessage
const { src, data } = getPerlasDataForInit({
  accessToken: JSON.parse(xhr?.response)?.access_token, //required parameter,
  environment: "test", // default - "prod", could also be these: "test", "sandbox", "staging", "localhost"
  buttonRadius: 50, //If not provided, defaults to 6
  externalPaymentUrl: "https://www.lrytas.lt", // If provided, must start with "https://". If provided, no cash payment option will be available.
  fontFamily: "Montserrat", // If provided without fontFamilyUrls options, google font will be used.
  fontFamilyUrls: {
    // Two options to provide your custom fonts: regular and bold. If this is provided, provide fontFamily name prop above as well.
    regular: {
      ttf: "https://test-api-public.perlas.lt/storage/fonts/skud-webfont.ttf",
      woff: "https://test-api-public.perlas.lt/storage/fonts/skud-webfont.woff",
      // accepted formats include ttf, woff, woff2, otf and eot.
    },
    bold: {
      ttf: "https://test-api-public.perlas.lt/storage/fonts/skud-webfont.ttf",
      woff: "https://test-api-public.perlas.lt/storage/fonts/skud-webfont.woff",
      // accepted formats include ttf, woff, woff2, otf and eot.
    },
  },
  fontSizes: {
    // defaultFonts object added after PerlasGoThirdPartyInit function
    // in the project mainly these are used: button, h3, h4, h5 (main project title), h6, subtitle1, body1 (main text size in app), body2 and caption (small text)
    // changing font weights or line heights might not affect every element as there are custom stylings added or other cases, but it should be okay with font sizes and other props like (general fontSize, htmlFontSize)
    // changing font family for each item is not possible because if custom fontFamily will be provided, this will be used for all items
    // more info on typogrpahy provided here: https://mui.com/material-ui/customization/typography/
    // pass custom values that you would like to overwrite like so below (as from what has been tested, no need to provide all values (f.e. fontWeight, lineHeight) if only for example fontSize needs to be changed):
    button: {
      fontSize: "0.8rem",
    },
    body1: {
      fontSize: "1rem",
    },
    subtitle1: {
      fontSize: "1.25rem",
      lineHeight: 1.5,
    },
    h5: {
      fontSize: "1.7rem",
      lineHeight: 1.5,
    },
    h6: {
      fontSize: "1.25rem",
      lineHeight: 1.7,
    },
  },
  imageUrls: {
    // in order for images to look okay, they should be in svg (sizes either from example below or https://savitarna.perlasgo.lt) and they should be take full height
    success:
      "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg", // successfull payment image
    failure:
      "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg", // failed payment image
    paymentHistory:
      "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg", // mobile payment history image
    firstPayment:
      "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg", //make first payment image
  },
  serviceIconsColors: {
    // provide icons colors like below (if certain icon color is provided, then its color and stroke is needed)
    // defaultServiceIcons added just after PerlasGoThirdPartyInit function
    electricity: { color: "#f9ec4b", stroke: "#7c702c" },
    telecommunications: { color: "#d742f5", stroke: "#4287f5" },
    financialServices: { color: "#d742f5", stroke: "#42f55a" },
  },
  palette: {
    // provide colors as below to overwrite them (defaultPalette added after PerlasGoThirdPartyInit function)
    // more info on palette provided here: https://mui.com/material-ui/customization/palette/
    primary: {
      main: "#f54281",
      contrastText: "#fff",
      dark: "#a8327b",
      light: "#050105",
    },
    secondary: {
      main: "#fcba03", //secondary white btn color
      contrastText: "#505f6a",
      dark: "#e9f022", // not used directly
      light: "#ffffff", // not used directly
      //contrastText is not used directly but necessary for text in secondary btn
    },
    catskillWhite: {
      main: "#f8f6f5",
    },
    neutral: {
      main: "#d5e3eb",
    },
  },
  serviceId: "350", // tele2 service_id
});

// Step 3. (Optional) - Initialise widget by this function below. It passes data to iframe and initialises post message listening in parent page (listening message events from iframe). Initialise only after src and data exist.
useEffect(() => {
  if (src && data) {
    initPerlas({ src, data });
  }
}, [src, data]);

render(
  // Step 4. Add iframe with id="perlasgo-third-party"
  !!src && (
    <iframe
      title="third-party"
      style={{ width: "100%", height: "100%", minHeight: "100vh" }}
      id="perlasgo-third-party"
      src={src}
    ></iframe>
  )
);