Payment Element & Card Element

Q: Qual é a principal diferença entre PaymentElement e CardElement?

PaymentElement é um componente unificado que suporta cartões, carteiras, transferências bancárias e mais de 40 métodos de pagamento em um único componente. CardElement é uma entrada de linha única que suporta apenas pagamentos com cartão. PaymentElement é recomendado para a maioria das novas integrações.

Q: Quais são as opções de layout disponíveis para PaymentElement?

"tabs" -- métodos de pagamento mostrados como abas selecionáveis "accordion" -- métodos de pagamento mostrados como seções expansíveis "auto" -- a Stripe decide o melhor layout

Q: Como a Appearance API funciona para estilizar Stripe Elements?

Escolha um theme base ("stripe", "night", "flat") Substitua tokens de design via variables (cores, fontes, raio da borda, espaçamento) Selecione elementos específicos via rules usando seletores personalizados da Stripe (.Input, .Label, .Tab)

Q: Como você controla quais detalhes de faturamento o PaymentElement coleta?

Defina um campo como "never" se você o coletar em seu próprio formulário.

Q: Quais são os componentes de campos de cartão divididos e quando usá-los?

CardNumberElement, CardExpiryElement, CardCvcElement Use-os quando precisar de controle total do layout sobre campos de cartão individuais. Eles suportam apenas pagamentos com cartão, não outros métodos de pagamento.

Q: Qual é a diferença entre o sistema de estilização do CardElement e a Appearance API?

CardElement usa uma prop style com estados base, invalid e complete. PaymentElement usa a Appearance API com theme, variables e rules. Os dois sistemas não são intercambiáveis.

Q: TypeScript: Que tipo a prop de opções do PaymentElement aceita?

Ela aceita PaymentElementOptions de @stripe/stripe-js, que inclui layout, fields, terms, wallets e outras configurações. Importe-a para segurança de tipo ao construir configurações dinâmicas.

Receita

Use PaymentElement para uma entrada de pagamento unificada que suporta cartões, carteiras e transferências bancárias. Use CardElement quando você precisar apenas de pagamentos com cartão e quiser controle mais refinado por campo. Estilize ambos usando a Appearance API da Stripe.

PaymentElement (recomendado para a maioria dos casos):

// app/checkout/payment-form.tsx
"use client";
 
import { PaymentElement, useStripe, useElements } from "@stripe/react-stripe-js";
import { useState, type FormEvent } from "react";
 
export function PaymentForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string | null>(null);
  const [processing, setProcessing] = useState(false);
 
  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    if (!stripe || !elements) return;
 
    setProcessing(true);
    const { error: submitError } = await elements.submit();
    if (submitError) {
      setError(submitError.message ?? "Erro de validação");
      setProcessing(false);
      return;
    }
 
    const { error: confirmError } = await stripe.confirmPayment({
      elements,
      confirmParams: { return_url: `${window.location.origin}/success` },
    });
 
    if (confirmError) {
      setError(confirmError.message ?? "Falha no pagamento");
      setProcessing(false);
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      {error && <p className="text-red-500 mt-2">{error}</p>}
      <button type="submit" disabled={!stripe || processing}>
        {processing ? "Processando..." : "Pagar"}
      </button>
    </form>
  );
}

CardElement (apenas cartão):

"use client";
 
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import { useState, type FormEvent } from "react";
 
export function CardForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string | null>(null);
 
  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    if (!stripe || !elements) return;
 
    const cardElement = elements.getElement(CardElement);
    if (!cardElement) return;
 
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: "card",
      card: cardElement,
    });
 
    if (error) {
      setError(error.message ?? "Erro");
    } else {
      // Envie paymentMethod.id para o seu servidor
      console.log("PaymentMethod:", paymentMethod.id);
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <CardElement options={{ style: { base: { fontSize: "16px" } } }} />
      {error && <p className="text-red-500 mt-2">{error}</p>}
      <button type="submit" disabled={!stripe}>Pagar</button>
    </form>
  );
}

Exemplo Funcional

Um formulário de pagamento estilizado que combina com um aplicativo de tema escuro:

