Stripe Element에서 카드 번호 입력 필드를 세로로 정렬하고 싶습니다.

배경

완성 이미지

양식 생성

import { loadStripe, StripeElementStyle } from '@stripe/stripe-js';

const style: StripeElementStyle = {
  base: {
    fontSize: '16px',
  },
};

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();

const cardNumberElement = elements.create('cardNumber', { style });
const cardExpiryElement = elements.create('cardExpiry', { style });
const cardCvcElement = elements.create('cardCvc', { style });

cardNumberElement.mount('#card-number-input');
cardExpiryElement.mount('#card-expiry-input');
cardCvcElement.mount('#card-cvc-input');

return cardNumberElement;

양식 제출

await stripe.createToken(cardNumberElement);