@merchi/cart 1.4.4

package/src/stripe/LegacyStripeCardForm.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { ButtonPay } from '../buttons';
+import FormStripeCardFields from './StripeCardFields';
+import {
+  stripeCardFormSubmit,
+  stripeInitPromise,
+  stripePaymentButtonSubmit,
+} from './actions';
+import { PaymentRequestPaymentMethodEvent } from '@stripe/stripe-js';
+import { companyStripePubKeyOrTestPubKey } from './utils';
+import { useCartContext } from '../CartProvider';
+import { tabIdPaymentSuccess } from '../utilities/tabs';
+
+function PaymentButton({ loading }: any) {
+  const { cart } = useCartContext();
+  return (
+    <div>
+      <ButtonPay cart={cart} loading={loading} />
+    </div>
+  );
+}
+
+const badgeTestMode = <div style={{color: 'red'}}>Test mode</div>;
+
+function StripeCardForm() {
+  const { alertError, apiUrl, cart, setActiveTabIndex, setInvoiceJson } = useCartContext();
+  const { domain } = cart;
+  const [error, setError] = useState(({} as any));
+  const company = domain.company;
+  const hasCompanyPubKey = Boolean(company.isStripeValid && companyStripePubKeyOrTestPubKey(company));
+  const companyPubKey = hasCompanyPubKey ? companyStripePubKeyOrTestPubKey(company) : '';
+  const canUseConnect = !!company.stripeAccountId;
+  const [loadingStripePayment, setLoadingStripePayment] = useState(false);
+  const [loadingStripePaymentButtons, setLoadingStripePaymentButtons] = useState(false);
+  const url: string = apiUrl || '';
+  function callbackCreditCardPaymentSuccess(invoiceJson: any) {
+    setInvoiceJson(invoiceJson);
+    setActiveTabIndex(tabIdPaymentSuccess);
+  }
+  async function doStripePayment(r: any) {
+    setLoadingStripePayment(true);
+    setError({});
+    try {
+      const response = await stripeCardFormSubmit(url, r.stripe, r.card, cart);
+      callbackCreditCardPaymentSuccess(response);
+      setLoadingStripePayment(false);
+    } catch (e: any) {
+      setLoadingStripePayment(false);
+      alertError(e.message);
+      setError({message: e.errorMessage || e.message || 'Unable to process card.'});
+    }
+  }
+  async function doStripePaymentRequestForButton(
+    stripe: any, event: PaymentRequestPaymentMethodEvent
+  ) {
+    setLoadingStripePaymentButtons(true);
+    setError({});
+    try {
+      const response = await stripePaymentButtonSubmit(url, stripe, cart, event);
+      callbackCreditCardPaymentSuccess(response);
+      setLoadingStripePaymentButtons(false);
+    } catch (e: any) {
+      setLoadingStripePaymentButtons(false);
+      alertError(e.message);
+      setError({message: e.errorMessage || e.message || 'Unable to process card.'});
+    }
+  }
+  const [stripePublicKey, setStripePublicKey] = useState(companyPubKey);
+  useEffect(() => {
+    if (!stripePublicKey && canUseConnect) stripeInitPromise(url).then(setStripePublicKey)
+  }, [stripePublicKey, canUseConnect]);
+  return (
+    <>
+      {company.isTesting && badgeTestMode}
+      <FormStripeCardFields
+        doStripePayment={doStripePayment}
+        doStripePaymentRequestForButton={doStripePaymentRequestForButton}
+        cart={cart}
+        error={error}
+        loadingStripePayment={loadingStripePayment}
+        loadingStripePaymentButtons={loadingStripePaymentButtons}
+        PaymentButton={PaymentButton}
+        setLoadingStripePayment={setLoadingStripePayment}
+        stripePubKey={stripePublicKey}
+      />
+    </>
+  );
+}
+
+export default StripeCardForm;