// app/checkout/styled-checkout.tsx
"use client";
 
import { useEffect, useState } from "react";
import { Elements } from "@stripe/react-stripe-js";
import type { Appearance } from "@stripe/stripe-js";
import { stripePromise } from "@/lib/stripe-client";
import { createPaymentIntent } from "@/app/actions/payment";
import { PaymentForm } from "./payment-form";
 
const appearance: Appearance = {
  theme: "night",
  variables: {
    colorPrimary: "#6366f1",
    colorBackground: "#1e1e2e",
    colorText: "#e2e8f0",
    colorDanger: "#ef4444",
    fontFamily: "Inter, system-ui, sans-serif",
    borderRadius: "8px",
    spacingUnit: "4px",
  },
  rules: {
    ".Input": {
      border: "1px solid #334155",
      boxShadow: "none",
      padding: "12px",
    },
    ".Input:focus": {
      border: "1px solid #6366f1",
      boxShadow: "0 0 0 1px #6366f1",
    },
    ".Label": {
      fontWeight: "500",
      fontSize: "14px",
    },
    ".Tab": {
      border: "1px solid #334155",
      borderRadius: "8px",
    },
    ".Tab--selected": {
      backgroundColor: "#6366f1",
      borderColor: "#6366f1",
    },
  },
};
 
export default function StyledCheckout() {
  const [clientSecret, setClientSecret] = useState<string | null>(null);
 
  useEffect(() => {
    createPaymentIntent(4999).then(({ clientSecret }) => {
      setClientSecret(clientSecret);
    });
  }, []);
 
  if (!clientSecret) return <div className="text-white">Carregando...</div>;
 
  return (
    <div className="max-w-lg mx-auto p-8 bg-[#1e1e2e] rounded-xl">
      <h2 className="text-xl font-bold text-white mb-6">Complete o Pagamento</h2>
      <Elements
        stripe={stripePromise}
        options={{
          clientSecret,
          appearance,
          layout: {
            type: "tabs",
            defaultCollapsed: false,
          },
        }}
      >
        <PaymentForm />
      </Elements>
    </div>
  );
}

Mergulho Profundo

Como Funciona

PaymentElement é um único componente que renderiza dinamicamente campos de entrada para todos os métodos de pagamento habilitados (cartões, Apple Pay, Google Pay, débitos bancários, etc.). A Stripe determina quais métodos exibir com base na moeda, valor da transação e localização do cliente.
CardElement renderiza uma entrada de cartão de linha única com campos de número, validade e CVC combinados. Ele suporta apenas pagamentos com cartão.
A Appearance API controla a estilização através de theme, variables e rules. Temas (stripe, night, flat) fornecem uma base; variáveis substituem tokens de design; regras visam seletores específicos semelhantes a CSS para elementos individuais.
As opções de layout para PaymentElement controlam como os métodos de pagamento são exibidos: "tabs" os mostra como abas selecionáveis, "accordion" os mostra como seções expansíveis e "auto" deixa a Stripe decidir.
A coleta de detalhes de faturamento pode ser configurada por campo. Por padrão, PaymentElement coleta os campos exigidos pelo método de pagamento selecionado.

Variações

Layout de acordeão:

<Elements
  stripe={stripePromise}
  options={{
    clientSecret,
    layout: { type: "accordion", defaultCollapsed: false, radios: true },
  }}
>
  <PaymentForm />
</Elements>

Controlar a coleta de detalhes de faturamento:

<PaymentElement
  options={{
    layout: "tabs",
    fields: {
      billingDetails: {
        name: "auto",
        email: "never",    // colete o e-mail você mesmo
        phone: "never",
        address: "auto",
      },
    },
  }}
/>

Campos de cartão divididos (CardNumber, CardExpiry, CardCvc):

import {
  CardNumberElement,
  CardExpiryElement,
  CardCvcElement,
} from "@stripe/react-stripe-js";
 
