@stripe/stripe-js#PaymentMethod TypeScript Examples

CardInput = ({ callback }: { callback?: (paymentMethod: PaymentMethod) => void }) => {
	return (
		<Elements stripe={stripePromise}>
			<Form callback={callback} />
		</Elements>
	)
}

usePaymentMethods = (): [PaymentMethod[], boolean, Error | undefined] => {
	const [data, isLoading, error] = useFunctions<any>('stripe-v1-paymentMethod-list', { type: 'card' })
	const methods = data?.data as PaymentMethod[]
	return [methods, isLoading, error]
}

PaymentMethods = ({ user }: { user: Commerce.User }) => {

	const [setProcessing] = useProcessing()
	const [paymentMethods, isLoading, error, setPaymentMethods] = useFetchList<PaymentMethod>("stripe-v1-paymentMethod-list", { type: "card" })
	const [showDialog, close] = useDialog()
	const [setMessage] = useSnackbar()

	if (error) {
		console.error(error)
	}

	const setDefaultPaymentMethod = async (paymentMethod: PaymentMethod) => {
		setProcessing(true)
		const customerUpdate = firebase.functions().httpsCallable("stripe-v1-customer-update")
		try {
			const response = await customerUpdate({
				// payment_method: paymentMethod.id,
				invoice_settings: {
					default_payment_method: paymentMethod.id
				}
			})
			const { result, error } = response.data
			if (error) {
				console.error(error)
				setProcessing(false)
				setMessage("error", error.message)
				return
			}
			const card = new Commerce.Card(paymentMethod.id)
			card.brand = paymentMethod.card!.brand
			card.expMonth = paymentMethod.card!.exp_month
			card.expYear = paymentMethod.card!.exp_year
			card.last4 = paymentMethod.card!.last4
			await user.documentReference.set({
				defaultCard: card.convert()
			}, { merge: true })
			console.log("[APP] set default payment method", result)
		} catch (error) {
			console.error(error)
		}
		setProcessing(false)
	}

	const paymentMethodDetach = async (deletePaymentMethod: PaymentMethod) => {
		if (!deletePaymentMethod) {
			return
		}
		setProcessing(true)
		try {
			const detach = firebase.functions().httpsCallable("stripe-v1-paymentMethod-detach")
			const response = await detach({
				paymentMethodID: deletePaymentMethod.id
			})
			const { result, error } = response.data
			console.log("[APP] detach payment method", result)
			const data = paymentMethods.filter(method => method.id !== deletePaymentMethod.id)
			if (deletePaymentMethod.id === user.defaultCard?.id) {
				if (data.length > 0) {
					const method = data[0]
					await setDefaultPaymentMethod(method)
				} else {
					await user.documentReference.set({
						defaultCard: null
					}, { merge: true })
				}
			}
			setPaymentMethods(data)
		} catch (error) {
			console.error(error)
		}
		setProcessing(false)
	}

	if (isLoading) {
		return (
			<Paper>
				<DataLoading />
			</Paper>
		)
	}

	return (
		<Paper>
			<AppBar position="static" color="transparent" elevation={0}>
				<Toolbar>
					<Box fontSize={18} fontWeight={600}>
						Payments
          </Box>
				</Toolbar>
			</AppBar>
			{
				paymentMethods.map(method => {
					return (
						<ExpansionPanel key={method.id} >
							<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
								<FormControlLabel
									onClick={async (event) => {
										event.stopPropagation()
										await setDefaultPaymentMethod(method)
									}}
									onFocus={(event) => event.stopPropagation()}
									control={<Checkbox checked={user?.defaultCard?.id === method.id} />}
									label={
										<Box display="flex" alignItems="center" flexGrow={1} style={{ width: "140px" }}>
											<Box display="flex" alignItems="center" flexGrow={1}>
												<i className={`pf ${CardBrand[method.card!.brand]}`}></i>
											</Box>
											<Box justifySelf="flex-end">
												{`• • • •  ${method.card?.last4}`}
											</Box>
										</Box>
									}
								/>
							</ExpansionPanelSummary>
							<ExpansionPanelDetails>
								<Typography>
									expire {`${method.card?.exp_year}/${method.card?.exp_month}`}
								</Typography>
							</ExpansionPanelDetails>
							<Divider />
							<ExpansionPanelActions>
								<Button size="small" onClick={async () => {
									showDialog("Delete", "Do you want to remove it?", [
										{
											title: "Cancel",
											handler: close
										},
										{
											title: "OK",
											handler: async () => {
												await paymentMethodDetach(method)
											}
										}])
								}}>Delete</Button>
							</ExpansionPanelActions>
						</ExpansionPanel>
					)
				})
			}
			<List>
				<ListItem button component={Link} to="/checkout/paymentMethod">
					<ListItemIcon>
						<AddIcon color="secondary" />
					</ListItemIcon>
					<ListItemText primary={`Add new payment method`} />
				</ListItem>
			</List>
		</Paper>
	)
}

