payment-kit 1.13.21 → 1.13.23

package/api/src/integrations/stripe/handlers/invoice.ts

@@ -9,6 +9,7 @@ import {
   Customer,
   Invoice,
   InvoiceItem,
+  PaymentMethod,
   Subscription,
   SubscriptionItem,
   TEventExpanded,
@@ -29,6 +30,109 @@ export async function handleStripeInvoicePaid(invoice: Invoice, event: TEventExp
   });
 }
 
+export async function ensureStripeInvoice(stripeInvoice: any, subscription: Subscription, client: Stripe) {
+  const customer = await Customer.findByPk(subscription.customer_id);
+  const checkoutSession = await CheckoutSession.findOne({ where: { subscription_id: subscription.id } });
+
+  let invoice = await Invoice.findOne({ where: { 'metadata.stripe_id': stripeInvoice.id } });
+  if (invoice) {
+    return invoice;
+  }
+
+  // @ts-ignore
+  invoice = await Invoice.create({
+    // @ts-ignore
+    number: await customer.getInvoiceNumber(),
+    ...pick(stripeInvoice, [
+      'amount_due',
+      'amount_paid',
+      'amount_remaining',
+      'amount_shipping',
+      'attempt_count',
+      'attempted',
+      'auto_advance',
+      'billing_reason',
+      'collection_method',
+      'custom_fields',
+      'customer_address',
+      'customer_email',
+      'customer_name',
+      'customer_phone',
+      'description',
+      'discounts',
+      'due_date',
+      'effective_at',
+      'ending_balance',
+      'livemode',
+      'paid_out_of_band',
+      'paid',
+      'period_end',
+      'period_start',
+      'starting_balance',
+      'status_transitions',
+      'status',
+      'subtotal_excluding_tax',
+      'subtotal',
+      'tax',
+      'total_discount_amounts',
+      'total',
+    ]),
+
+    currency_id: subscription.currency_id,
+    customer_id: subscription.customer_id,
+    default_payment_method_id: subscription.default_payment_method_id as string,
+    payment_intent_id: '',
+    subscription_id: subscription.id,
+    checkout_session_id: checkoutSession?.id,
+    statement_descriptor: stripeInvoice.statement_descriptor || '',
+
+    payment_settings: subscription.payment_settings,
+    metadata: {
+      stripe_id: stripeInvoice.id,
+    },
+  });
+  await client.invoices.update(stripeInvoice.id, { metadata: { appPid: env.appPid, id: invoice.id } });
+  logger.info('stripe invoice mirrored', { local: invoice.id, remote: stripeInvoice.id });
+
+  await Promise.all(
+    stripeInvoice.lines.data.map(async (line: any) => {
+      const subscriptionItem = line.subscription_item
+        ? await SubscriptionItem.findOne({ where: { 'metadata.stripe_id': line.subscription_item } })
+        : null;
+
+      // @ts-ignore
+      const item = await InvoiceItem.create({
+        currency_id: subscription.currency_id,
+        customer_id: subscription.customer_id,
+        price_id: line.price?.metadata.id as string,
+        invoice_id: invoice?.id as string,
+        subscription_id: subscription.id,
+        subscription_item_id: subscriptionItem?.id,
+        ...pick(line, [
+          'livemode',
+          'amount',
+          'quantity',
+          'description',
+          'period',
+          'discountable',
+          'discount_amounts',
+          'discounts',
+          'proration',
+          'proration_details',
+        ]),
+        metadata: {
+          stripe_id: line.id,
+        },
+      });
+
+      logger.info('stripe invoice items mirrored', { local: item.id, remote: line.id });
+      return item;
+    })
+  );
+
+  return invoice;
+}
+
 export async function handleStripeInvoiceCreated(event: TEventExpanded, client: Stripe) {
   if (['invoice.created', 'payment_intent.created'].includes(event.type) === false) {
     logger.warn('abort because event type not expected', { id: event.id, type: event.type });
@@ -74,98 +178,7 @@ export async function handleStripeInvoiceCreated(event: TEventExpanded, client:
   const checkoutSession = await CheckoutSession.findOne({ where: { subscription_id: subscription.id } });
 
   // create stripe invoice
-  let invoice = await Invoice.findOne({ where: { 'metadata.stripe_id': stripeInvoice.id } });
-  if (!invoice) {
-    invoice = await Invoice.create({
-      // @ts-ignore
-      number: await customer.getInvoiceNumber(),
-      ...pick(stripeInvoice, [
-        'amount_due',
-        'amount_paid',
-        'amount_remaining',
-        'amount_shipping',
-        'attempt_count',
-        'attempted',
-        'auto_advance',
-        'billing_reason',
-        'collection_method',
-        'custom_fields',
-        'customer_address',
-        'customer_email',
-        'customer_name',
-        'customer_phone',
-        'description',
-        'discounts',
-        'due_date',
-        'effective_at',
-        'ending_balance',
-        'livemode',
-        'paid_out_of_band',
-        'paid',
-        'period_end',
-        'period_start',
-        'starting_balance',
-        'status_transitions',
-        'status',
-        'subtotal_excluding_tax',
-        'subtotal',
-        'tax',
-        'total_discount_amounts',
-        'total',
-      ]),
-
-      currency_id: subscription.currency_id,
-      customer_id: subscription.customer_id,
-      default_payment_method_id: subscription.default_payment_method_id as string,
-      payment_intent_id: '',
-      subscription_id: subscription.id,
-      checkout_session_id: checkoutSession?.id,
-      statement_descriptor: stripeInvoice.statement_descriptor || '',
-
-      payment_settings: subscription.payment_settings,
-      metadata: {
-        stripe_id: stripeInvoice.id,
-      },
-    });
-    await client.invoices.update(stripeInvoice.id, { metadata: { appPid: env.appPid, id: invoice.id } });
-    logger.info('stripe invoice mirrored', { local: invoice.id, remote: stripeInvoice.id });
-
-    await Promise.all(
-      stripeInvoice.lines.data.map(async (line) => {
-        const subscriptionItem = line.subscription_item
-          ? await SubscriptionItem.findOne({ where: { 'metadata.stripe_id': line.subscription_item } })
-          : null;
-
-        // @ts-ignore
-        const item = await InvoiceItem.create({
-          currency_id: subscription.currency_id,
-          customer_id: subscription.customer_id,
-          price_id: line.price?.metadata.id as string,
-          invoice_id: invoice?.id as string,
-          subscription_id: subscription.id,
-          subscription_item_id: subscriptionItem?.id,
-          ...pick(line, [
-            'livemode',
-            'amount',
-            'quantity',
-            'description',
-            'period',
-            'discountable',
-            'discount_amounts',
-            'discounts',
-            'proration',
-            'proration_details',
-          ]),
-          metadata: {
-            stripe_id: line.id,
-          },
-        });
-
-        logger.info('stripe invoice items mirrored', { local: item.id, remote: line.id });
-        return item;
-      })
-    );
-  }
+  const invoice = await ensureStripeInvoice(stripeInvoice, subscription, client);
 
   return { subscription, invoice, customer, checkoutSession };
 }
@@ -186,16 +199,32 @@ export async function handleInvoiceEvent(event: TEventExpanded, client: Stripe)
     return;
   }
 
-  const localInvoiceId = event.data.object.metadata?.id;
+  let localInvoiceId = event.data.object.metadata?.id;
+
+  // in case we missed some of the events
+  const subscriptionId = event.data.object.subscription_details?.metadata?.id;
+  const appPid = event.data.object.subscription_details?.metadata?.appPid;
   if (!localInvoiceId) {
-    try {
-      await waitForStripeInvoiceMirrored(event.data.object.id);
-    } catch (err) {
-      logger.error('wait for stripe invoice mirror error', { localInvoiceId, error: err });
-    }
+    if (subscriptionId && appPid && appPid === env.appPid) {
+      logger.warn('try mirror invoice from stripe', { invoiceId: event.data.object.id });
+      const subscription = await Subscription.findByPk(subscriptionId);
+      if (subscription) {
+        const method = await PaymentMethod.findByPk(subscription.default_payment_method_id);
+        if (method && method.type === 'stripe') {
+          const tmp = await ensureStripeInvoice(event.data.object, subscription, method.getStripe());
+          localInvoiceId = tmp.id;
+        }
+      }
+    } else {
+      try {
+        await waitForStripeInvoiceMirrored(event.data.object.id);
+      } catch (err) {
+        logger.error('wait for stripe invoice mirror error', { localInvoiceId, error: err });
+      }
 
-    logger.warn('local invoice id not found in strip event', { localInvoiceId });
-    return;
+      logger.warn('local invoice id not found in strip event', { localInvoiceId });
+      return;
+    }
   }
 
   const invoice = await Invoice.findByPk(localInvoiceId);
@@ -232,7 +261,6 @@ export async function handleInvoiceEvent(event: TEventExpanded, client: Stripe)
     return;
   }
 