function SplitCardForm() {
  return (
    <div className="space-y-4">
      <div>
        <label>Número do Cartão</label>
        <CardNumberElement />
      </div>
      <div className="flex gap-4">
        <div className="flex-1">
          <label>Validade</label>
          <CardExpiryElement />
        </div>
        <div className="flex-1">
          <label>CVC</label>
          <CardCvcElement />
        </div>
      </div>
    </div>
  );
}

Notas TypeScript

Importe Appearance de @stripe/stripe-js para tipar sua configuração de aparência.
PaymentElement aceita PaymentElementProps que inclui uma prop options tipada como PaymentElementOptions.
As opções do CardElement usam CardElementOptions com uma API de estilização diferente (style.base, style.invalid, etc.) do que a Appearance API.

import type { Appearance, LayoutObject } from "@stripe/stripe-js";
 
const layout: LayoutObject = {
  type: "tabs",
  defaultCollapsed: false,
};

Armadilhas

PaymentElement requer um clientSecret no provedor Elements. Você não pode usá-lo sem um PaymentIntent ou SetupIntent.
CardElement usa um sistema de estilização diferente (prop style) do que PaymentElement (Appearance API). Eles não são intercambiáveis.
Não monte PaymentElement e CardElement no mesmo provedor Elements. Escolha um.
As rules da Appearance API usam seletores personalizados da Stripe (.Input, .Label, .Tab), não seletores CSS padrão. Verifique a documentação para a lista completa.
PaymentElement mostra métodos de pagamento com base na configuração do PaymentIntent. Se você só vê cartões, verifique se automatic_payment_methods está habilitado e se seu Painel Stripe tem outros métodos configurados.
Fontes carregadas via @font-face em seu CSS não estão automaticamente disponíveis dentro dos Stripe Elements. Passe-as através da opção fonts em Elements.

Alternativas

Abordagem	Prós	Contras
PaymentElement	Todos os métodos de pagamento, componente único, moderno	Requer clientSecret, menos controle granular
CardElement	Entrada de cartão de linha única e simples	Apenas cartões, API de estilização mais antiga
Campos de cartão divididos	Controle total do layout sobre cada campo	Mais marcação, apenas cartões
Stripe Checkout	Código de UI zero	Sai do seu site

FAQs

Qual é a principal diferença entre PaymentElement e CardElement?

PaymentElement é um componente unificado que suporta cartões, carteiras, transferências bancárias e mais de 40 métodos de pagamento em um único componente.
CardElement é uma entrada de linha única que suporta apenas pagamentos com cartão.
PaymentElement é recomendado para a maioria das novas integrações.

Quais são as opções de layout disponíveis para PaymentElement?

"tabs" -- métodos de pagamento mostrados como abas selecionáveis
"accordion" -- métodos de pagamento mostrados como seções expansíveis
"auto" -- a Stripe decide o melhor layout

Como a Appearance API funciona para estilizar Stripe Elements?

Escolha um theme base ("stripe", "night", "flat")
Substitua tokens de design via variables (cores, fontes, raio da borda, espaçamento)
Selecione elementos específicos via rules usando seletores personalizados da Stripe (.Input, .Label, .Tab)

Armadilha: Você pode montar tanto PaymentElement quanto CardElement no mesmo provedor Elements?

Não. Você deve escolher um ou outro dentro de um único provedor <Elements>. Montar ambos causa conflitos e comportamento indefinido.

Como você controla quais detalhes de faturamento o PaymentElement coleta?

<PaymentElement
  options={{
    fields: {
      billingDetails: {
        name: "auto",
        email: "never",
        phone: "never",
        address: "auto",
      },
    },
  }}
/>

Defina um campo como "never" se você o coletar em seu próprio formulário.

Quais são os componentes de campos de cartão divididos e quando usá-los?

CardNumberElement, CardExpiryElement, CardCvcElement
Use-os quando precisar de controle total do layout sobre campos de cartão individuais.
Eles suportam apenas pagamentos com cartão, não outros métodos de pagamento.

Por que o PaymentElement pode mostrar apenas pagamentos com cartão, mesmo com automatic_payment_methods habilitado?

Verifique as configurações de método de pagamento do seu Painel Stripe. automatic_payment_methods mostra métodos que estão habilitados no Painel e são aplicáveis à moeda e localização do cliente na transação.

