@springmicro/cart 0.2.0-alpha.2 → 0.2.0-alpha.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite build --watch",
     "build": "rm -rf dist && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
@@ -23,9 +23,11 @@
     "@nanostores/persistent": "^0.10.1",
     "@nanostores/query": "^0.3.3",
     "@nanostores/react": "^0.7.2",
+    "@springmicro/utils": "0.2.0-alpha.4",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "^18.2.0",
+    "react-credit-cards-2": "^1.0.2",
     "react-dom": "^18.2.0",
     "unstorage": "^1.10.2"
   },
@@ -38,8 +40,11 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "formik": "^2.4.6",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "yup": "^1.4.0"
   },
-  "gitHead": "dbf0b4a9ec2e4023416638d4dcc6ac87e0d33d42"
+  "gitHead": "235b44295dc41168e78c6bc31f286ae7c4587a6c"
 }

package/src/checkout/Address.tsx

@@ -0,0 +1,246 @@
+import { FormikProps } from "formik";
+import {
+  allCountries,
+  allProvinces,
+  allCountriesReverse,
+  getRegionLabel,
+  getPostalCodeLabel,
+  getPostalCodeDefault,
+  provinces,
+} from "@springmicro/utils/address";
+import type { Alpha2Code, Province } from "@springmicro/utils/address";
+import React from "react";
+import { useEffect, useState } from "react";
+import { SxProps } from "@mui/material";
+import MenuItem from "@mui/material/MenuItem";
+import Box from "@mui/material/Box";
+import TextField, { StandardTextFieldProps } from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+
+export type AddressValues = {
+  country: string;
+  region: string;
+  line1: string;
+  line2?: string;
+  organization?: string;
+  city: string;
+  postal_code: string;
+};
+
+export type AddressFieldProps = {
+  formik: FormikProps<AddressValues & any>; // formik object might contain other values in addition to address
+  name: keyof AddressValues;
+  sx?: SxProps;
+};
+
+export function AddressCountryField({ formik, name, sx }: AddressFieldProps) {
+  /**
+   * Selects the full country name, need to do a reverse lookup for the Alpha2Code.
+   */
+  const [inputValue, setInputValue] = useState(formik.values[name] as string);
+
+  return (
+    <Autocomplete
+      sx={{ width: 300, ...sx }}
+      options={Object.values(allCountries)}
+      autoHighlight
+      getOptionLabel={(option) => option}
+      value={formik.values[name] as string}
+      onChange={(e, newValue) => {
+        // console.log(newValue)
+        formik.setValues({
+          ...formik.values,
+          region: "",
+          country: newValue as string,
+          line1: "",
+          line2: "",
+          organization: "",
+          city: "",
+          postal_code: "",
+        });
+      }}
+      onBlur={formik.handleBlur}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+      renderOption={(props, option) => (
+        <Box
+          component="li"
+          sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
+          {...props}
+        >
+          <img
+            loading="lazy"
+            width="20"
+            src={`https://flagcdn.com/w20/${allCountriesReverse[
+              option
+            ].toLowerCase()}.png`}
+            srcSet={`https://flagcdn.com/w40/${allCountriesReverse[
+              option
+            ].toLowerCase()}.png 2x`}
+            alt=""
+          />
+          {option}
+        </Box>
+      )}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          required={true}
+          name={name as string}
+          label="Country"
+        />
+      )}
+    />
+  );
+}
+
+export function AddressRegionField({ formik, name, sx }: AddressFieldProps) {
+  const [addressRegionFieldOptional, setAddressRegionFieldOptional] =
+    useState<boolean>(false);
+  const country2code = allCountriesReverse[
+    formik.values["country"] as string
+  ] as Alpha2Code;
+
+  useEffect(() => {
+    setAddressRegionFieldOptional(
+      provinces.filter(
+        (province: Province) => province.country === country2code
+      ).length === 0
+    );
+  }, [country2code]);
+
+  const baseProps = {
+    sx: { width: 300, ...sx },
+    label: getRegionLabel(country2code),
+    name: name as string,
+    id: name as string,
+    value: formik.values[name],
+    onChange: formik.handleChange,
+    onBlur: formik.handleBlur,
+  };
+
+  if (!country2code || !getRegionLabel(country2code)) {
+    return <></>;
+  }
+
+  if (addressRegionFieldOptional) {
+    return (
+      <TextField
+        {...baseProps}
+        required={false}
+        sx={{ display: "block", ...baseProps.sx }}
+      />
+    );
+  } else {
+    return (
+      <TextField {...baseProps} select required={true}>
+        {allProvinces
+          .filter((val) => val.country === country2code)
+          .map((province, i) => (
+            <MenuItem key={i} value={province.value}>
+              {province.name}
+            </MenuItem>
+          ))}
+      </TextField>
+    );
+  }
+}
+
+export function AddressStreetField({
+  formik,
+  name,
+  sx,
+  required = true,
+  lineNo,
+}: AddressFieldProps & {
+  required?: boolean;
+  lineNo?: "1" | "2" | "3" | undefined;
+}) {
+  return (
+    <>
+      <TextField
+        label={lineNo ? `Street Address ${lineNo}` : "Street Address"}
+        sx={{ width: 400, display: "block", ...sx }}
+        name={name as string}
+        id={name as string}
+        value={formik.values[name]}
+        onChange={formik.handleChange}
+        onBlur={formik.handleBlur}
+        required={required}
+      />
+    </>
+  );
+}
+
+export function AddressOrganizationNameField({
+  formik,
+  name,
+  sx,
+}: AddressFieldProps) {
+  return (
+    <TextField
+      label="Organization Name"
+      sx={{ width: 400, display: "block", ...sx }}
+      name={name as string}
+      id={name as string}
+      value={formik.values[name]}
+      onChange={formik.handleChange}
+      onBlur={formik.handleBlur}
+      required={false}
+      helperText="Only include organization name if you want it included on the address."
+    />
+  );
+}
+
+export function AddressCityField({ formik, name, sx }: AddressFieldProps) {
+  return (
+    <TextField
+      label="City"
+      sx={{ width: 400, display: "block", ...sx }}
+      name={name as string}
+      id={name as string}
+      value={formik.values[name]}
+      onChange={formik.handleChange}
+      onBlur={formik.handleBlur}
+      required={true}
+    />
+  );
+}
+
+export function AddressPostalCodeField({
+  formik,
+  name,
+  sx,
+}: AddressFieldProps) {
+  const country2code = allCountriesReverse[
+    formik.values["country"] as string
+  ] as Alpha2Code;
+
+  React.useEffect(() => {
+    if (!!getPostalCodeDefault(country2code)) {
+      formik
+        .setFieldValue(name, getPostalCodeDefault(country2code))
+        .then(() => formik.setFieldTouched(name, true));
+    }
+  }, [country2code]);
+
+  return (
+    <TextField
+      label={getPostalCodeLabel(country2code)}
+      sx={{ width: 400, display: "block", ...sx }}
+      name={name as string}
+      id={name as string}
+      value={formik.values[name]}
+      onChange={formik.handleChange}
+      onBlur={formik.handleBlur}
+      required={true}
+      helperText={
+        !!getPostalCodeDefault(country2code)
+          ? 'Our records indicate that your country does not have a postal code system, so "00000" will be used by default.'
+          : ""
+      }
+    />
+  );
+}

