Are you looking to integrate a payment gateway that accepts credit card payments? Credit card payment is one of the best options to accept online payments. Customers prefer to pay online through their credit cards. It may be happening you are losing customers just because your website does not accept credit card payments. As an owner of the online store, you should add a credit card option for accepting payment on your website.

There are many payment gateways available that give support for a credit card. For example, Authorize.Net and Stripe allow accepting card payments online.

• Accept Credit Card Payment using Authorize.Net Payment Gateway in PHP
• A Guide for Stripe Integration in Website with PHP

Readers choose any of the above options but if they want to go for PayPal then keep reading. In this article, I show you how to accept credit card payments using PayPal Payments Pro.

PayPal Payments Pro accepts payments with a completely customizable solution. It means you can create your own payment form and charge your customer. It does not redirect you to the PayPal website to complete the transaction.

We are also going to create our own form where a customer enters their card details and can pay without leaving the website. The user can design their own checkout page which allows the user to enter the card details. So without any further delay let’s dive in.

Getting Started

Before accepting real-time payments it is always recommended to test it first on the sandbox mode. If everything works as expected on the sandbox then we should make it live to avoid any issues with customer payments. For testing payments, you need to have a PayPal sandbox account. Create your account on PayPal Developer. After creating an account, go to Testing Tools ->Sandbox Accounts and create a business account.

At the time of writing this article, PayPal Payments Pro is available in the US, UK, and Canada. It means while creating an account you have to select either one of these countries.

Once you have a business account, you need to upgrade your account type to ‘Business-Pro’. You must have your account type as ‘Business-Pro’ to accept credit card payments. To upgrade it click on the ‘Upgrade to Pro’ link and PayPal will convert your account type to ‘Business-Pro’.

Next, from the ‘API Credentials’ section grab your credentials. We will need these details in the next part of this tutorial.

Customizable Payment Form

As I said, using PayPal Payments Pro you can design your own payment form. Let’s create a nice checkout form where the customer enters their payment details. I’ll use a nice design form from codepen for this tutorial.

The final folder structure should be as follows:

Don’t think about vendor, charge.php, composer.json, composer.lock for now. We will create it in the later part.

Create a css/card.css file and add the code below in it as provided on codepen.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700,500);

body {
  padding: 60px 0;
  background-color: rgba(178,209,229,0.7);
  margin: 0 auto;
  width: 600px;
}
.body-text {
  padding: 0 20px 30px 20px;
  font-family: "Roboto";
  font-size: 1em;
  color: #333;
  text-align: center;
  line-height: 1.2em;
}
.form-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-wrapper {
  background-color: #6FB7E9;
  width: 100%;
  display: flex;

}
.personal-information {
  background-color: #3C8DC5;
  color: #fff;
  padding: 1px 0;
  text-align: center;
}
h1 {
  font-size: 1.3em;
  font-family: "Roboto"
}
input {
  margin: 1px 0;
  padding-left: 3%;
  font-size: 14px;
}
input[type="text"]{
  display: block;
  height: 50px;
  width: 97%;
  border: none;
}
input[type="email"]{
  display: block;
  height: 50px;
  width: 97%;
  border: none;
}
input[type="submit"]{
  display: block;
  height: 60px;
  width: 100%;
  border: none;
  background-color: #3C8DC5;
  color: #fff;
  margin-top: 2px;
  curson: pointer;
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}
input[type="submit"]:hover{
  background-color: #6FB7E9;
  transition: 0.3s ease;
}
#column-left {
  width: 46.5%;
  float: left;
  margin-bottom: 2px;
}
#column-right {
  width: 46.5%;
  float: right;
}

@media only screen and (max-width: 480px){
  body {
    width: 100%;
    margin: 0 auto;
  }
  .form-container {
    margin: 0 2%;
  }
  input {
    font-size: 1em;
  }
  #input-button {
    width: 100%;
  }
  #input-field {
    width: 96.5%;
  }
  h1 {
    font-size: 1.2em;
  }
  input {
    margin: 2px 0;
  }
  input[type="submit"]{
    height: 50px;
  }
  #column-left {
    width: 96.5%;
    display: block;
    float: none;
  }
  #column-right {
    width: 96.5%;
    display: block;
    float: none;
  }
}

Similarly, our js/card.js file will have the following code.

/* Card.js plugin by Jesse Pollak. https://github.com/jessepollak/card */

$('form').card({
    container: '.card-wrapper',
    width: 280,

    formSelectors: {
        nameInput: 'input[name="first-name"], input[name="last-name"]'
    }
});

Get a copy of jquery.card.js from this GitHub repository. Store this file under your ‘js’ directory.