Armadilha: Por que fontes personalizadas do seu CSS não funcionam dentro dos Stripe Elements?

Os Stripe Elements renderizam dentro de iframes e não podem acessar fontes carregadas via @font-face no seu CSS. Você deve passar as fontes explicitamente através da opção fonts no componente <Elements>.

TypeScript: Como você tipa um objeto de configuração de Appearance?

import type { Appearance, LayoutObject } from "@stripe/stripe-js";
 
const appearance: Appearance = {
  theme: "night",
  variables: { colorPrimary: "#6366f1" },
};
const layout: LayoutObject = { type: "tabs" };

Qual é a diferença entre o sistema de estilização do CardElement e a Appearance API?

CardElement usa uma prop style com estados base, invalid e complete.
PaymentElement usa a Appearance API com theme, variables e rules.
Os dois sistemas não são intercambiáveis.

TypeScript: Que tipo a prop de opções do PaymentElement aceita?

Ela aceita PaymentElementOptions de @stripe/stripe-js, que inclui layout, fields, terms, wallets e outras configurações. Importe-a para segurança de tipo ao construir configurações dinâmicas.

O PaymentElement requer um clientSecret no provedor Elements?

Sim. Ao contrário do CardElement, o PaymentElement requer um clientSecret de um PaymentIntent ou SetupIntent passado através da prop options no <Elements>. Sem ele, o PaymentElement não renderizará.

Links Relacionados

Receita

PaymentElement (recomendado para a maioria dos casos):

// app/checkout/payment-form.tsx
"use client";
 
import { PaymentElement, useStripe, useElements } from "@stripe/react-stripe-js";
import { useState, type FormEvent } from "react";
 
export function PaymentForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string | null>(null);
  const [processing, setProcessing] = useState(false);
 
  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    if (!stripe || !elements) return;
 
    setProcessing(true);
    const { error: submitError } = await elements.submit();
    if (submitError) {
      setError(submitError.message ?? "Erro de validação");
      setProcessing(false);
      return;
    }
 
    const { error: confirmError } = await stripe.confirmPayment({
      elements,
      confirmParams: { return_url: `${window.location.origin}/success` },
    });
 
    if (confirmError) {
      setError(confirmError.message ?? "Falha no pagamento");
      setProcessing(false);
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      {error && <p className="text-red-500 mt-2">{error}</p>}
      <button type="submit" disabled={!stripe || processing}>
        {processing ? "Processando..." : "Pagar"}
      </button>
    </form>
  );
}

CardElement (apenas cartão):

"use client";
 
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import { useState, type FormEvent } from "react";
 
export function CardForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string | null>(null);
 
  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    if (!stripe || !elements) return;
 
    const cardElement = elements.getElement(CardElement);
    if (!cardElement) return;
 
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: "card",
      card: cardElement,
    });
 
    if (error) {
      setError(error.message ?? "Erro");
    } else {
      // Envie paymentMethod.id para o seu servidor
      console.log("PaymentMethod:", paymentMethod.id);
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <CardElement options={{ style: { base: { fontSize: "16px" } } }} />
      {error && <p className="text-red-500 mt-2">{error}</p>}
      <button type="submit" disabled={!stripe}>Pagar</button>
    </form>
  );
}

Exemplo Funcional

Um formulário de pagamento estilizado que combina com um aplicativo de tema escuro:

// app/checkout/styled-checkout.tsx
"use client";
 
import { useEffect, useState } from "react";
import { Elements } from "@stripe/react-stripe-js";
import type { Appearance } from "@stripe/stripe-js";
import { stripePromise } from "@/lib/stripe-client";
import { createPaymentIntent } from "@/app/actions/payment";
import { PaymentForm } from "./payment-form";
 