package/src/checkout/Billing.tsx

@@ -0,0 +1,327 @@
+import { useFormik, FormikProps } from "formik";
+import * as Yup from "yup";
+import { ChangeEventHandler, useEffect } from "react";
+import { PropsWithChildren, useState } from "react";
+import {
+  AddressCityField,
+  AddressOrganizationNameField,
+  AddressCountryField,
+  AddressPostalCodeField,
+  AddressRegionField,
+  AddressStreetField,
+  AddressValues,
+} from "./Address";
+import {
+  allCountries,
+  allCountriesReverse,
+  getPostalCodeDefault,
+} from "@springmicro/utils/address";
+import { Box, Button, TextField, Typography } from "@mui/material";
+import Cards from "react-credit-cards-2";
+import { FocusEventHandler } from "react";
+import {
+  formatCreditCardNumber,
+  formatCVC,
+  formatExpirationDate,
+  splitMonthYear,
+  expiryDateHasNotPassed,
+} from "@springmicro/utils/payment";
+
+// moved to index.ts
+// import "react-credit-cards-2/dist/es/styles-compiled.css";
+import { StripeLogoLink } from "./ProviderLogos";
+
+type CCFocus = "number" | "name" | "cvc" | "expiry";
+
+export type CreditCardValues = {
+  cvc: string;
+  expiry: string;
+  focus: CCFocus;
+  name: string;
+  number: string;
+};
+
+export type AddCardProps = {
+  stacked?: boolean;
+  error?: string;
+  address?: boolean;
+  onSubmit?: (
+    values: CreditCardValues & Partial<AddressValues>
+  ) => Promise<any>;
+};
+
+export const AddCard = ({
+  error,
+  stacked = false,
+  address = true,
+  onSubmit,
+}: AddCardProps) => {
+  const [disabled, setDisabled] = useState(true);
+
+  const initialValuesBase = {
+    cvc: "",
+    expiry: "",
+    focus: "number",
+    name: "",
+    number: "",
+  } as CreditCardValues;
+  const initialCountry = "US";
+  const initialValuesAddress = {
+    country: initialCountry ? allCountries[initialCountry] : "",
+    region: "",
+    line1: "",
+    line2: "",
+    organization: "",
+    city: "",
+    postal_code: getPostalCodeDefault(initialCountry),
+  } as AddressValues;
+
+  // const initialValues = { ...initialValuesBase, ...initialValuesAddress }
+  const initialValues = address
+    ? { ...initialValuesBase, ...initialValuesAddress }
+    : initialValuesBase;
+
+  const validationSchemaBase = {
+    expiry: Yup.string()
+      // .length(7, "Expiry date must be of the format MM/YY.")
+      .test("exp-date", "Expiry date has already passed.", (string) => {
+        if (string?.length === 5) {
+          if (string.indexOf("/") !== 2) return false;
+          const [month, year] = splitMonthYear(string);
+          return expiryDateHasNotPassed(month, year);
+        } else {
+          return true;
+        }
+      })
+      .required("Expiry date is required."),
+    number: Yup.string().required("Card Number is required."),
+    name: Yup.string().required("Cardholder Name is required."),
+    cvc: Yup.string().required("CVC is required."),
+  };
+
+  const validationSchemaAddress = {
+    country: Yup.string().required("Country is required."),
+    line1: Yup.string().required("Street Address 1 is required."),
+    city: Yup.string().required("City is required."),
+    postal_code: Yup.string().required("Postal Code is required."),
+  };
+
+  const formik = useFormik({
+    initialValues,
+    validationSchema: Yup.object(
+      address
+        ? {
+            ...validationSchemaBase,
+            ...validationSchemaAddress,
+          }
+        : validationSchemaBase
+    ),
+    onSubmit: async (values, helpers) => {
+      if (disabled) {
+        throw new Error("Attempted to submit an invalid form.");
+      }
+      if (onSubmit) {
+        if (address) {
+          // match backend
+          // @ts-ignore
+          values["street_address"] = values.line2
+            ? // @ts-ignore
+              `${values.line1}\n${values.line2}`
+            : // @ts-ignore
+              values.line1;
+          // @ts-ignore
+          values["locality"] = values.city;
+          // @ts-ignore
+          delete values.line1;
+          // @ts-ignore
+          delete values.line2;
+          // @ts-ignore
+          delete values.city;
+        }
+        values["card_number"] = values.number;
+        values["expiry_date"] = values.expiry;
+        delete values.focus;
+        delete values.expiry;
+        delete values.number;
+
+        const res = await onSubmit(values);
+      }
+    },
+  });
+
+  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (e) => {
+    const focusedEl = (e.target as HTMLElement).getAttribute("name") as CCFocus;
+    if (focusedEl) {
+      formik.setValues({
+        ...formik.values,
+        focus: focusedEl,
+      });
+    }
+  };
+
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.name === "card_number") {
+      e.target.value = formatCreditCardNumber(e.target.value);
+    } else if (e.target.name === "expiry") {
+      e.target.value = formatExpirationDate(e.target.value);
+    } else if (e.target.name === "cvc") {
+      e.target.value = formatCVC(e.target.value);
+    }
+    formik.handleChange(e);
+  };
+
+  useEffect(() => {
+    setDisabled(Object.keys(formik.errors).length > 0);
+  }, [formik.errors]);
+
+  return (
+    <>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          formik.handleSubmit();
+        }}
+      >
+        <Box
+          sx={
+            stacked
+              ? {}
+              : {
+                  display: "flex",
+                  flexDirection: { xs: "column", sm: "row" },
+                  gap: "1em",
+                }
+          }
+        >
+          <Cards
+            {...(formik.values as CreditCardValues)}
+            focused={formik.values.focus || "number"}
+          />
+
+          <div>
+            <TextField
+              sx={stacked ? { mt: 2 } : {}}
+              fullWidth
+              type="tel"
+              name="number"
+              label="Card Number"
+              onBlur={formik.handleBlur}
+              onChange={handleInputChange}
+              onFocus={handleInputFocus}
+              variant="outlined"
+              value={formik.values.number}
+              error={Boolean(formik.touched.number && formik.errors.number)}
+              helperText={formik.touched.number && formik.errors.number}
+            />
+            <TextField
+              sx={{ mt: 2 }}
+              fullWidth
+              type="text"
+              name="name"
+              label="Name on Card"
+              onBlur={formik.handleBlur}
+              onChange={handleInputChange}
+              onFocus={handleInputFocus}
+              variant="outlined"
+              value={formik.values.name}
+              error={Boolean(formik.touched.name && formik.errors.name)}
+              helperText={formik.touched.name && formik.errors.name}
+            />
+            <TextField
+              sx={{ mt: 2, width: "calc(50% - 8px)", mr: 1 }}
+              type="tel"
+              name="expiry"
+              label="Valid Thru"
+              placeholder="MM/YY"
+              inputProps={{ pattern: "[0-9]{2}/[0-9]{2}" }}
+              required
+              onBlur={formik.handleBlur}
+              onChange={handleInputChange}
+              onFocus={handleInputFocus}
+              variant="outlined"
+              value={formik.values.expiry}
+              error={Boolean(formik.touched.expiry && formik.errors.expiry)}
+              helperText={
+                (formik.touched.expiry && formik.errors.expiry) || "MM/YY"
+              }
+            />
+            <TextField
+              sx={{ mt: 2, width: "calc(50% - 8px)", ml: 1 }}
+              type="tel"
+              name="cvc"
+              label="CVC"
+              onBlur={formik.handleBlur}
+              onChange={handleInputChange}
+              onFocus={handleInputFocus}
+              variant="outlined"
+              value={formik.values.cvc}
+              error={Boolean(formik.touched.cvc && formik.errors.cvc)}
+              helperText={formik.touched.cvc && formik.errors.cvc}
+            />
+          </div>
+          {/* {formik.errors.submit && (
+        <Typography color="error" sx={{ mt: 2 }} variant="body2">
+          {formik.errors.submit}
+        </Typography>
+      )} */}
+        </Box>
+        <Box>
+          {!address ? null : (
+            <Box>
+              <Typography variant="h6" sx={{ mt: 2, mb: 3 }}>
+                Billing Address
+              </Typography>
+              <AddressCountryField formik={formik} name="country" />
+              <AddressOrganizationNameField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="organization"
+              />
+              <AddressStreetField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="line1"
+                lineNo="1"
+              />
+              <AddressStreetField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="line2"
+                lineNo="2"
+                required={false}
+              />
+              <AddressCityField sx={{ mt: 2 }} formik={formik} name="city" />
+              <AddressRegionField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="region"
+              />
+              <AddressPostalCodeField
+                sx={{ mt: 2 }}
+                formik={formik}
+                name="postal_code"
+              />
+            </Box>
+          )}
+        </Box>
+        {error && (
+          <Typography color="error" sx={{ mt: 2 }} variant="body2">
+            {error}
+          </Typography>
+        )}
+        <Button
+          size="large"
+          sx={{ mt: 3 }}
+          variant="contained"
+          type="submit"
+          disabled={disabled}
+        >
+          Continue
+        </Button>
+        <Box sx={{ mt: 1 }}>
+          <StripeLogoLink />
+        </Box>
+      </form>
+    </>
+  );
+};

