@stripe/stripe-js#PaymentMethod TypeScript Examples

The following examples show how to use @stripe/stripe-js#PaymentMethod. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From Demae with MIT License 5 votes vote down vote up 
CardInput = ({ callback }: { callback?: (paymentMethod: PaymentMethod) => void }) => {
	return (
		<Elements stripe={stripePromise}>
			<Form callback={callback} />
		</Elements>
	)
}
Example #2
Source File: index.ts    From Demae with MIT License 5 votes vote down vote up 
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]
}
Example #3
Source File: index.tsx    From Demae with MIT License 4 votes vote down vote up 
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>
	)
}
Example #4
Source File: index.tsx    From Demae with MIT License 4 votes vote down vote up 
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>
		)
	}
}