Shift4

Go to Shift4.com

Plants
& More

Single Line

Single Line enables you to seamlessly integrate card payment directly on your website with a single visual element.

In the following example, you can see how simple it is to embed card payments with a card component.

Use these card details to test different scenarios

Success

4242 4242 4242 4242

Insufficient funds

4024 0071 1846 8684

<div id="payment-error" class="alert alert-danger hidden"></div>

<form action="/examples/single-line/payment" method="post" id="payment-form" class="form-horizontal"><input type="hidden" name="_csrf" value="d23dff4a-a747-4bb0-bd27-d51ef0e6a3e4">
    
    <div class="grid gap-3 grid-cols-8">
        <label class="col-span-2 flex items-center">
            Card details
        </label>
        <div class="col-span-6">
            <div id="card"></div>
        </div>
    </div>

    <div class="mt-6">
        <button type="submit" class="btn-primary w-full flex justify-center">Buy now</button>
    </div>
</form>

<script type="text/javascript" src="https://js.dev.shift4.com/shift4.js"></script>
<script type="text/javascript">
    /*<![CDATA[*/
    $(function () {
        // Initialize Shift4 object with your public key
        var shift4 = Shift4("pu_test_WVMFC9GFuvm54b0uorifKkCh");

        // Create card component
        var card = shift4.createComponent("card").mount("#card");

        // Intercept payment form submit
        var $form = $('#payment-form');
        $form.submit(paymentFormSubmit);

        function paymentFormSubmit(e) {
            // Prevent the form from submitting default action
            e.preventDefault();

            // Disable form submit button to prevent repeatable submits
            $form.find('button').prop('disabled', true);

            // Send card data to Shift4
            shift4.createToken(card)
                .then(tokenCreatedCallback)
                .catch(errorCallback);
        }

        function tokenCreatedCallback(token) {
            var request = {
                amount: 2499,
                currency: 'USD',
                card: token.id,
                merchantAccountId: $("#merchant-account-processor-id").val() != '' ? $("#merchant-account-processor-id").val() : null
            };

            // Open frame with 3-D Secure process
            shift4.verifyThreeDSecure(request)
                .then(threeDSecureCompletedCallback)
                .catch(errorCallback);
        }

        function threeDSecureCompletedCallback(token) {
            // Append token to the form so that it will be send to server
            $form.append($('<input type="hidden" name="tokenId" />').val(token.id));
            $form.append($('<input type="hidden" name="requireEnrolledCard" />').val($("#require-enrolled-card").prop('checked')));
            $form.append($('<input type="hidden" name="requireSuccessfulLiabilityShift" />').val($("#require-successful-liability-shift").prop('checked')));
            $form.append($('<input type="hidden" name="merchantAccountId" />').val($("#merchant-account-processor-id").val()));

            // Submit the form with its default action
            $form.unbind();
            $form.submit();
        }

        function errorCallback(error) {
            // Display error message
            $('#payment-error').text(error.message).removeClass('hidden');

            // Re-enable form submit button
            $form.find('button').prop('disabled', false);
        }
    });
    /*]]>*/
</script>

@Controller
public class ExamplesController {

    private static final String PRIVATE_KEY = "pr_test_tXHm9qV9qV9bjIRHcQr9PLPa";

    @RequestMapping(value = "/examples/single-line", method = GET)
    public String singleLine(Model model) {
        return "examples/single-line";
    }

    @RequestMapping(value = "/examples/single-line/payment", method = POST)
    public String singleLineSubmit(Model model, @RequestParam String tokenId) throws IOException {
        model.addAttribute("tokenId", tokenId);

        try (Shift4Gateway shift4Gateway = new Shift4Gateway(PRIVATE_KEY)) {
            ChargeRequest request = new ChargeRequest()
                .amount(2499)
                .currency("USD")
                .card(new CardRequest(tokenId));

            Charge charge = shift4Gateway.createCharge(request);

            model.addAttribute("chargeId", charge.getId());

        } catch (Shift4Exception e) {
            model.addAttribute("errorType", e.getType());
            model.addAttribute("errorCode", e.getCode());
            model.addAttribute("errorMessage", e.getMessage());

            model.addAttribute("chargeId", e.getChargeId());
        }

        return "examples/single-line";
    }
}