Callum  Owen

Callum Owen

1634751180

How to Accept Credit Card Payments on WordPress Site in 9 Minutes

Do you want to learn how to accept credit card payments on your WordPress site? By default, WordPress does not come with a credit card payment option but, there are plenty of plugins and tools to solve this issue. Come join us as Christina shows one of the ways to easily accept credit card payments on your WordPress site!

For this tutorial, we will be using WPForms and we have a discount for our wonderful viewers. For our discount visit:

Timestamps
00:00 Intro
00:30 How to install WPForms
01:28 How to add WPForms license key
01:55 How to add Stripe Addon to WPForms
03:03 Create a simple order form to accept credit card payments in WordPress
07:15 Add order form to WordPress page

#wordpress 

What is GEEK

Buddha Community

How to Accept Credit Card Payments on WordPress Site in 9 Minutes
Callum  Owen

Callum Owen

1625672580

How to Easily Accept Credit Card Payments on Your WordPress Site

Do you want to add the option to accept credit card payments on your WordPress site? By default WordPress does not have a method for accepting payments on your site and most solutions are for ecommerce stores or similar. This makes it difficult for smaller sites to collect smaller payments for one time or limited option purchases. In this video, we’ll show you how to accept credit card payments on your WordPress site.

This video brought to you by WPForms, the most beginner friendly WordPress form plugin, take a look at their site here:

=================================
https://wpforms.com/wpbeginner

For our discount visit: https://WPForms.com/wpbeginner

0:00 Introduction
0:53 Setting up WPForms
2:18 Adding Payment Options
3:00 Connecting Stripe
3:57 Creating a New Form
8:18 Adding Form to Page
9:16 Testing the Form

In this video we’ll be using WPForms which you can purchase using the link above. Install and activate the plugin, add your licence key, and go to the WPForms Addons area to enable the Stripe addon for your forms.

Under WPForms Settings, Payments you can connect to your Stripe account and it will require a second connection when setting your stripe account into test mode for testing the form.

Next, we create a form that we would like to include on our site. We start with a billing/order form to have most of the fields set up for us. We will customize the available items to be what we want and set their prices. You have the option to show or hide the prices in a checkbox belwo and the total will reflect what is chosen.

Add the Stripe Credit Card field to the form to be able to accept the payments and go through the form settings to ensure the payment, notifications, and confirmations are set up how you are wanting.

Save the form and click the embed opion and you can select the page you would like to embed the form in. Add the WPForms block and you should now be able to test it with Stripe to ensure it works properly. Don’t forget to take your form out of test mode to start receiving payments.

If you liked this video, then please Like and consider subscribing to our channel here for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner

Feel free to take a look at the written version of this tutorial here:
https://www.wpbeginner.com/wp-tutorials/how-to-easily-accept-credit-card-payments-on-your-wordpress-site/

Join our group on Facebook
https://www.facebook.com/groups/wpbeginner

Follow us on Twitter
http://twitter.com/wpbeginner

Check out our website for more WordPress Tutorials
http://www.wpbeginner.com
#WordPress #WordPressTutorial #WPBeginner

#wordpress #wordpress site #credit card payments

Credit card fraud and technical solutions

Credit card fraud is an increasingly expensive problem. Technology offers solutions to help combat the problem and gain control.
How to prevent fraudulent transactions in credit cards is a common question plaguing the credit card user today. The credit card brings convenience and security to the users, but the same can become a cause of agony if the user is a victim of any credit card fraud. Smart systems are coming to the aid of credit card users and empowering them against cybercriminals. Using fraud detection tools and following some simple precautions, the users can protect themselves against credit card fraud.

#credit card fraud detection #types of credit card fraud #contactless payment systems #technological challenges in credit card fraud #prevent fraudulent transactions in credit cards

How to Making A Simple Credit Card Validation form

In this quick tutorial we will show you how to create a simple credit card form. We'll build the whole thing from scratch, with a little help from Bootstrap 3 for the interface, and Payform.js for client-side form validation.

Project Overview

Here is a sneak-peak of what we will be building in this tutorial:

credit-card-form.png

Credit Card Form Demo

You can get the full code for this project from the Download button near the top of the article. An overview of the files can be seen below:

project-overview.png

There are two .css files and two .js files which we will need to include in our HTML. All other resources such as the Bootstrap framework, jQuery, and web fonts will be included externally via CDN.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Credit Card Validation Demo</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/demo.css">
</head>

<body>

    <!-- The HTML for our form will go here -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="assets/js/jquery.payform.min.js" charset="utf-8"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

Now that everything is set up, we can start building our credit card form. Let's start with the HTML layout!

Layout

A credit card dialog needs to be simple, short, and straightforward. Here are the four input fields that every credit card form needs to have:

  • Credit card owner name
  • Card number
  • Secret code (also known as CVV/CVC/CID)
  • Expiration Date