Form = ({ callback }: { callback?: (paymentMethod: PaymentMethod) => void }) => {
	const classes = useStyles()
	const [auth] = useAuthUser()
	const [user, isUserLoading] = useContext(UserContext)
	const stripe = useStripe();
	const elements = useElements()
	const [isDisabled, setDisable] = useState(true)
	const [setProcessing] = useProcessing()
	const pop = usePop()
	const handleSubmit = async (event) => {
		event.preventDefault()
		if (!auth) return
		if (!stripe) return
		if (!elements) return
		const card = elements.getElement(CardElement)
		if (!card) return

		setProcessing(true)

		try {
			const { error, paymentMethod } = await stripe.createPaymentMethod({
				type: "card",
				card: card
			})

			if (error) {
				console.log(error)
				setProcessing(false)
				return
			}

			if (!paymentMethod) {
				setProcessing(false)
				return
			}

			const cardMethod = new Commerce.Card(paymentMethod.id)
			cardMethod.id = paymentMethod.id
			cardMethod.brand = paymentMethod.card!.brand
			cardMethod.expMonth = paymentMethod.card!.exp_month
			cardMethod.expYear = paymentMethod.card!.exp_year
			cardMethod.last4 = paymentMethod.card!.last4

			let updateData: any = {
				defaultCard: cardMethod.convert()
			}

			try {
				const attach = firebase.functions().httpsCallable("stripe-v1-paymentMethod-attach")
				const response = await attach({
					paymentMethodID: paymentMethod.id
				})
				const { error, result } = response.data
				if (error) {
					console.error(error)
					setProcessing(false)
					return
				}
				if (result) {
					if (callback) {
						callback(result)
					}
				}
				console.log("[APP] attach payment method", result)
			} catch (error) {
				throw error
			}

			// else {
			// 	const create = firebase.functions().httpsCallable("stripe-v1-customer-create")
			// 	const response = await create({
			// 		payment_method: paymentMethod.id,
			// 		phone: auth.phoneNumber,
			// 		invoice_settings: {
			// 			default_payment_method: paymentMethod.id
			// 		},
			// 		metadata: {
			// 			uid: auth.uid
			// 		}
			// 	})
			// 	const { error, customer } = response.data

			// 	if (error) {
			// 		console.error(error)
			// 		setProcessing(false)
			// 		return
			// 	}

			// 	console.log("[APP] create customer", customer)
			// 	if (customer) {
			// 		updateData["stripe"] = {
			// 			customerID: customer.id,
			// 			link: `https://dashboard.stripe.com${
			// 				customer.livemode ? "" : "/test"
			// 				}/customers/${customer.id}`
			// 		}
			// 	}
			// }
			await new Commerce.User(auth.uid).documentReference.set(updateData, { merge: true })
			setProcessing(false)
			pop()
		} catch (error) {
			setProcessing(false)
			console.log(error)
		}
	};

	if (isUserLoading) {
		return <Loading />
	} else {
		return (
			<Paper>
				<AppBar position="static" color="transparent" elevation={0}>
					<Toolbar disableGutters>
						<Tooltip title="Back" onClick={() => {
							pop()
						}}>
							<IconButton>
								<ArrowBackIcon color="inherit" />
							</IconButton>
						</Tooltip>
						<Box fontSize={18} fontWeight={600}>
							Card
						</Box>
					</Toolbar>
				</AppBar>
				<Box p={2}>
					<form>
						<CardElement
							options={CARD_OPTIONS}
							onChange={(e) => {
								setDisable(!e.complete)
							}}
						/>
						<Button className={classes.button}
							variant="contained"
							color="primary"
							size="large"
							disabled={isDisabled}
							onClick={handleSubmit}>Continue to Payment</Button>
					</form>
				</Box>
			</Paper>
		)
	}
}