package/src/stripe/StripeCardFields.tsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+import StripePaymentButtons from "./StripePaymentButtons";
+import {
+  CardElement,
+  Elements,
+  useStripe,
+  useElements,
+} from "@stripe/react-stripe-js";
+import {
+  loadStripe,
+  PaymentRequestPaymentMethodEvent,
+} from "@stripe/stripe-js";
+import { CARD_ELEMENT_OPTIONS } from "./utils";
+import pngStripe from "../assets/stripe-payment-secure.png";
+
+type DoStripePaymentRequestForButton = (
+  stripe: any,
+  event: PaymentRequestPaymentMethodEvent
+) => void;
+
+interface FormProps {
+  doStripePayment: (values: any) => void;
+  doStripePaymentRequestForButton?: DoStripePaymentRequestForButton;
+  cart: any;
+  error: any;
+  loadingStripePayment: boolean;
+  loadingStripePaymentButtons: boolean;
+  PaymentButton?: any;
+  setLoadingStripePayment: (loading: boolean) => void;
+}
+
+function InnerForm({
+  doStripePayment,
+  doStripePaymentRequestForButton,
+  cart,
+  error,
+  loadingStripePayment,
+  loadingStripePaymentButtons,
+  PaymentButton,
+  setLoadingStripePayment,
+}: FormProps) {
+  const inputClass = "form-control p-t-8 stripe-form-control";
+  const stripe = useStripe();
+  const elements = useElements();
+  function paymentStart(e: any) {
+    const card = (elements as any).getElement(CardElement) as any;
+    setLoadingStripePayment(true);
+    e.preventDefault();
+    if (!stripe || !elements) {
+      setLoadingStripePayment(false);
+      return;
+    }
+    doStripePayment({ card, cart, stripe });
+  }
+  return (
+    <>
+      {loadingStripePaymentButtons ? (
+        <div style={{ alignItems: "center" }}>
+          <div
+            style={{
+              alignItems: "center",
+              display: "flex",
+              justifyContent: "center",
+              marginBottom: "1rem",
+              textAlign: "center",
+            }}
+          >
+            <div className="spinner-merchi-small" />
+          </div>
+          <p style={{ fontSize: "14px", fontWeight: 600, textAlign: "center" }}>
+            Processing payment
+          </p>
+        </div>
+      ) : (
+        <>
+          {!!(cart && doStripePaymentRequestForButton) && (
+            <StripePaymentButtons
+              doPaymentRequest={(event: PaymentRequestPaymentMethodEvent) =>
+                (
+                  doStripePaymentRequestForButton as DoStripePaymentRequestForButton
+                )(stripe, event)
+              }
+              cart={cart}
+            />
+          )}
+          <form onSubmit={paymentStart}>
+            <div className="merchi-cart-stripe-input-container">
+              <CardElement
+                className={inputClass}
+                options={CARD_ELEMENT_OPTIONS}
+              />
+              {error.message && (
+                <div className="merchi-cart-stripe-input-error">
+                  {error.message}
+                </div>
+              )}
+              <PaymentButton loading={loadingStripePayment} />
+              {pngStripe && (
+                <img
+                  src={
+                    (pngStripe && "src" in pngStripe
+                      ? pngStripe.src
+                      : pngStripe) || ""
+                  }
+                  width={250}
+                  alt="Secure credit card payments by Stripe"
+                />
+              )}
+            </div>
+          </form>
+        </>
+      )}
+    </>
+  );
+}
+
+interface Props {
+  doStripePayment: (values: any) => void;
+  doStripePaymentRequestForButton?: (
+    stripe: any,
+    event: PaymentRequestPaymentMethodEvent
+  ) => void;
+  cart: any;
+  error: any;
+  loadingStripePayment: boolean;
+  loadingStripePaymentButtons: boolean;
+  PaymentButton?: any;
+  setLoadingStripePayment: (loading: boolean) => void;
+  stripePubKey: string;
+}
+
+function FormStripeCardFields({
+  doStripePayment,
+  doStripePaymentRequestForButton,
+  cart,
+  error,
+  loadingStripePayment,
+  loadingStripePaymentButtons,
+  PaymentButton,
+  setLoadingStripePayment,
+  stripePubKey,
+}: Props) {
+  return stripePubKey ? (
+    <Elements stripe={loadStripe(stripePubKey)}>
+      <InnerForm
+        doStripePayment={doStripePayment}
+        doStripePaymentRequestForButton={doStripePaymentRequestForButton}
+        cart={cart}
+        error={error}
+        loadingStripePayment={loadingStripePayment}
+        loadingStripePaymentButtons={loadingStripePaymentButtons}
+        setLoadingStripePayment={setLoadingStripePayment}
+        PaymentButton={PaymentButton}
+      />
+    </Elements>
+  ) : (
+    <div style={{ alignItems: "center" }}>
+      <div
+        style={{
+          alignItems: "center",
+          display: "flex",
+          justifyContent: "center",
+          marginBottom: "1rem",
+          textAlign: "center",
+        }}
+      >
+        <div className="spinner-merchi-small" />
+      </div>
+    </div>
+  );
+}
+
+export default FormStripeCardFields;

