[Urgent] make zip code optional for apple/gpay, make stripe detection…

… more reliable (#38)

* make stripe detect more stable

* add logging

* make zip code optional

* bump ver

lib/components/form.tsx

@@ -124,16 +124,19 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
 
         const confirmPaymentFlow = async (): Promise<void> => {
           const nextActionType = eventPayload.nextActionMetadata['type'];
+          console.log('[form] Confirm payment flow: next actions:', eventPayload.nextActionMetadata);
           if (nextActionType === undefined) {
+            console.log('[form] Confirming payment flow (No-op)');
             // Nothing to do
           } else if (nextActionType === 'stripe_3ds') {
+            console.log('[form] Confirming payment flow (Stripe 3DS');
             await confirmPaymentFlowFor3DS(eventPayload);
           } else if (nextActionType === 'stripe_payment_request') {
             if (!stripePm) {
               // This is only applicable for PRs
               throw new Error(`Stripe PM not set`);
             }
-            console.log('[form] Confirming payment flow');
+            console.log('[form] Confirming payment flow (Stripe PR');
             await confirmPaymentFlowForStripePR(eventPayload, stripePm);
           } else {
             throw new Error(`Unknown next action type: ${nextActionType}`);

lib/utils/event.ts

@@ -35,6 +35,13 @@ export const constructSubmitEventPayload = (
 
   console.log(`[form] Constructing ${eventType} payload:`, extraData);
 
+  if (checkoutPaymentMethod.provider === 'apple_pay' || checkoutPaymentMethod.provider === 'google_pay') {
+    if (!extraData[FieldName.ZIP_CODE]) {
+      console.log('[form] Overriding empty zip code (only for google and apple pay)');
+      extraData[FieldName.ZIP_CODE] = '00000';
+    }
+  }
+
   const payload = SubmitEventPayload.safeParse(extraData);
 
   if (!payload.success) {

lib/utils/stripe.ts

@@ -16,10 +16,10 @@ const ourCurrencyToTheirs: Record<string, string> = {
   brl: 'brl',
 };
 
-const getLoadedStripe = (publishableKey: string): StripeType => {
+const getLoadedStripe = async (publishableKey: string): Promise<StripeType> => {
   for (let i = 0; i < 10; i++) {
     if (!isStripeJsPresent()) {
-      sleep(200);
+      await sleep(500);
     }
   }
   if (!isStripeJsPresent()) {
@@ -36,7 +36,7 @@ export const createStripePaymentRequest = async (
   totalAmountAtom: number,
   currency: string
 ): Promise<PaymentRequest> => {
-  const stripe = getLoadedStripe(stripePubKey);
+  const stripe = await getLoadedStripe(stripePubKey);
   const stripeCurrency = ourCurrencyToTheirs[currency];
   const paymentRequest = stripe.paymentRequest({
     // TODO: replace this with stripe account country as soon as we support it
@@ -102,7 +102,7 @@ export const confirmPaymentFlowForStripePR = async (
   if (stripePm.paymentMethod.id !== payload.paymentFlowMetadata['stripePmId']) {
     throw new Error(`PM ID mismatch: ${stripePm.paymentMethod.id} != ${payload.paymentFlowMetadata['stripePmId']}`);
   }
-  const stripe = getLoadedStripe(nextActionMetadata.stripe_pk);
+  const stripe = await getLoadedStripe(nextActionMetadata.stripe_pk);
   const confirmResult = await stripe.confirmCardSetup(nextActionMetadata.client_secret, {
     payment_method: payload.paymentFlowMetadata['stripePmId'],
   });
@@ -116,7 +116,7 @@ export const confirmPaymentFlowForStripePR = async (
 
 export const confirmPaymentFlowFor3DS = async (payload: PaymentFlowStartedEventPayload): Promise<void> => {
   const nextActionMetadata = payload.nextActionMetadata;
-  const stripe = getLoadedStripe(nextActionMetadata.stripe_pk);
+  const stripe = await getLoadedStripe(nextActionMetadata.stripe_pk);
   const confirmResult = await stripe.confirmCardSetup(nextActionMetadata.client_secret, {
     payment_method: nextActionMetadata.stripe_pm_id,
   });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getopenpay/openpay-js-react",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Accept payments through OpenPay, right on your site",
   "author": "OpenPay <info@getopenpay.com> (https://getopenpay.com)",
   "type": "module",