- Set stripe payment element to accordion layout (#18056)

- Removed hardcoded payment_method_types for checkouts and immediate payments

apps/web/server/lib/auth/sso/[provider]/getServerSideProps.tsx

@@ -128,7 +128,6 @@ const getStripePremiumUsernameUrl = async ({
 
   const checkoutSession = await stripe.checkout.sessions.create({
     mode: "subscription",
-    payment_method_types: ["card"],
     customer: customer.id,
     line_items: [
       {

packages/app-store/_utils/paid-apps.ts

@@ -26,7 +26,6 @@ export const withPaidAppRedirect = async ({
     success_url: redirect_uri,
     cancel_url: redirect_uri,
     mode: appPaidMode === "subscription" ? "subscription" : "payment",
-    payment_method_types: ["card"],
     allow_promotion_codes: true,
     customer: stripeCustomerId,
     line_items: [

packages/app-store/stripepayment/api/subscription.ts

@@ -40,7 +40,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const return_url = `${WEBAPP_URL}/api/integrations/stripepayment/paymentCallback?checkoutSessionId={CHECKOUT_SESSION_ID}&callbackUrl=${callbackUrl}`;
     const createSessionParams: Stripe.Checkout.SessionCreateParams = {
       mode: "subscription",
-      payment_method_types: ["card"],
       line_items: [
         {
           quantity: 1,

packages/app-store/stripepayment/lib/PaymentService.ts

@@ -87,7 +87,6 @@ export class PaymentService implements IAbstractPaymentService {
       const params: Stripe.PaymentIntentCreateParams = {
         amount: payment.amount,
         currency: payment.currency,
-        payment_method_types: ["card"],
         customer: customer.id,
         metadata: {
           identifier: "cal.com",

packages/features/auth/signup/handlers/calcomHandler.ts

@@ -109,7 +109,6 @@ async function handler(req: RequestWithUsernameStatus, res: NextApiResponse) {
   if (req.usernameStatus.statusCode === 402) {
     const checkoutSession = await stripe.checkout.sessions.create({
       mode: "subscription",
-      payment_method_types: ["card"],
       customer: customer.id,
       line_items: [
         {

packages/features/ee/payments/components/Payment.tsx

@@ -1,7 +1,6 @@
-import type { Payment } from "@prisma/client";
-import type { EventType } from "@prisma/client";
+import type { EventType, Payment } from "@prisma/client";
 import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import type { StripeElementLocale, StripeElements } from "@stripe/stripe-js";
+import type { StripeElementLocale, StripeElements, StripePaymentElementOptions } from "@stripe/stripe-js";
 import { useRouter } from "next/navigation";
 import type { SyntheticEvent } from "react";
 import { useEffect, useState } from "react";
@@ -63,6 +62,10 @@ export const PaymentFormComponent = (
   const [holdAcknowledged, setHoldAcknowledged] = useState<boolean>(paymentOption === "HOLD" ? false : true);
   const disableButtons = isCanceling || !holdAcknowledged || ["processing", "error"].includes(state.status);
 
+  const paymentElementOptions = {
+    layout: "accordion",
+  } as StripePaymentElementOptions;
+
   useEffect(() => {
     elements?.update({ locale: i18n.language as StripeElementLocale });
   }, [elements, i18n.language]);
@@ -70,7 +73,7 @@ export const PaymentFormComponent = (
   return (
     <form id="payment-form" className="bg-subtle mt-4 rounded-md p-6" onSubmit={props.onSubmit}>
       <div>
-        <PaymentElement onChange={() => onPaymentElementChange()} />
+        <PaymentElement options={paymentElementOptions} onChange={(_) => onPaymentElementChange()} />
       </div>
       {paymentOption === "HOLD" && (
         <div className="bg-info mb-5 mt-2 rounded-md p-3">