All we need to do is create a <form> and add all the required input fields. For the owner, card number, and CVV we will use simple text fields. For the expiration date we'll put a combination of two selects with predefined options.

Besides that our form will have a heading, a submit button, and images for popular credit card vendors. Since we are working with Bootstrap there is a little extra markup, but it helps keep the code organized and the layout responsive.

<div class="creditCardForm">
    <div class="heading">
        <h1>Confirm Purchase</h1>
    </div>
    <div class="payment">
        <form>
            <div class="form-group owner">
                <label for="owner">Owner</label>
                <input type="text" class="form-control" id="owner">
            </div>
            <div class="form-group CVV">
                <label for="cvv">CVV</label>
                <input type="text" class="form-control" id="cvv">
            </div>
            <div class="form-group" id="card-number-field">
                <label for="cardNumber">Card Number</label>
                <input type="text" class="form-control" id="cardNumber">
            </div>
            <div class="form-group" id="expiration-date">
                <label>Expiration Date</label>
                <select>
                    <option value="01">January</option>
                    <option value="02">February </option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
                <select>
                    <option value="16"> 2016</option>
                    <option value="17"> 2017</option>
                    <option value="18"> 2018</option>
                    <option value="19"> 2019</option>
                    <option value="20"> 2020</option>
                    <option value="21"> 2021</option>
                </select>
            </div>
            <div class="form-group" id="credit_cards">
                <img src="assets/images/visa.jpg" id="visa">
                <img src="assets/images/mastercard.jpg" id="mastercard">
                <img src="assets/images/amex.jpg" id="amex">
            </div>
            <div class="form-group" id="pay-now">
                <button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
            </div>
        </form>
    </div>
</div>

Now that we have the needed input fields, we can setup the validation rules.

Validation

All of the validation we will show here is client side and done exclusively in the JavaScript. If it is HTML validation that you are interested in, check out this article.

To kick things off we will define all the jQuery selectors we will need:

var owner = $('#owner'),
    cardNumber = $('#cardNumber'),
    cardNumberField = $('#card-number-field'),
    CVV = $("#cvv"),
    mastercard = $("#mastercard"),
    confirmButton = $('#confirm-purchase'),
    visa = $("#visa"),
    amex = $("#amex");

Then, using Payform.js, we will turn our basic input fields into specialized input for credit card data. We simply need to call the right function and the library will automatically handle text formatting and maximum string length for us:

cardNumber.payform('formatCardNumber'); CVV.payform('formatCardCVC');

Next, we want to be able to give real-time feedback to users while they are typing in their card number. To do so we will write a simple function that does two things:

  1. Check if the current text in the field is а valid card number or not. Add appropriate coloring to the text field.
  2. Depending on the present input characters, see if the card is either Visa, MasterCard, or American Express. This is done using the payform.parseCardType() method.

Since we want to execute the above actions every time a new character is typed in, we will use the jQuery keyup() event listener.

cardNumber.keyup(function() {
    amex.removeClass('transparent');
    visa.removeClass('transparent');
    mastercard.removeClass('transparent');

    if ($.payform.validateCardNumber(cardNumber.val()) == false) {
        cardNumberField.removeClass('has-success');
        cardNumberField.addClass('has-error');
    } else {
        cardNumberField.removeClass('has-error');
        cardNumberField.addClass('has-success');
    }

    if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
        mastercard.addClass('transparent');
        amex.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
        mastercard.addClass('transparent');
        visa.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
        amex.addClass('transparent');
        visa.addClass('transparent');
    }
});

There is one more thing we have to do and that is is check if all the field are holding valid data when the user tries to submit the form.

Name validation can be quite tricky. To keep this tutorial light, we won't be going into that subject, and we will only check if the input name is at least 5 characters long. Payform provides us with the needed methods for validating the rest of the form.

confirmButton.click(function(e) {
    e.preventDefault();

    var isCardValid = $.payform.validateCardNumber(cardNumber.val());
    var isCvvValid = $.payform.validateCardCVC(CVV.val());

    if(owner.val().length < 5){
        alert("Wrong owner name");
    } else if (!isCardValid) {
        alert("Wrong card number");
    } else if (!isCvvValid) {
        alert("Wrong CVV");
    } else {
        // Everything is correct. Add your form submission code here.
        alert("Everything is correct");
    }
});

The above validation is for educational purposes only and shouldn't be used on commercial projects. Always include both client-side and server-side validation to your forms, especially when working with credit card data.

Styles

We are using Bootstrap, so most of the styling is done by the framework. Our CSS mostly covers the size of the input fields and various padding, margin and font tweaks.

styles.css

.creditCardForm {
    max-width: 700px;
    background-color: #fff;
    margin: 100px auto;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}
