examples/popup-donation.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
		/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<link rel="stylesheet" href="./styles.css" />

		<title>Paylike.io SDK examples</title>
	</head>
	<body>
		<p>This is an example of a simple donation style popup.</p>
		<button>Try it (donate)</button>
		<ul>
			<li><a href="popup-minimal.html">Minimal popup example</a></li>
			<li><a href="popup-custom.html">Elaborate popup example</a></li>
		</ul>

		<a href="https://github.com/paylike/sdk">SDK documentation on GitHub</a>

		<script src="https://sdk.paylike.io/10.js"></script>
		<script>
			const key = console.error('Insert your Paylike public key')
			const paylike = Paylike({key})

			document.querySelector('button').addEventListener('click', donate)

			function donate() {
				paylike.pay(
					{
						title: "Save John's coffee shop",
						description:
							'Thank you for your kindness. By donating you help us keep the shop open to everyone.',
						amount: {currency: 'USD', exponent: 0, value: 10},
						fields: [
							{
								name: 'name',
								placeholder: 'John Doe',
							},
							{
								type: 'amount',
								value: '10.00',
								required: true,
							},
						],
					},
					(err, r) => {
						if (err) return console.log(err)

						console.log(r)
						// location.href = '/thank-you'
					}
				)
			}
		</script>
	</body>
</html>