package/src/checkout/ProviderLogos.tsx

@@ -0,0 +1,93 @@
+import { createSvgIcon } from "@mui/material";
+// Source: https://brandfolder.com/s/99gctvbpwgvzbc7mz3j9g4x
+
+export const PoweredByStripe = createSvgIcon(
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 150 34"
+  >
+    <defs>
+      <style>{`.cls-1{fill: #635bff}`}</style>
+    </defs>
+    <title>Powered by Stripe - blurple</title>
+    <path
+      className="cls-1"
+      d="M146,0H3.73A3.73,3.73,0,0,0,0,3.73V30.27A3.73,3.73,0,0,0,3.73,34H146a4,4,0,0,0,4-4V4A4,4,0,0,0,146,0Zm3,30a3,3,0,0,1-3,3H3.73A2.74,2.74,0,0,1,1,30.27V3.73A2.74,2.74,0,0,1,3.73,1H146a3,3,0,0,1,3,3Z"
+    />
+    <path
+      className="cls-1"
+      d="M17.07,11.24h-4.3V22h1.92V17.84h2.38c2.4,0,3.9-1.16,3.9-3.3S19.47,11.24,17.07,11.24Zm-.1,5H14.69v-3.3H17c1.38,0,2.11.59,2.11,1.65S18.35,16.19,17,16.19Z"
+    />
+    <path
+      className="cls-1"
+      d="M25.1,14a3.77,3.77,0,0,0-3.8,4.09,3.81,3.81,0,1,0,7.59,0A3.76,3.76,0,0,0,25.1,14Zm0,6.67c-1.22,0-2-1-2-2.58s.76-2.58,2-2.58,2,1,2,2.58S26.31,20.66,25.1,20.66Z"
+    />
+    <polygon
+      className="cls-1"
+      points="36.78 19.35 35.37 14.13 33.89 14.13 32.49 19.35 31.07 14.13 29.22 14.13 31.59 22.01 33.15 22.01 34.59 16.85 36.03 22.01 37.59 22.01 39.96 14.13 38.18 14.13 36.78 19.35"
+    />
+    <path
+      className="cls-1"
+      d="M44,14a3.83,3.83,0,0,0-3.75,4.09,3.79,3.79,0,0,0,3.83,4.09A3.47,3.47,0,0,0,47.49,20L46,19.38a1.78,1.78,0,0,1-1.83,1.26A2.12,2.12,0,0,1,42,18.47h5.52v-.6C47.54,15.71,46.32,14,44,14Zm-1.93,3.13A1.92,1.92,0,0,1,44,15.5a1.56,1.56,0,0,1,1.69,1.62Z"
+    />
+    <path
+      className="cls-1"
+      d="M50.69,15.3V14.13h-1.8V22h1.8V17.87a1.89,1.89,0,0,1,2-2,4.68,4.68,0,0,1,.66,0v-1.8c-.14,0-.3,0-.51,0A2.29,2.29,0,0,0,50.69,15.3Z"
+    />
+    <path
+      className="cls-1"
+      d="M57.48,14a3.83,3.83,0,0,0-3.75,4.09,3.79,3.79,0,0,0,3.83,4.09A3.47,3.47,0,0,0,60.93,20l-1.54-.59a1.78,1.78,0,0,1-1.83,1.26,2.12,2.12,0,0,1-2.1-2.17H61v-.6C61,15.71,59.76,14,57.48,14Zm-1.93,3.13a1.92,1.92,0,0,1,1.92-1.62,1.56,1.56,0,0,1,1.69,1.62Z"
+    />
+    <path
+      className="cls-1"
+      d="M67.56,15a2.85,2.85,0,0,0-2.26-1c-2.21,0-3.47,1.85-3.47,4.09s1.26,4.09,3.47,4.09a2.82,2.82,0,0,0,2.26-1V22h1.8V11.24h-1.8Zm0,3.35a2,2,0,0,1-2,2.28c-1.31,0-2-1-2-2.52s.7-2.52,2-2.52c1.11,0,2,.81,2,2.29Z"
+    />
+    <path
+      className="cls-1"
+      d="M79.31,14A2.88,2.88,0,0,0,77,15V11.24h-1.8V22H77v-.83a2.86,2.86,0,0,0,2.27,1c2.2,0,3.46-1.86,3.46-4.09S81.51,14,79.31,14ZM79,20.6a2,2,0,0,1-2-2.28v-.47c0-1.48.84-2.29,2-2.29,1.3,0,2,1,2,2.52S80.25,20.6,79,20.6Z"
+    />
+    <path
+      className="cls-1"
+      d="M86.93,19.66,85,14.13H83.1L86,21.72l-.3.74a1,1,0,0,1-1.14.79,4.12,4.12,0,0,1-.6,0v1.51a4.62,4.62,0,0,0,.73.05,2.67,2.67,0,0,0,2.78-2l3.24-8.62H88.82Z"
+    />
+    <path
+      className="cls-1"
+      d="M125,12.43a3,3,0,0,0-2.13.87l-.14-.69h-2.39V25.53l2.72-.59V21.81a3,3,0,0,0,1.93.7c1.94,0,3.72-1.59,3.72-5.11C128.71,14.18,126.91,12.43,125,12.43Zm-.65,7.63a1.61,1.61,0,0,1-1.28-.52l0-4.11a1.64,1.64,0,0,1,1.3-.55c1,0,1.68,1.13,1.68,2.58S125.36,20.06,124.35,20.06Z"
+    />
+    <path
+      className="cls-1"
+      d="M133.73,12.43c-2.62,0-4.21,2.26-4.21,5.11,0,3.37,1.88,5.08,4.56,5.08a6.12,6.12,0,0,0,3-.73V19.64a5.79,5.79,0,0,1-2.7.62c-1.08,0-2-.39-2.14-1.7h5.38c0-.15,0-.74,0-1C137.71,14.69,136.35,12.43,133.73,12.43Zm-1.47,4.07c0-1.26.77-1.79,1.45-1.79s1.4.53,1.4,1.79Z"
+    />
+    <path
+      className="cls-1"
+      d="M113,13.36l-.17-.82h-2.32v9.71h2.68V15.67a1.87,1.87,0,0,1,2.05-.58V12.54A1.8,1.8,0,0,0,113,13.36Z"
+    />
+    <path
+      className="cls-1"
+      d="M99.46,15.46c0-.44.36-.61.93-.61a5.9,5.9,0,0,1,2.7.72V12.94a7,7,0,0,0-2.7-.51c-2.21,0-3.68,1.18-3.68,3.16,0,3.1,4.14,2.6,4.14,3.93,0,.52-.44.69-1,.69a6.78,6.78,0,0,1-3-.9V22a7.38,7.38,0,0,0,3,.64c2.26,0,3.82-1.15,3.82-3.16C103.62,16.12,99.46,16.72,99.46,15.46Z"
+    />
+    <path
+      className="cls-1"
+      d="M107.28,10.24l-2.65.58v8.93a2.77,2.77,0,0,0,2.82,2.87,4.16,4.16,0,0,0,1.91-.37V20c-.35.15-2.06.66-2.06-1V15h2.06V12.66h-2.06Z"
+    />
+    <polygon
+      className="cls-1"
+      points="116.25 11.7 118.98 11.13 118.98 8.97 116.25 9.54 116.25 11.7"
+    />
+    <rect className="cls-1" x="116.25" y="12.61" width="2.73" height="9.64" />
+  </svg>,
+  "PoweredByStripe"
+);
+
+export const StripeLogoLink = ({ height }: { height?: string }) => {
+  return (
+    <a href="https://stripe.com" target="_blank">
+      <PoweredByStripe
+        sx={{ width: "unset", height: height || "1em" }}
+        viewBox="0 0 150 34"
+      />
+    </a>
+  );
+};