.creditCardForm label {
    width: 100%;
    margin-bottom: 10px;
}
.creditCardForm .heading h1 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #4c4e56;
}
.creditCardForm .payment {
    float: left;
    font-size: 18px;
    padding: 10px 25px;
    margin-top: 20px;
    position: relative;
}
.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}
.creditCardForm .owner {
    width: 63%;
    margin-right: 10px;
}
.creditCardForm .CVV {
    width: 35%;
}
.creditCardForm #card-number-field {
    width: 100%;
}
.creditCardForm #expiration-date {
    width: 49%;
}
.creditCardForm #credit_cards {
    width: 50%;
    margin-top: 25px;
    text-align: right;
}
.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}
.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}
.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}
.transparent {
    opacity: 0.2;
}
@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm .CVV,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards {
        width: 100%;
    }
    .creditCardForm #credit_cards {
        text-align: left;
    }
}

With this our Credit Card Validation Form is complete!

Original article source at: https://tutorialzine.com/

#validation #card 

Juned Ghanchi

1621916889

Wordpress Development India, Hire Wordpress Developers

Hire WordPress developers from IndianAppDevelopers on an hourly or full-time basis to build advanced custom WordPress applications. Our WordPress developers have 5+ years of experience building websites, themes and plugins for small- and large-scale businesses.

You can hire highly knowledgeable WordPress developers in India from us to maintain and deliver the highest quality standards on-time solutions.

Looking to outsource a WordPress development project? Or want to hire WordPress developers? Then, get in touch with us.

#wordpress development india #hire wordpress developers india #wordpress development #wordpress developers #wordpress programmers #hire wordpress programmers

Guide To WordPress Redirects (Steps To Follow)

This is image title

You will observe that many of your URLs have been changed whenever you redesign your website. This is also applicable whenever you made certain changes to its permalink structure. Ultimately, it creates a big issue for users as well as search engines.

Here, comes the role of WordPress redirects which contributes to providing a simple solution. Whenever you make use of a redirect, your visitors would not be negatively impacted. This is something that will keep your search engine rankings intact.

If you are thinking about how to do redirects in WordPress, then don’t worry as this article will provide you a detailed guide on this.

What Is A Page Redirect?

This is a set of rules which tells a browser to forward your visitors from a specific link they clicked on to a diverse page.

Whenever you redirect a page, there are mainly two outcomes for your end-users. Either, they will see a redirection message or they will be simply redirected without any notification.

This is image title

Adding redirects becomes important whenever you have redesigned your website, made certain updates to your permalinks, or changed your domain. This is necessary to make your pre-existing content accessible to search engines as well as readers.

So, it can be said, that you are forwarding your users to a completed new web page with the help of these redirects.

When You Should Focus On Redirecting A Page?

There are many reasons, for which you may wish to redirect URLs on your website. Some of the most common reasons for this include the following:

  • The URL of the page is changing.
  • A specific page that is no longer relevant.
  • Focusing to move your domain from HTTP to HTTPS.
  • You are deleting or moving your content.
  • You are changing your original domain name or making use of a different domain.

Additionally, redirects can also help you to make sure that if a page is missing or broken, then the users will be sent along with the other content of your website without any sort of interruption.

Different Types Of Redirects To Know About

There are some of how you can make use of a redirect. Not only that but there are many other types as well. Below, you will find some of the most common redirect methods which you might need to use.

(A) 301 Permanent Redirect

If you are permanently deleting or moving a page, then this redirect is generally used. It may be used when you are considering moving your website from one URL to another or you are switching to a new hosting service.

(B) 302 Temporary Redirects

This is a temporary redirect that should be used with caution as well as tested for browser compatibility. Also, this redirect tells the user that the file that you are looking for exists. But, it is not loading for some particular reason.

After that, the users are offered an alternative option. These redirects can again carry SEO penalties specifically for long-term use. So, this is a good option for temporary websites.

© 303 See Other

This is considered to be very important specifically in terms of security. Often, this is used as a replacement for the 302 redirects whenever issues arise. This type of redirect prevents users from submitting the same information more than once.

They will be redirected to a different page once they submit their information. You can also prevent refreshing or bookmarking sensitive data like credit card information. So, this prevents users from making any mistakes like accidentally purchasing the same item twice.

(D)307

This redirect is similar in functionality as well as purpose to the 303 redirects. Here, the main difference lies in the way, in which it receives and sends information.

Only, one data exchange method is used in this case. So, this can be called a true temporary redirect. But, a 303 redirect makes use of two methods.

(E)308

This is known to be a permanent redirect similar to 301 redirects. It is mainly used whenever the location of a file has changed.

The main difference existing between 308 and 301 is that the 308 can only make use of the POST method whereas a 301 can specifically change the HTTP method from POST to GET.

(F) HTTP To HTTPS Redirect

There are several advantages of an HTTPS URL over an HTTP URL both in terms of SEO and security. However, you will need to set up a redirect that forces browsers to display the HTTPS version of your pages.

[Learn more]

#how to do redirects in wordpress #wordpress 301 redirects #wordpress plugin for 301 redirects #wordpress redirects #wordpress redirects to another site #wordpress redirects to https