Pay Card

Card will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required. by use data-card="init" data-option="{'form':'.credit-card-form','container':'.credit-card-wrapper'}" attribute.

form : css selector to select form

container : css selector to select form container

Example


                                                <div class="credit-card-wrapper py-4" data-card="init"
                                                    data-option="{'form':'.credit-card-form','container':'.credit-card-wrapper'}">
                                                </div>
                                                <div class="credit-card-form row">
                                                    <div class="mb-3 col-sm-6">
                                                        <input class="form-control jp-card-invalid unknown" type="text" name="number" placeholder="Card Number"
                                                            required="">
                                                    </div>
                                                    <div class="mb-3 col-sm-6">
                                                        <input class="form-control jp-card-invalid" type="text" name="name" placeholder="Full Name" required="">
                                                    </div>
                                                    <div class="mb-3 col-sm-3">
                                                        <input class="form-control jp-card-invalid" type="text" name="expiry" placeholder="MM/YY" required="">
                                                    </div>
                                                    <div class="mb-3 col-sm-3">
                                                        <input class="form-control jp-card-invalid" type="text" name="cvc" placeholder="CVC" required="">
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <button class="button button-border button-dark d-block button-rounded w-100 mt-0" type="submit">Submit</button>
                                                    </div>
                                                </div>