package/src/stripe/StripeCardForm.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { StripePaymentForm, StripePaymentGate } from '@merchi/invoice';
+import LegacyStripeCardForm from './LegacyStripeCardForm';
+import { useCartContext } from '../CartProvider';
+import { tabIdPaymentSuccess } from '../utilities/tabs';
+
+export default function StripeCardForm() {
+  const { alertError, apiUrl, cart, setActiveTabIndex, setInvoiceJson } = useCartContext();
+  return <StripePaymentGate engine={cart.stripePaymentEngine} apiUrl={apiUrl || 'https://api.merchi.co/v6/'} resource="cart" resourceId={cart.id}
+    resourceToken={cart.token || cart.cartToken} legacy={<LegacyStripeCardForm />}>
+    <StripePaymentForm apiUrl={apiUrl || 'https://api.merchi.co/v6/'} resource="cart"
+    resourceId={cart.id} resourceToken={cart.token || cart.cartToken} onError={alertError}
+    onSuccess={invoice => {
+      setInvoiceJson(invoice);
+      setActiveTabIndex(tabIdPaymentSuccess);
+    }} />
+  </StripePaymentGate>;
+}

package/src/stripe/StripePaymentButtons.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  CanMakePaymentResult,
+  PaymentRequest,
+  PaymentRequestOptions,
+  PaymentRequestPaymentMethodEvent,
+  StripePaymentRequestButtonElementOptions 
+} from '@stripe/stripe-js';
+import {
+  PaymentRequestButtonElement,
+  useStripe,
+} from '@stripe/react-stripe-js';
+
+
+function useOptions(paymentRequest: PaymentRequest) {
+  const options = useMemo(
+    () => ({
+      paymentRequest,
+      style: {
+        paymentRequestButton: {
+          theme: 'dark',
+          height: '48px',
+          type: 'buy'
+        }
+      }
+    }),
+    [paymentRequest]
+  );
+
+  return options;
+}
+
+interface UsePaymentRequest {
+  onPaymentMethod: (payload: any) => void;
+  options: PaymentRequestOptions;
+}
+
+function usePaymentRequest({ options, onPaymentMethod }: UsePaymentRequest) {
+  const stripe = useStripe();
+  const [paymentRequest, setPaymentRequest] = useState((null as unknown));
+  const [canMakePayment, setCanMakePayment] = useState(false);
+
+  useEffect(() => {
+    if (stripe && paymentRequest === null) {
+      const pr = stripe.paymentRequest(options);
+      setPaymentRequest((pr as any));
+    }
+  }, [stripe, options, paymentRequest]);
+
+  useEffect(() => {
+    let subscribed = true;
+    if (paymentRequest) {
+      (paymentRequest as PaymentRequest).canMakePayment().then(
+        (res: CanMakePaymentResult | null) => {
+          if (res && subscribed) {
+            setCanMakePayment(true);
+          }
+        });
+    }
+
+    return () => {
+      subscribed = false;
+    };
+  }, [paymentRequest]);
+
+  useEffect(() => {
+    if (paymentRequest) {
+      (paymentRequest as any).on('paymentmethod', onPaymentMethod);
+    }
+    return () => {
+      if (paymentRequest) {
+        (paymentRequest as any).off('paymentmethod', onPaymentMethod);
+      }
+    };
+  }, [paymentRequest, onPaymentMethod]);
+
+  return canMakePayment ? paymentRequest : null;
+}
+
+interface PropsStripePaymentButtons {
+  doPaymentRequest: (event: PaymentRequestPaymentMethodEvent) => void;
+  cart: any;
+}
+
+function StripePaymentButtons(
+  {
+    doPaymentRequest,
+    cart,
+  }: PropsStripePaymentButtons) {
+  const paymentRequest: unknown = usePaymentRequest({
+    options: {
+      country: cart.domain.company.country,
+      currency: String(cart.currency).toLowerCase(),
+      total: {
+        label: `Merchi Cart #${cart.id}`,
+        amount: Math.round(cart.totalCost * 100)
+      }
+    },
+    onPaymentMethod: doPaymentRequest
+  });
+  const options = useOptions((paymentRequest as PaymentRequest));
+
+  if (!paymentRequest) {
+    return null;
+  }
+  return (
+    <div style={{marginBottom: '2rem', marginTop: '2rem'}}>
+      <PaymentRequestButtonElement
+        className='PaymentRequestButton'
+        options={(options as StripePaymentRequestButtonElementOptions)}
+      />
+    </div>
+  );
+}
+
+export default StripePaymentButtons;

