🔗 [OJS] Stripe link (#53)

* wip * cleanup * bump ver
getopenpay · Oct 8, 2024 · 041cf4f · 041cf4f
1 parent 6c418b5
commit 041cf4f
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 6 deletions.
diff --git a/example/src/app/page.tsx b/example/src/app/page.tsx
@@ -110,7 +110,7 @@ const Form: FC<FormProps> = (props) => {
       onSetupPaymentMethodSuccess={onSetupPaymentMethodSuccess}
       onCheckoutError={onCheckoutError}
     >
-      {({ submit, applePay, googlePay, loaded }) => (
+      {({ submit, applePay, googlePay, stripeLink, loaded }) => (
         <FormWrapper error={validationErrors}>
           {loading && (
             <div data-testid="loading" className="flex items-center">
@@ -187,6 +187,19 @@ const Form: FC<FormProps> = (props) => {
           >
             {googlePay.isLoading ? 'Loading' : 'Google Pay'}
           </button>
+
+          <button
+            onClick={() => stripeLink.startFlow(prParams)}
+            disabled={!stripeLink.isAvailable}
+            className={classNames(
+              'px-4 py-2 mt-2 w-full rounded-lg',
+              stripeLink.isAvailable
+                ? 'bg-emerald-500 dark:bg-emerald-600 text-white hover:bg-emerald-400 dark:hover:bg-emerald-500 active:bg-emerald-600 dark:active:bg-emerald-700 font-bold'
+                : 'bg-gray-100 text-gray-300'
+            )}
+          >
+            {stripeLink.isLoading ? 'Loading' : 'Stripe Link'}
+          </button>
         </FormWrapper>
       )}
     </ElementsForm>

diff --git a/lib/components/form.tsx b/lib/components/form.tsx
@@ -203,7 +203,7 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
         confirmPaymentFlow()
           .then(({ proceedToCheckout }) => {
             if (!proceedToCheckout) {
-              // TODO ASAP: log or something here
+              console.log('[form] NOT proceeding to checkout after confirmation.');
               return;
             }
             console.log('[form] Starting checkout from payment flow.');
@@ -485,6 +485,7 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
     submit: submitCard,
     applePay: paymentRequests.apple_pay,
     googlePay: paymentRequests.google_pay,
+    stripeLink: paymentRequests.stripe_link,
     loaded,
     preview: dynamicPreview,
   };

diff --git a/lib/hooks/use-payment-requests.ts b/lib/hooks/use-payment-requests.ts
@@ -18,12 +18,13 @@ import { DynamicPreview, getCheckoutPreviewAmount } from './use-dynamic-preview'
 import { useEffect, useState } from 'react';
 import { getPrefill } from '../utils/cde-client';
 
-const PaymentRequestProvider = z.enum(['apple_pay', 'google_pay']);
+const PaymentRequestProvider = z.enum(['apple_pay', 'google_pay', 'stripe_link']);
 type PaymentRequestProvider = z.infer<typeof PaymentRequestProvider>;
 
 const OUR_PROVIDER_TO_STRIPES: Record<PaymentRequestProvider, string> = {
   apple_pay: 'applePay',
   google_pay: 'googlePay',
+  stripe_link: 'link',
 };
 
 const PR_LOADING: PaymentRequestStatus = {
@@ -62,6 +63,7 @@ export const usePaymentRequests = (
   const [status, setStatus] = useMap<Record<PaymentRequestProvider, PaymentRequestStatus>>({
     apple_pay: PR_LOADING,
     google_pay: PR_LOADING,
+    stripe_link: PR_LOADING,
   });
   const isLoading = secureToken === undefined || availableCPMs === undefined || !formDiv || !cdeConn;
   const previewAmount = dynamicPreview.amount;

diff --git a/lib/utils/event.ts b/lib/utils/event.ts
@@ -35,9 +35,13 @@ export const constructSubmitEventPayload = (
 
   console.log(`[form] Constructing ${eventType} payload:`, extraData);
 
-  if (checkoutPaymentMethod.provider === 'apple_pay' || checkoutPaymentMethod.provider === 'google_pay') {
+  if (
+    checkoutPaymentMethod.provider === 'apple_pay' ||
+    checkoutPaymentMethod.provider === 'google_pay' ||
+    checkoutPaymentMethod.provider === 'stripe_link'
+  ) {
     if (!extraData[FieldName.ZIP_CODE]) {
-      console.log('[form] Overriding empty zip code (only for google and apple pay)');
+      console.log('[form] Overriding empty zip code (only for google pay, apple pay, and stripe link)');
       extraData[FieldName.ZIP_CODE] = '00000';
     }
   }

diff --git a/lib/utils/models.ts b/lib/utils/models.ts
@@ -10,6 +10,7 @@ export type ElementsFormChildrenProps = {
   submit: () => void;
   applePay: PaymentRequestStatus;
   googlePay: PaymentRequestStatus;
+  stripeLink: PaymentRequestStatus;
   loaded: boolean;
   preview: DynamicPreview;
 };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getopenpay/openpay-js-react",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Accept payments through OpenPay, right on your site",
   "author": "OpenPay <info@getopenpay.com> (https://getopenpay.com)",
   "type": "module",