Examples

Checkout with default email

Plants
& More
   [email protected]   
Example product

Potted plant

Monstera

Price: $24.99

With Checkout, you may quickly and easily add payment buttons to your website.

Customize some of the Checkout elements (such as logo image or title text) and let us handle all the backend complexities. If this is not enough for you, integrate payments via Custom Form.

This example shows Checkout with the default (pre-filled) email address.

Use these card details to test different scenarios

Scenario Card number
Success
Insufficient funds

Please check our guidelines for CSP here.


	<form action="/examples/checkout-session-with-default-email/payment" method="post">
		<script src="https://dev.shift4.com/checkout.js"
			class="shift4-button"
			data-key="pu_test_WVMFC9GFuvm54b0uorifKkCh"
			data-client-secret="chcs_Oyigk5HpSqjoHkXScUCU0f09oLhUHEApe07dZHQH7XKT7Sf6weXhSBgRkDjP4InKHhWIYSXLKjAgX72Ey0tIbosJrOA3p4TrRnG6PniA1XRWD9frIqTLHmcAWWFnOcAJrrWFX3p0bVhOaUcwTM6TnsUqqK5tWvRwtxWGeAb4AKqklP9BLUoFfOoHzFDNaP4tiZtL9UAtcNfeXf76Oo1TWbscBsPz3l0Gn1DyftQjVeLsWk5V6MKtknWA1d"
			data-name="Shift4"
			data-description="Checkout example"
			data-checkout-button="Buy now"
			data-email="[email protected]"
			data-class="btn btn-primary btn-lg">
		</script>
	</form>
	

	@Controller
	@RequestMapping("/examples")
	public class ExamplesController {

		private static final String PRIVATE_KEY = "pr_test_tXHm9qV9qV9bjIRHcQr9PLPa";

		@RequestMapping(value = "/examples/checkout-session-with-default-email", method = GET)
		public String checkout(Model model) throws IOException {
			try (Shift4Gateway shift4Gateway = new Shift4Gateway(PRIVATE_KEY)) {
				CheckoutSession checkoutSession = shift4Gateway.createCheckoutSession(
						new CheckoutSessionRequest().setLineItems(List.of(
								new LineItemRequest().setQuantity(1)
										.setProduct(new LineItemProductRequest()
												.setName("Potted plant")
												.setAmount(new SimpleAmount(2499))
												.setCurrency("USD")))));
				model.addAttribute("clientSecret", checkoutSession.getClientSecret());
			}

			return "examples/checkout";
		}

		@RequestMapping(value = "/examples/checkout-session-with-default-email/payment", method = POST)
		public String checkoutSubmit(Model model, @RequestParam String shift4ChargeId) {
			model.addAttribute("chargeId", shift4ChargeId);

			return "examples/checkout";
		}
	}