diff --git a/example/src/app/page.tsx b/example/src/app/page.tsx index 3a53b3a..7095cb5 100644 --- a/example/src/app/page.tsx +++ b/example/src/app/page.tsx @@ -110,7 +110,7 @@ const Form: FC = (props) => { onSetupPaymentMethodSuccess={onSetupPaymentMethodSuccess} onCheckoutError={onCheckoutError} > - {({ submit, applePay, googlePay, loaded }) => ( + {({ submit, applePay, googlePay, stripeLink, loaded }) => ( {loading && (
@@ -187,6 +187,19 @@ const Form: FC = (props) => { > {googlePay.isLoading ? 'Loading' : 'Google Pay'} + + )} diff --git a/lib/components/form.tsx b/lib/components/form.tsx index 2419eb0..01db073 100644 --- a/lib/components/form.tsx +++ b/lib/components/form.tsx @@ -203,7 +203,7 @@ const ElementsForm: FC = (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 = (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 index eb452f0..f3041b5 100644 --- 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; const OUR_PROVIDER_TO_STRIPES: Record = { apple_pay: 'applePay', google_pay: 'googlePay', + stripe_link: 'link', }; const PR_LOADING: PaymentRequestStatus = { @@ -62,6 +63,7 @@ export const usePaymentRequests = ( const [status, setStatus] = useMap>({ 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 index a25a3f0..e8f8c80 100644 --- 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 index 52b2839..f6451f7 100644 --- 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 index bc34f02..bddddcd 100644 --- 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 (https://getopenpay.com)", "type": "module",