const appearance: Appearance = {
  theme: "night",
  variables: {
    colorPrimary: "#6366f1",
    colorBackground: "#1e1e2e",
    colorText: "#e2e8f0",
    colorDanger: "#ef4444",
    fontFamily: "Inter, system-ui, sans-serif",
    borderRadius: "8px",
    spacingUnit: "4px",
  },
  rules: {
    ".Input": {
      border: "1px solid #334155",
      boxShadow: "none",
      padding: "12px",
    },
    ".Input:focus": {
      border: "1px solid #6366f1",
      boxShadow: "0 0 0 1px #6366f1",
    },
    ".Label": {
      fontWeight: "500",
      fontSize: "14px",
    },
    ".Tab": {
      border: "1px solid #334155",
      borderRadius: "8px",
    },
    ".Tab--selected": {
      backgroundColor: "#6366f1",
      borderColor: "#6366f1",
    },
  },
};
 
export default function StyledCheckout() {
  const [clientSecret, setClientSecret] = useState<string | null>(null);
 
  useEffect(() => {
    createPaymentIntent(4999).then(({ clientSecret }) => {
      setClientSecret(clientSecret);
    });
  }, []);
 
  if (!clientSecret) return <div className="text-white">Carregando...</div>;
 
  return (
    <div className="max-w-lg mx-auto p-8 bg-[#1e1e2e] rounded-xl">
      <h2 className="text-xl font-bold text-white mb-6">Complete o Pagamento</h2>
      <Elements
        stripe={stripePromise}
        options={{
          clientSecret,
          appearance,
          layout: {
            type: "tabs",
            defaultCollapsed: false,
          },
        }}
      >
        <PaymentForm />
      </Elements>
    </div>
  );
}

Mergulho Profundo

Como Funciona

PaymentElement é um único componente que renderiza dinamicamente campos de entrada para todos os métodos de pagamento habilitados (cartões, Apple Pay, Google Pay, débitos bancários, etc.). A Stripe determina quais métodos exibir com base na moeda, valor da transação e localização do cliente.
CardElement renderiza uma entrada de cartão de linha única com campos de número, validade e CVC combinados. Ele suporta apenas pagamentos com cartão.
A Appearance API controla a estilização através de theme, variables e rules. Temas (stripe, night, flat) fornecem uma base; variáveis substituem tokens de design; regras visam seletores específicos semelhantes a CSS para elementos individuais.
As opções de layout para PaymentElement controlam como os métodos de pagamento são exibidos: "tabs" os mostra como abas selecionáveis, "accordion" os mostra como seções expansíveis e "auto" deixa a Stripe decidir.
A coleta de detalhes de faturamento pode ser configurada por campo. Por padrão, PaymentElement coleta os campos exigidos pelo método de pagamento selecionado.

Variações

Layout de acordeão:

<Elements
  stripe={stripePromise}
  options={{
    clientSecret,
    layout: { type: "accordion", defaultCollapsed: false, radios: true },
  }}
>
  <PaymentForm />
</Elements>

Controlar a coleta de detalhes de faturamento:

<PaymentElement
  options={{
    layout: "tabs",
    fields: {
      billingDetails: {
        name: "auto",
        email: "never",    // colete o e-mail você mesmo
        phone: "never",
        address: "auto",
      },
    },
  }}
/>

Campos de cartão divididos (CardNumber, CardExpiry, CardCvc):

import {
  CardNumberElement,
  CardExpiryElement,
  CardCvcElement,
} from "@stripe/react-stripe-js";
 
function SplitCardForm() {
  return (
    <div className="space-y-4">
      <div>
        <label>Número do Cartão</label>
        <CardNumberElement />
      </div>
      <div className="flex gap-4">
        <div className="flex-1">
          <label>Validade</label>
          <CardExpiryElement />
        </div>
        <div className="flex-1">
          <label>CVC</label>
          <CardCvcElement />
        </div>
      </div>
    </div>
  );
}

Notas TypeScript

Importe Appearance de @stripe/stripe-js para tipar sua configuração de aparência.
PaymentElement aceita PaymentElementProps que inclui uma prop options tipada como PaymentElementOptions.
As opções do CardElement usam CardElementOptions com uma API de estilização diferente (style.base, style.invalid, etc.) do que a Appearance API.

import type { Appearance, LayoutObject } from "@stripe/stripe-js";
 
const layout: LayoutObject = {
  type: "tabs",
  defaultCollapsed: false,
};