package/src/stripe/actions.ts

@@ -0,0 +1,94 @@
+import { PaymentRequestPaymentMethodEvent } from '@stripe/stripe-js';
+
+export async function stripeInitPromise(apiUrl: string) {
+  return await fetch(
+    `${apiUrl}stripe/master_publishable_key/`,
+    { method: 'GET', mode: 'cors' }
+  ).then((response: any) => response.key);
+}
+
+async function createPaymentIntent(apiUrl: string, cart: any, paymentMethodType?: string) {
+  const { id, token } = cart;
+  const fetchOptions: any = {
+    method: 'GET',
+    mode: 'cors',
+  };
+  const queryParams: any[] = [['cart_token', token]];
+
+  if (paymentMethodType) {
+    queryParams.push(['payment_method_types', paymentMethodType]);
+  }
+
+  const queryString = new URLSearchParams(queryParams).toString();
+  const uri = `stripe/payment_intent/cart/${id}/`
+  const url = `${apiUrl}${uri}?${queryString}`;
+
+  const response = await fetch(url, fetchOptions);
+
+  if (!response.ok) {
+    throw new Error("Failed to create payment intent.");
+  }
+
+  return await response.json();
+}
+
+async function checkPaymentIntnetIsComplete(apiUrl: string, cart: any) {
+  const url = `stripe/payment_intent/cart/complete/${cart.id}/`;
+  const fetchOptions: any = {
+    method: 'GET',
+    mode: 'cors',
+  };
+  const queryString = new URLSearchParams({cart_token: cart.token}).toString();
+
+  const response = await fetch(`${apiUrl}${url}?${queryString}`, fetchOptions);
+  
+  if (!response.ok) {
+    throw new Error("Failed to check if payment intent is complete.");
+  }
+  const i = await response.json();
+  return i.invoice;
+}
+
+export async function stripeCardFormSubmit(apiUrl: string, stripe: any, card: any, cart: any) {
+  try {
+    const intent = await createPaymentIntent(apiUrl, cart);
+    const stripePayment = await stripe.confirmCardPayment(intent.stripeClientSecret, { payment_method: { card } });
+
+    if (stripePayment.error) {
+      throw new Error(stripePayment.error.message || 'Stripe connect unknown error');
+    }
+
+    return await checkPaymentIntnetIsComplete(apiUrl, cart);
+  } catch (e) {
+    throw e;
+  }
+}
+
+export async function stripePaymentButtonSubmit(
+  apiUrl: string,
+  stripe: any,
+  cart: any,
+  paymentMethodEvent: PaymentRequestPaymentMethodEvent
+) {
+  const { complete, paymentMethod } = paymentMethodEvent;
+
+  try {
+    const intent = await createPaymentIntent(apiUrl, cart);
+    const stripePayment = await stripe.confirmCardPayment(
+      intent.stripeClientSecret,
+      { payment_method: paymentMethod.id },
+      { handleActions: false }
+    );
+
+    if (stripePayment.error) {
+      throw new Error(stripePayment.error.message || 'Stripe unknown error');
+    }
+
+    complete('success');
+    return await checkPaymentIntnetIsComplete(apiUrl, cart);
+
+  } catch (e) {
+    complete('fail');
+    throw e;
+  }
+}

package/src/stripe/utils.ts

@@ -0,0 +1,22 @@
+export function companyStripePubKeyOrTestPubKey(company: any) {
+  return company.isTesting ? company.stripePublishableTestKey :
+    company.stripePublishableKey;
+}
+
+export const CARD_ELEMENT_OPTIONS = {
+  hidePostalCode: true,
+  style: {
+    base: {
+      '::placeholder': {
+        color: '#999',
+        fontSize: '16px',
+      },
+      fontSize: '16px',
+      lineHeight: '1.33',
+      paddingTop: '4px',
+    },
+    invalid: {
+      color: '#9e2146',
+    },
+  },
+};