Now, create a index.html file. In this file, we will add HTML markup which displays our checkout form.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Online Payments</title>
    <link rel="stylesheet" href="css/card.css">
</head>
<body>
    <form method="POST" action="charge.php">
        <div class="form-container">
            <div class="personal-information">
                <h1>Payment Information</h1>
            </div> <!-- end of personal-information -->
             
            <input id="column-left" type="text" name="first-name" placeholder="First Name" required="required" />
            <input id="column-right" type="text" name="last-name" placeholder="Surname" required="required" />
            <input id="input-field" type="text" name="number" placeholder="Card Number" required="required" />
            <input id="column-left" type="text" name="expiry" placeholder="MM / YY" required="required" />
            <input id="column-right" type="text" name="cvc" placeholder="CCV" required="required" />
 
            <div class="card-wrapper"></div>
 
            <input id="input-field" type="text" name="streetaddress" required="required" autocomplete="on" maxlength="45" placeholder="Streed Address" />
            <input id="column-left" type="text" name="city" required="required" autocomplete="on" maxlength="20" placeholder="City" />
            <input id="column-right" type="text" name="zipcode" required="required" autocomplete="on" pattern="[0-9]*" maxlength="5" placeholder="ZIP code" />
            <input id="input-field" type="email" name="email" required="required" autocomplete="on" maxlength="40" placeholder="Email" />
            <input id="input-field" type="text" name="amount" required="required" autocomplete="on" maxlength="40" placeholder="Amount" />
            <input id="input-button" name="submit" type="submit" value="Submit" />
 
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="js/jquery.card.js"></script>
    <script src="js/card.js"></script>
</body>
</html>

Head over to the browser and run the index.html file. You should now see a nice checkout form.

Accept Credit Card Payments using PayPal Payments Pro

You are now ready with your PayPal API credentials and HTML form. It’s time to make things dynamic. Integrating a payment gateway is not an easy task altogether. You need to research it and read the whole documentation provided by the vendor. Sometimes it becomes so confusing and in spite of putting in long hours, you failed in achieving your goal. I had faced it a lot of times. And when it comes to PayPal, the situation becomes more complex because of the vast PayPal documentation.

This is not the case anymore. Omnipay makes our developer’s life easy in terms of payment gateway integration. Using this library, you don’t need to read payment gateway documentation. Just get your API credentials, follow the Omnipay instructions, and you are done. Check out their GitHub page for more details.

Run the below command to install Omnipay and the supported PayPal library.

composer require league/omnipay omnipay/paypal

After installing the above libraries, the below code will go inside your charge.php file.

<?php
require_once "vendor/autoload.php";
 
use Omnipay\Omnipay;
 
$gateway = Omnipay::create('PayPal_Pro');
$gateway->setUsername(PAYPAL_API_USERNAME);
$gateway->setPassword(PAYPAL_API_PASSWORD);
$gateway->setSignature(PAYPAL_API_SIGNATURE);
$gateway->setTestMode(true); // here 'true' is for sandbox. Pass 'false' when go live
 
if (isset($_POST['submit'])) {
 
    $arr_expiry = explode("/", $_POST['expiry']);
 
    $formData = array(
        'firstName' => $_POST['first-name'],
        'lastName' => $_POST['last-name'],
        'number' => $_POST['number'],
        'expiryMonth' => trim($arr_expiry[0]),
        'expiryYear' => trim($arr_expiry[1]),
        'cvv' => $_POST['cvc']
    );
 
    try {
        // Send purchase request
        $response = $gateway->purchase([
                'amount' => $_POST['amount'],
                'currency' => 'USD',
                'card' => $formData
        ])->send();
 
        // Process response
        if ($response->isSuccessful()) {
 
            // Payment was successful
            echo "Payment is successful. Your Transaction ID is: ". $response->getTransactionReference();
 
        } else {
            // Payment failed
            echo "Payment failed. ". $response->getMessage();
        }
    } catch(Exception $e) {
        echo $e->getMessage();
    }
}

Make sure to replace the placeholder’s PAYPAL_API_USERNAME, PAYPAL_API_PASSWORD, and PAYPAL_API_SIGNATURE with the actual values. Now go to your browser and try to make a payment with dummy credit card details. You should get a success message along with your transaction id. You can use test credit cards provided by PayPal.

Accept Live Payment with PayPal Pro Payment Gateway

Once you are completed with the sandbox testing, pass the live credentials for the placeholders used in a code. You also need to pass the ‘false’ value to the setTestMode() method.

It’s all about accepting credit card payments using PayPal Payments Pro in PHP. I hope it will help you integrate a payment solution for your website. Try this tutorial and let me know your thoughts and suggestions in the comment section below.

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.