Potted plant
Monstera
Price: $24.99
Checkout makes it simple to add payment buttons to your website.
When you use Checkout, we will handle all the tedious details for you. You can customize some of the Checkout elements (like logo image or title text), but if you need more options, you can integrate payments via Custom Form.
In this example, you have Checkout in the selected language.
Use these card details to test different scenarios
<form action="/examples/checkout-with-language-select/payment" method="post">
<script src="https://dev.shift4.com/checkout.js"
class="shift4-button"
data-key="pu_test_WVMFC9GFuvm54b0uorifKkCh"
data-checkout-request="MjVhMmJjYTRiNzUyNzQ0MWU2MTljNDFkYjcwMTE1ZmZmZjc3NDI3OTk4MDBhY2MxYTc0ZjFhMDExOWY2OWYxZnx7ImNoYXJnZSI6eyJhbW91bnQiOjI0OTksImN1cnJlbmN5IjoiVVNEIn0sInRocmVlRFNlY3VyZSI6eyJlbmFibGUiOmZhbHNlfX0="
data-name="Shift4"
data-description="Checkout example"
data-checkout-button="Buy now"
data-locale="en"
data-class="btn btn-primary btn-lg">
</script>
</form>
<script>
$(function() {
$('#language').change(function() {
$('.shift4-button').attr('data-locale', $(this).val());
});
});
</script>
@Controller
@RequestMapping("/examples")
public class ExamplesController {
private static final String PRIVATE_KEY = "pr_test_tXHm9qV9qV9bjIRHcQr9PLPa";
@RequestMapping(value = "/examples/checkout-with-language-select", method = GET)
public String checkout(Model model) throws IOException {
try (Shift4Gateway shift4Gateway = new Shift4Gateway(PRIVATE_KEY)) {
CheckoutRequest checkoutRequest = new CheckoutRequest()
.charge(2499, "USD");
String signedCheckoutRequest = shift4Gateway.signCheckoutRequest(checkoutRequest);
model.addAttribute("signedCheckoutRequest", signedCheckoutRequest);
}
return "examples/checkout";
}
@RequestMapping(value = "/examples/checkout-with-language-select/payment", method = POST)
public String checkoutSubmit(Model model, @RequestParam String shift4ChargeId) {
model.addAttribute("chargeId", shift4ChargeId);
return "examples/checkout";
}
}