-  // TODO: handle upcoming invoices?
   if (event.type === 'invoice.upcoming') {
     logger.info('received invoice upcoming event', event);
   }

package/api/src/jobs/event.ts

@@ -3,6 +3,7 @@ import { Op } from 'sequelize';
 import logger from '../libs/logger';
 import createQueue from '../libs/queue';
 import { Event } from '../store/models/event';
+import { WebhookAttempt } from '../store/models/webhook-attempt';
 import { WebhookEndpoint } from '../store/models/webhook-endpoint';
 import { getJobId, webhookQueue } from './webhook';
 
@@ -11,34 +12,41 @@ type EventJob = {
 };
 
 export const handleEvent = async (job: EventJob) => {
-  logger.info('handleEvent', job);
+  logger.info('handle event', job);
 
   const event = await Event.findByPk(job.eventId);
   if (!event) {
-    logger.warn(`Event not found: ${job.eventId}`);
+    logger.warn('event not found', job);
     return;
   }
 
   if (!event.pending_webhooks) {
-    logger.warn(`Event already processed: ${job.eventId}`);
+    logger.warn('event already processed', job);
     return;
   }
 
   const webhooks = await WebhookEndpoint.findAll({ where: { status: 'enabled', livemode: event.livemode } });
   const eventWebhooks = webhooks.filter((webhook) => webhook.enabled_events.includes(event.type));
   if (eventWebhooks.length === 0) {
-    logger.info(`No webhook endpoint for event: ${job.eventId}`);
+    logger.info('no webhook endpoint for event', job);
     await event.update({ pending_webhooks: 0 });
     return;
   }
 
   await event.update({ pending_webhooks: eventWebhooks.length });
-  eventWebhooks.forEach((webhook) => {
-    logger.info(`Schedule webhook ${webhook.id} attempt for event: ${job.eventId}`);
-    webhookQueue.push({
-      id: getJobId(event.id, webhook.id),
-      job: { eventId: event.id, webhookId: webhook.id },
+  eventWebhooks.forEach(async (webhook) => {
+    const attempted = await WebhookAttempt.findOne({
+      where: { event_id: event.id, webhook_endpoint_id: webhook.id },
     });
+
+    // we should only push webhook if it's not attempted before
+    if (!attempted) {
+      logger.info('schedule initial attempt for event', job);
+      webhookQueue.push({
+        id: getJobId(event.id, webhook.id),
+        job: { eventId: event.id, webhookId: webhook.id },
+      });
+    }
   });
 };
 
@@ -68,5 +76,5 @@ export const startEventQueue = async () => {
 };
 
 eventQueue.on('failed', ({ id, job, error }) => {
-  logger.error('Event job failed', { id, job, error });
+  logger.error('event job failed', { id, job, error });
 });

package/api/src/jobs/invoice.ts

@@ -18,31 +18,31 @@ type InvoiceJob = {
 // handle invoice payment
 // TODO: send invoice to user with email
 export const handleInvoice = async (job: InvoiceJob) => {
-  logger.info('handleInvoice', job);
+  logger.info('handle invoice', job);
 
   const invoice = await Invoice.findByPk(job.invoiceId);
   if (!invoice) {
-    logger.warn(`Invoice not found: ${job.invoiceId}`);
+    logger.warn(`invoice not found: ${job.invoiceId}`);
     return;
   }
   if (invoice.status !== 'open') {
-    logger.warn(`Invoice not open: ${job.invoiceId}`);
+    logger.warn(`invoice not open: ${job.invoiceId}`);
     return;
   }
   if (invoice.auto_advance === false) {
-    logger.warn(`Invoice not configured to auto advance: ${job.invoiceId}`);
+    logger.warn(`invoice not configured to auto advance: ${job.invoiceId}`);
     return;
   }
 
   const supportAutoCharge = await PaymentMethod.supportAutoCharge(invoice.default_payment_method_id);
   if (supportAutoCharge === false) {
-    logger.warn(`Invoice does not support auto charge: ${job.invoiceId}`);
+    logger.warn(`invoice does not support auto charge: ${job.invoiceId}`);
     return;
   }
 
   // no payment required
   if (invoice.total === '0') {
-    logger.warn(`Invoice does not require payment: ${job.invoiceId}`);
+    logger.warn(`invoice does not require payment: ${job.invoiceId}`);
 
     await invoice.update({
       paid: true,
@@ -59,7 +59,7 @@ export const handleInvoice = async (job: InvoiceJob) => {
       const subscription = await Subscription.findByPk(invoice.subscription_id);
       if (subscription && subscription.status === 'incomplete') {
         await subscription.update({ status: subscription.trail_end ? 'trialing' : 'active' });
-        logger.info('Invoice subscription updated', subscription.id);
+        logger.info('invoice subscription updated', subscription.id);
       }
     }
 
@@ -67,7 +67,7 @@ export const handleInvoice = async (job: InvoiceJob) => {
       const checkoutSession = await CheckoutSession.findByPk(invoice.checkout_session_id);
       if (checkoutSession && checkoutSession.status === 'open') {
         await checkoutSession.update({ status: 'complete', payment_status: 'no_payment_required' });
-        logger.info('Invoice checkout session updated', checkoutSession.id);
+        logger.info('invoice checkout session updated', checkoutSession.id);
       }
     }
 

package/api/src/jobs/payment.ts

@@ -19,7 +19,7 @@ type PaymentJob = {
 };
 
 export const handlePayment = async (job: PaymentJob) => {
-  logger.info('handlePayment', job);
+  logger.info('handle payment', job);
 
   const paymentIntent = await PaymentIntent.findByPk(job.paymentIntentId);
   if (!paymentIntent) {

package/api/src/jobs/subscription.ts

@@ -21,7 +21,7 @@ type SubscriptionJob = {
 
 // generate invoice for subscription periodically
 export const handleSubscription = async (job: SubscriptionJob) => {
-  logger.info('handleSubscription', job);
+  logger.info('handle subscription', job);
 
   const subscription = await Subscription.findByPk(job.subscriptionId);
   if (!subscription) {

package/api/src/jobs/webhook.ts

@@ -20,31 +20,29 @@ export const getJobId = (eventId: string, webhookId: string) => {
 
 // https://stripe.com/docs/webhooks
 export const handleWebhook = async (job: WebhookJob) => {
-  logger.info('handleWebhook', job);
+  logger.info('handle webhook', job);
 
   const event = await Event.findByPk(job.eventId);
   if (!event) {
-    logger.warn(`Event not found when attempt webhook: ${job.eventId}`);
+    logger.warn('event not found when attempt webhook', job);
     return;
   }
 
   const webhook = await WebhookEndpoint.findByPk(job.webhookId);
   if (!webhook) {
-    logger.warn(`Webhook not found on attempt: ${job.webhookId}`);
+    logger.warn('webhook not found on attempt', job);
     return;
   }
   if (webhook.status !== 'enabled') {
-    logger.warn(`Webhook disabled on attempt: ${job.webhookId}`);
+    logger.warn('webhook disabled on attempt', job);
     return;
   }
 
-  const lastAttempt = await WebhookAttempt.findOne({
+  const lastRetryCount = await WebhookAttempt.max('retry_count', {
     where: { event_id: event.id, webhook_endpoint_id: webhook.id },
-    order: [['retry_count', 'DESC']],
-    attributes: ['retry_count'],
   });
 
-  const retryCount = lastAttempt ? lastAttempt.retry_count + 1 : 0;
+  const retryCount = lastRetryCount ? +lastRetryCount + 1 : 1;
 
   try {
     // verify similar to component call, but supports external urls
@@ -72,9 +70,9 @@ export const handleWebhook = async (job: WebhookJob) => {
     });
 
     await event.decrement('pending_webhooks');
-    logger.info(`Webhook attempt success: ${job.webhookId}`);
+    logger.info('webhook attempt success', { ...job, retryCount });
   } catch (err: any) {
-    logger.error(`Webhook attempt error: ${job.webhookId}`, { message: err.message });
+    logger.warn('webhook attempt error', { ...job, retryCount, message: err.message });
     await WebhookAttempt.create({
       livemode: event.livemode,
       event_id: event.id,
@@ -91,7 +89,7 @@ export const handleWebhook = async (job: WebhookJob) => {
         webhookQueue.push({
           id: getJobId(event.id, webhook.id),
           job: { eventId: event.id, webhookId: webhook.id },
-          runAt: getNextRetry(retryCount + 1),
+          runAt: getNextRetry(retryCount),
         });
       });
     }

package/api/src/routes/integrations/stripe.ts

@@ -43,14 +43,14 @@ const handleEvent = async (req: Request, res: Response) => {
 
   if (STRIPE_EVENTS.includes(stripeEvent.type) === false) {
     logger.debug('webhook event not interested', { id: stripeEvent.id, type: stripeEvent.type });
-    return res.status(400).json({ error: 'Not implemented' });
+    return res.json({ skipped: true });
   }
 
   // only events from this app should be processed
   const appPid = get(stripeEvent, 'data.object.metadata.appPid');
   if (appPid && appPid !== env.appPid) {
     logger.debug('webhook event for other app', { id: stripeEvent.id, type: stripeEvent.type });
-    return res.json({ received: true });
+    return res.json({ skipped: true });
   }
 
   logger.debug('webhook received event', { id: stripeEvent.id, type: stripeEvent.type });

package/api/src/store/models/types.ts

@@ -210,6 +210,7 @@ export type PaymentMethodOptions = {
 
 export type PaymentMethodSettings = {
   stripe?: {
+    dashboard: string;
     publishable_key: string;
     secret_key: string;
     webhook_signing_secret: string;

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.21
+version: 1.13.23
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.21",
+  "version": "1.13.23",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -100,7 +100,7 @@
   "devDependencies": {
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.21",
+    "@did-pay/types": "1.13.23",
     "@types/cookie-parser": "^1.4.4",
     "@types/cors": "^2.8.14",
     "@types/dotenv-flow": "^3.3.1",
@@ -137,5 +137,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "9a767485dd2e712fdaf1e636d73556c90f20e2bd"
+  "gitHead": "a4ba80b4e2d020c912361af6fd555f8bfc52f54f"
 }

package/src/components/actions.tsx

@@ -4,6 +4,8 @@ import { Button, IconButton, ListItemText, Menu, MenuItem } from '@mui/material'
 import React, { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
+import { stopEvent } from '../libs/util';
+
 type ActionItem = {
   label: string;
   handler: Function;
@@ -30,20 +32,12 @@ export default function Actions(props: ActionsProps) {
   const open = Boolean(anchorEl);
 
   const onOpen = (e: React.SyntheticEvent<any>) => {
-    try {
-      e.stopPropagation();
-      e.preventDefault();
-      // eslint-disable-next-line no-empty
-    } catch {}
+    stopEvent(e);
     setAnchorEl(e.currentTarget);
   };
 
   const onClose = (e: React.SyntheticEvent<any>, handler?: Function) => {
-    try {
-      e.stopPropagation();
-      e.preventDefault();
-      // eslint-disable-next-line no-empty
-    } catch {}
+    stopEvent(e);
     setAnchorEl(null);
 
     if (typeof handler === 'function') {

package/src/components/blockchain/tx.tsx

@@ -1,27 +1,48 @@
-import type { TPaymentMethod } from '@did-pay/types';
+import type { PaymentDetails, TPaymentMethod } from '@did-pay/types';
 import { OpenInNewOutlined } from '@mui/icons-material';
 import { Link, Stack, Typography } from '@mui/material';
 import { joinURL } from 'ufo';
 
-const getTxLink = (method: TPaymentMethod, hash: string) => {
+const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
   if (method.type === 'arcblock') {
-    return joinURL(method.settings.arcblock?.explorer_host as string, '/tx', hash);
+    return {
+      link: joinURL(method.settings.arcblock?.explorer_host as string, '/tx', details.arcblock?.tx_hash as string),
+      text: details.arcblock?.tx_hash as string,
+    };
   }
   if (method.type === 'bitcoin') {
-    return joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', hash);
+    return {
+      link: joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', details.bitcoin?.tx_hash as string),
+      text: details.bitcoin?.tx_hash as string,
+    };
   }
   if (method.type === 'ethereum') {
-    return joinURL(method.settings.ethereum?.explorer_host as string, '/tx', hash);
+    return {
+      link: joinURL(method.settings.ethereum?.explorer_host as string, '/tx', details.ethereum?.tx_hash as string),
+      text: details.ethereum?.tx_hash as string,
+    };
+  }
+  if (method.type === 'stripe') {
+    const dashboard = method.livemode ? 'https://dashboard.stripe.com' : 'https://dashboard.stripe.com/test';
+    return {
+      link: joinURL(
+        method.settings.stripe?.dashboard || dashboard,
+        'payments',
+        details.stripe?.payment_intent_id as string
+      ),
+      text: details.stripe?.payment_intent_id as string,
+    };
   }
 
-  return hash;
+  return { text: 'N/A', link: '' };
 };
 
-export default function TxLink(props: { hash: string; method: TPaymentMethod }) {
+export default function TxLink(props: { details: PaymentDetails; method: TPaymentMethod }) {
+  const { text, link } = getTxLink(props.method, props.details);
   return (
-    <Link href={getTxLink(props.method, props.hash)} target="_blank" rel="noopener noreferrer">
+    <Link href={link} target="_blank" rel="noopener noreferrer">
       <Stack component="span" direction="row" alignItems="center" spacing={1}>
-        <Typography component="span">{props.hash}</Typography>
+        <Typography component="span">{text}</Typography>
         <OpenInNewOutlined fontSize="small" />
       </Stack>
     </Link>

package/src/components/checkout/form/phone.tsx

@@ -5,10 +5,9 @@ import { useEffect } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { CountryIso2, FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from 'react-international-phone';
 
+import { isValidCountry } from '../../../libs/util';
 import FormInput from '../../input';
 
-const isValidCountry = (code: string) => defaultCountries.some((x) => x[1] === code);
-
 export default function PhoneInput({ ...props }) {
   const countryFieldName = props.countryFieldName || 'billing_address.country';
 

package/src/components/checkout/pay.tsx

@@ -14,7 +14,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import { useSessionContext } from '../../contexts/session';
 import { useSettingsContext } from '../../contexts/settings';
-import { findCurrency, formatError, getStatementDescriptor } from '../../libs/util';
+import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../../libs/util';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
 import PaymentForm from './form';
@@ -175,7 +175,7 @@ export function CheckoutPayMain({
           postal_code: '',
         },
         customer?.address || {},
-        { country: customer?.address?.country || 'us' }
+        { country: isValidCountry(customer?.address?.country || '') ? customer?.address?.country : 'us' }
       ),
     },
   });

package/src/components/click-boundary.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@mui/material';
+
+import { stopEvent } from '../libs/util';
+
+export default function ClickBoundary({ children }: { children: React.ReactNode }) {
+  return <Box onClick={stopEvent}>{children}</Box>;
+}

package/src/components/confirm.tsx

@@ -17,29 +17,13 @@ export default function ConfirmDialog({
   loading?: boolean;
 }) {
   const { t } = useLocaleContext();
-  const handleConfirm = (e: any) => {
-    try {
-      e.stopPropagation();
-      e.preventDefault();
-      // eslint-disable-next-line no-empty
-    } catch {}
-    onConfirm(e);
-  };
-  const handleCancel = (e: any) => {
-    try {
-      e.stopPropagation();
-      e.preventDefault();
-      // eslint-disable-next-line no-empty
-    } catch {}
-    onCancel(e);
-  };
 
   return (
     <Confirm
       open
       title={title}
-      onConfirm={handleConfirm}
-      onCancel={handleCancel}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
       confirmButton={{
         text: t('common.confirm'),
         props: { color: 'error', size: 'small', variant: 'contained', disabled: !!loading },

package/src/components/customer/actions.tsx

@@ -7,6 +7,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 
 type Props = {
@@ -41,7 +42,7 @@ export default function CustomerActions({ data, onChange, variant }: Props) {
   };
 
   return (
-    <>
+    <ClickBoundary>
       <Actions
         variant={variant}
         actions={[
@@ -68,6 +69,6 @@ export default function CustomerActions({ data, onChange, variant }: Props) {
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

package/src/components/customer/edit.tsx

@@ -5,6 +5,7 @@ import { Button, CircularProgress, Stack } from '@mui/material';
 import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
+import { isValidCountry } from '../../libs/util';
 import CustomerForm from './form';
 
 export default function EditCustomer({
@@ -34,7 +35,7 @@ export default function EditCustomer({
           postal_code: '',
         },
         data.address || {},
-        { country: data.address?.country || 'us' }
+        { country: isValidCountry(data.address?.country || '') ? data.address?.country : 'us' }
       ),
     },
   });

package/src/components/invoice/action.tsx

@@ -8,6 +8,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 
 type Props = {
@@ -78,7 +79,7 @@ export default function InvoiceActions({ data, variant, onChange }: Props) {
   }
 
   return (
-    <>
+    <ClickBoundary>
       <Actions variant={variant} actions={actions} />
       {state.action === 'xxx' && (
         <ConfirmDialog
@@ -89,6 +90,6 @@ export default function InvoiceActions({ data, variant, onChange }: Props) {
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

package/src/components/metadata/form.tsx

@@ -1,7 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { AddOutlined, DeleteOutlineOutlined } from '@mui/icons-material';
-import { Box, Button, IconButton, Stack, TextField, Typography } from '@mui/material';
-import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { Box, Button, IconButton, Stack, Typography } from '@mui/material';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+import FormInput from '../input';
 
 export default function MetadataForm({ title, actions }: { title?: string; actions?: React.ReactNode }) {
   const { t } = useLocaleContext();
@@ -13,15 +15,19 @@ export default function MetadataForm({ title, actions }: { title?: string; actio
       {metadata.fields.map((meta, index) => (
         <Stack key={meta.id} mt={2} spacing={2} direction="row" alignItems="center">
           <Stack direction="row" spacing={2}>
-            <Controller
-              render={({ field }) => <TextField {...field} sx={{ flex: 1 }} placeholder="Key" size="small" />}
+            <FormInput
+              sx={{ flex: 1 }}
+              size="small"
               name={`metadata.${index}.key`}
-              control={control}
+              rules={{ required: t('checkout.required') }}
+              placeholder="Key"
             />
-            <Controller
-              render={({ field }) => <TextField {...field} sx={{ flex: 2 }} placeholder="Value" size="small" />}
+            <FormInput
+              sx={{ flex: 2 }}
+              size="small"
               name={`metadata.${index}.value`}
-              control={control}
+              placeholder="Value"
+              rules={{ required: t('checkout.required') }}
             />
           </Stack>
           <IconButton size="small" onClick={() => metadata.remove(index)}>

package/src/components/payment-intent/actions.tsx

@@ -8,6 +8,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 
 type Props = {
@@ -58,14 +59,14 @@ export default function PaymentIntentActions({ data, variant }: Props) {
   if (variant === 'compact') {
     actions.push({
       label: t('admin.paymentIntent.view'),
-      handler: () => navigate(`/admin/payments/${data.customer_id}`),
+      handler: () => navigate(`/admin/payments/${data.id}`),
       color: 'primary',
       disabled: false,
     });
   }
 
   return (
-    <>
+    <ClickBoundary>
       <Actions variant={variant} actions={actions} />
       {state.action === 'refund' && (
         <ConfirmDialog
@@ -76,6 +77,6 @@ export default function PaymentIntentActions({ data, variant }: Props) {
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

package/src/components/payment-intent/list.tsx

@@ -6,7 +6,7 @@ import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography }
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import api from '../../libs/api';
 import { formatTime, getPaymentIntentStatusColor } from '../../libs/util';
@@ -152,7 +152,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
-          return <Link to={`/admin/customers/${item?.customer.id}`}>{item?.customer.email}</Link>;
+          return item.customer.email;
         },
       },
     });

package/src/components/payment-link/actions.tsx

@@ -7,6 +7,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 import RenamePaymentLink from './rename';
 
@@ -68,7 +69,7 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
   };
 
   return (
-    <>
+    <ClickBoundary>
       <Actions
         variant={variant}
         actions={[
@@ -109,6 +110,6 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

package/src/components/payment-link/item.tsx

@@ -9,6 +9,7 @@ import { useSettingsContext } from '../../contexts/settings';
 import api from '../../libs/api';
 import { formatError, formatPrice } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import InfoCard from '../info-card';
 import EditProduct from '../product/edit';
 
@@ -52,21 +53,23 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
         borderRadius: 2,
         position: 'relative',
       }}>
-      <Actions
-        sx={{ position: 'absolute', top: 0, right: 0 }}
-        actions={[
-          {
-            label: t('admin.product.edit'),
-            handler: () => setState({ editing: true }),
-            color: 'primary',
-          },
-          {
-            label: t('admin.product.remove'),
-            handler: onRemove,
-            color: 'error',
-          },
-        ]}
-      />
+      <ClickBoundary>
+        <Actions
+          sx={{ position: 'absolute', top: 0, right: 0 }}
+          actions={[
+            {
+              label: t('admin.product.edit'),
+              handler: () => setState({ editing: true }),
+              color: 'primary',
+            },
+            {
+              label: t('admin.product.remove'),
+              handler: onRemove,
+              color: 'error',
+            },
+          ]}
+        />
+      </ClickBoundary>
       <Stack direction="column" alignItems="flex-start">
         <InfoCard
           logo={product.images[0]}

package/src/components/payment-method/stripe.tsx

@@ -9,7 +9,6 @@ export default function StripeMethodForm() {
   return (
     <>
       <FormInput
-        key="name"
         name="name"
         type="text"
         rules={{ required: true }}
@@ -17,7 +16,6 @@ export default function StripeMethodForm() {
         placeholder={t('admin.paymentMethod.name.tip')}
       />
       <FormInput
-        key="description"
         name="description"
         type="text"
         rules={{ required: true }}
@@ -25,7 +23,13 @@ export default function StripeMethodForm() {
         placeholder={t('admin.paymentMethod.description.tip')}
       />
       <FormInput
-        key="publishable_key"
+        name="settings.stripe.dashboard"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.stripe.dashboard.label')}
+        placeholder={t('admin.paymentMethod.stripe.dashboard.tip')}
+      />
+      <FormInput
         name="settings.stripe.publishable_key"
         type="text"
         rules={{ required: true }}
@@ -33,7 +37,6 @@ export default function StripeMethodForm() {
         placeholder={t('admin.paymentMethod.stripe.publishable_key.tip')}
       />
       <FormInput
-        key="secret_key"
         name="settings.stripe.secret_key"
         type="password"
         rules={{ required: true }}

package/src/components/price/actions.tsx

@@ -1,6 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 
 type PriceActionProps = {
   onDuplicate: Function;
@@ -11,11 +12,13 @@ export default function PriceActions(props: PriceActionProps) {
   const { t } = useLocaleContext();
 
   return (
-    <Actions
-      actions={[
-        { label: t('admin.price.duplicate'), handler: props.onDuplicate, color: 'primary' },
-        { label: t('admin.price.remove'), handler: props.onRemove, color: 'error' },
-      ]}
-    />
+    <ClickBoundary>
+      <Actions
+        actions={[
+          { label: t('admin.price.duplicate'), handler: props.onDuplicate, color: 'primary' },
+          { label: t('admin.price.remove'), handler: props.onRemove, color: 'error' },
+        ]}
+      />
+    </ClickBoundary>
   );
 }

package/src/components/product/actions.tsx

@@ -7,6 +7,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../libs/api';
 import { formatError } from '../../libs/util';
 import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
 import EditProduct from './edit';
 
@@ -68,7 +69,7 @@ export default function ProductActions({ data, variant, onChange }: ProductActio
   };
 
   return (
-    <>
+    <ClickBoundary>
       <Actions
         variant={variant}
         actions={[
@@ -120,6 +121,6 @@ export default function ProductActions({ data, variant, onChange }: ProductActio
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }

package/src/components/subscription/actions/index.tsx

@@ -9,6 +9,7 @@ import type { LiteralUnion } from 'type-fest';
 import api from '../../../libs/api';
 import { formatError } from '../../../libs/util';
 import Actions from '../../actions';
+import ClickBoundary from '../../click-boundary';
 import ConfirmDialog from '../../confirm';
 import SubscriptionCancelForm from './cancel';
 import SubscriptionPauseForm from './pause';
@@ -111,7 +112,7 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
   }
 
   return (
-    <>
+    <ClickBoundary>
       <Actions variant={variant} actions={actions} />
       {state.action === 'cancel' && (
         <ConfirmDialog
@@ -140,7 +141,7 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
           loading={state.loading}
         />
       )}
-    </>
+    </ClickBoundary>
   );
 }
 

package/src/components/subscription/items/actions.tsx

@@ -3,6 +3,7 @@ import type { TLineItemExpanded } from '@did-pay/types';
 import { useNavigate } from 'react-router-dom';
 
 import Actions from '../../actions';
+import ClickBoundary from '../../click-boundary';
 
 type Props = {
   data: TLineItemExpanded;
@@ -13,19 +14,21 @@ export default function LineItemActions(props: Props) {
   const navigate = useNavigate();
 
   return (
-    <Actions
-      actions={[
-        {
-          label: t('admin.price.view'),
-          handler: () => navigate(`/admin/products/${props.data.price_id}`),
-          color: 'primary',
-        },
-        {
-          label: t('admin.product.view'),
-          handler: () => navigate(`/admin/products/${props.data.price.product_id}`),
-          color: 'primary',
-        },
-      ]}
-    />
+    <ClickBoundary>
+      <Actions
+        actions={[
+          {
+            label: t('admin.price.view'),
+            handler: () => navigate(`/admin/products/${props.data.price_id}`),
+            color: 'primary',
+          },
+          {
+            label: t('admin.product.view'),
+            handler: () => navigate(`/admin/products/${props.data.price.product_id}`),
+            color: 'primary',
+          },
+        ]}
+      />
+    </ClickBoundary>
   );
 }

package/src/libs/util.ts

@@ -15,6 +15,7 @@ import type {
 import { BN, fromUnitToToken } from '@ocap/util';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
+import { defaultCountries } from 'react-international-phone';
 
 import dayjs from './dayjs';
 
@@ -567,3 +568,17 @@ export function getSupportedPaymentCurrencies(items: TLineItemExpanded[]) {
   }, []);
   return Array.from(new Set(currencies));
 }
+
+export function isValidCountry(code: string) {
+  return defaultCountries.some((x) => x[1] === code);
+}
+
+export function stopEvent(e: React.SyntheticEvent<any>) {
+  try {
+    e.stopPropagation();
+    e.preventDefault();
+    // eslint-disable-next-line no-empty
+  } catch {
+    // Do nothing
+  }
+}

package/src/locales/en.tsx

@@ -232,6 +232,10 @@ export default flat({
         tip: 'Not consumer facing',
       },
       stripe: {
+        dashboard: {
+          label: 'Dashboard URL',
+          tip: 'Used to generate links to Stripe dashboard',
+        },
         publishable_key: {
           label: 'Publishable Key',
           tip: 'Publishable Key, See Dashboard > Developers > API Keys',

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -176,7 +176,7 @@ export default function SubscriptionDetail(props: { id: string }) {
           {data.payment_details?.arcblock?.tx_hash && (
             <InfoRow
               label={t('common.txHash')}
-              value={<TxLink hash={data.payment_details.arcblock?.tx_hash} method={data.paymentMethod} />}
+              value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
             />
           )}
         </Stack>

package/src/pages/admin/payments/intents/detail.tsx

@@ -141,12 +141,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
           />
           <InfoRow
             label={t('common.txHash')}
-            value={
-              <TxLink
-                hash={data.payment_details?.arcblock?.tx_hash || data.metadata?.txHash}
-                method={data.paymentMethod}
-              />
-            }
+            value={<TxLink details={data.payment_details as any} method={data.paymentMethod} />}
           />
         </Stack>
       </Box>

package/src/pages/admin/settings/payment-methods/create.tsx

@@ -9,11 +9,13 @@ import { dispatch } from 'use-bus';
 
 import DrawerForm from '../../../../components/drawer-form';
 import PaymentMethodForm from '../../../../components/payment-method/form';
+import { useSettingsContext } from '../../../../contexts/settings';
 import api from '../../../../libs/api';
 import { formatError } from '../../../../libs/util';
 
 export default function PaymentMethodCreate() {
   const { t } = useLocaleContext();
+  const settings = useSettingsContext();
 
   const methods = useForm<TPaymentMethod>({
     defaultValues: {
@@ -27,6 +29,7 @@ export default function PaymentMethodCreate() {
           explorer_host: '',
         },
         stripe: {
+          dashboard: settings.livemode ? 'https://dashboard.stripe.com' : 'https://dashboard.stripe.com/test',
           publishable_key: '',
           secret_key: '',
         },