import { FC } from 'react' import cn from 'clsx' import { CardNumberElement, CardExpiryElement, CardCvcElement, useStripe, useElements } from '@stripe/react-stripe-js' import useAddCard from '@framework/customer/card/use-add-item' import { Button, Text } from '@components/ui' import { useUI } from '@components/ui/context' import SidebarLayout from '@components/common/SidebarLayout' import countries from '@lib/countries' import s from './PaymentMethodView.module.css' interface Form extends HTMLFormElement { cardHolder: HTMLInputElement cardNumber: HTMLInputElement cardExpireDate: HTMLInputElement cardCvc: HTMLInputElement firstName: HTMLInputElement lastName: HTMLInputElement company: HTMLInputElement streetNumber: HTMLInputElement zipCode: HTMLInputElement city: HTMLInputElement country: HTMLSelectElement } const PaymentMethodView: FC = () => { const { paymentMethodDetails, setPaymentMethodDetails, setSidebarView } = useUI() const { address } = paymentMethodDetails const addCard = useAddCard() const stripe = useStripe() const elements = useElements() async function handleSubmit(event: React.ChangeEvent
) { event.preventDefault() if (!stripe || !elements) { return } const card = elements.getElement(CardNumberElement) const { error, paymentMethod } = await stripe.createPaymentMethod({ type: 'card', card }) if (error) { console.error(error) } setPaymentMethodDetails({ address, paymentMethod }) await addCard({ cardHolder: event.target.cardHolder.value, cardNumber: event.target.cardNumber.value, cardExpireDate: event.target.cardExpireDate.value, cardCvc: event.target.cardCvc.value, firstName: event.target.firstName.value, lastName: event.target.lastName.value, company: event.target.company.value, streetNumber: event.target.streetNumber.value, zipCode: event.target.zipCode.value, city: event.target.city.value, country: event.target.country.value, }) setSidebarView('CHECKOUT_VIEW') } const updateAddressData = ({ target }: any) => setPaymentMethodDetails({ ...paymentMethodDetails, address: { ...paymentMethodDetails.address, [target.name]: target.value, }, }) return ( setSidebarView('CHECKOUT_VIEW')}>
Payment Method

) } export default PaymentMethodView