Armadilhas

PaymentElement requer um clientSecret no provedor Elements. Você não pode usá-lo sem um PaymentIntent ou SetupIntent.
CardElement usa um sistema de estilização diferente (prop style) do que PaymentElement (Appearance API). Eles não são intercambiáveis.
Não monte PaymentElement e CardElement no mesmo provedor Elements. Escolha um.
As rules da Appearance API usam seletores personalizados da Stripe (.Input, .Label, .Tab), não seletores CSS padrão. Verifique a documentação para a lista completa.
PaymentElement mostra métodos de pagamento com base na configuração do PaymentIntent. Se você só vê cartões, verifique se automatic_payment_methods está habilitado e se seu Painel Stripe tem outros métodos configurados.
Fontes carregadas via @font-face em seu CSS não estão automaticamente disponíveis dentro dos Stripe Elements. Passe-as através da opção fonts em Elements.

Alternativas

Abordagem	Prós	Contras
PaymentElement	Todos os métodos de pagamento, componente único, moderno	Requer clientSecret, menos controle granular
CardElement	Entrada de cartão de linha única e simples	Apenas cartões, API de estilização mais antiga
Campos de cartão divididos	Controle total do layout sobre cada campo	Mais marcação, apenas cartões
Stripe Checkout	Código de UI zero	Sai do seu site

FAQs

Qual é a principal diferença entre PaymentElement e CardElement?

PaymentElement é um componente unificado que suporta cartões, carteiras, transferências bancárias e mais de 40 métodos de pagamento em um único componente.
CardElement é uma entrada de linha única que suporta apenas pagamentos com cartão.
PaymentElement é recomendado para a maioria das novas integrações.

Quais são as opções de layout disponíveis para PaymentElement?

"tabs" -- métodos de pagamento mostrados como abas selecionáveis
"accordion" -- métodos de pagamento mostrados como seções expansíveis
"auto" -- a Stripe decide o melhor layout

Como a Appearance API funciona para estilizar Stripe Elements?

Escolha um theme base ("stripe", "night", "flat")
Substitua tokens de design via variables (cores, fontes, raio da borda, espaçamento)
Selecione elementos específicos via rules usando seletores personalizados da Stripe (.Input, .Label, .Tab)

Armadilha: Você pode montar tanto PaymentElement quanto CardElement no mesmo provedor Elements?

Não. Você deve escolher um ou outro dentro de um único provedor <Elements>. Montar ambos causa conflitos e comportamento indefinido.

Como você controla quais detalhes de faturamento o PaymentElement coleta?

<PaymentElement
  options={{
    fields: {
      billingDetails: {
        name: "auto",
        email: "never",
        phone: "never",
        address: "auto",
      },
    },
  }}
/>

Defina um campo como "never" se você o coletar em seu próprio formulário.

Quais são os componentes de campos de cartão divididos e quando usá-los?

CardNumberElement, CardExpiryElement, CardCvcElement
Use-os quando precisar de controle total do layout sobre campos de cartão individuais.
Eles suportam apenas pagamentos com cartão, não outros métodos de pagamento.

Por que o PaymentElement pode mostrar apenas pagamentos com cartão, mesmo com automatic_payment_methods habilitado?

Armadilha: Por que fontes personalizadas do seu CSS não funcionam dentro dos Stripe Elements?

TypeScript: Como você tipa um objeto de configuração de Appearance?

import type { Appearance, LayoutObject } from "@stripe/stripe-js";
 
const appearance: Appearance = {
  theme: "night",
  variables: { colorPrimary: "#6366f1" },
};
const layout: LayoutObject = { type: "tabs" };

Qual é a diferença entre o sistema de estilização do CardElement e a Appearance API?

CardElement usa uma prop style com estados base, invalid e complete.
PaymentElement usa a Appearance API com theme, variables e rules.
Os dois sistemas não são intercambiáveis.

TypeScript: Que tipo a prop de opções do PaymentElement aceita?

O PaymentElement requer um clientSecret no provedor Elements?

Payment Element & Card Element

Buscar na documentação

Payment Element & Card Element