Hyväksy luottokorttimaksut PHP: n PayPal Payments Prolla

Viimeisin päivitys loka 17, 2021

Sisältö

Hyväksy luottokorttimaksut PayPal Payments Prolla

Hyväksy reaaliaikainen maksu PayPal Pro Payment Gateway -sovelluksella

Aiotko integroida maksuyhdyskäytävän, joka hyväksyy luottokorttimaksut? Luottokorttimaksu on yksi parhaista vaihtoehdoista verkkomaksun hyväksymiseksi. Asiakkaat haluavat mieluummin maksaa verkossa luottokortillaan. Menetät asiakkaita vain siksi, että verkkosivustosi ei hyväksy luottokorttimaksuja. Verkkokaupan omistajana sinun tulisi lisätä luottokorttivaihtoehto maksun hyväksymiseksi verkkosivustollasi.

Saatavilla on monia maksuyhdyskäytäviä, jotka tukevat luottokorttia. Esimerkiksi Authorize.Net ja Stripe sallivat korttimaksujen hyväksymisen verkossa.

Lukijat valitsevat minkä tahansa yllä olevista vaihtoehdoista, mutta jos he haluavat mennä PayPaliin, jatka lukemista. Tässä artikkelissa näytän sinulle, kuinka hyväksyä luottokorttimaksut PayPal Payments Prolla.

PayPal Payments Pro hyväksyy maksut täysin muokattavalla ratkaisulla. Se tarkoittaa, että voit luoda oman maksulomakkeen ja laskuttaa asiakasta. Se ei ohjaa sinua PayPalin verkkosivustolle tapahtuman suorittamiseksi.

Aiomme myös luoda oman lomakkeen, jossa asiakas antaa korttinsa tiedot ja voi maksaa poistumatta verkkosivustolta. Käyttäjä voi suunnitella oman kassasivunsa ja antaa käyttäjän antaa kortin tiedot. Joten sukeltaa sisään ilman viivytyksiä.

Päästä alkuun

Ennen reaaliaikaisten maksujen hyväksymistä on aina suositeltavaa testata se ensin hiekkalaatikkotilassa. Jos kaikki toimii odotetusti hiekkalaatikossa, meidän pitäisi tehdä se elää, jotta vältetään asiakkaan maksuihin liittyvät ongelmat. Maksujen testaamiseksi sinulla on oltava PayPal-hiekkalaatikkotili. Luo tili PayPal Developer -sovelluksessa. Kun olet luonut tilin, siirry vasemman reunan valikosta kohtaan SANDBOX-> Tilit ja luo yritystili.

Tämän artikkelin kirjoittamisen ajankohtana PayPal Payments Pro on saatavana Yhdysvalloissa, Isossa-Britanniassa ja Kanadassa. Se tarkoittaa, että kun luot tilin, sinun on valittava jompikumpi näistä maista.

Kun sinulla on yritystili, sinun on päivitettävä tilisi tyyppi Business-Pro: ksi. Luottokorttimaksujen hyväksyminen edellyttää, että tilisi tyyppi on Business-Pro. Päivitä se napsauttamalla Päivitä Pro -linkkiä ja PayPal muuntaa tilisi tyypin Business-Pro-muotoon.

Napsauta sitten ‘API Credentials’ -välilehteä ja napauta tunnistetietosi. Tarvitsemme nämä tunnistetiedot tämän opetusohjelman seuraavassa osassa.

Mukautettava maksulomake

Kuten sanoin, PayPal Payments Prolla voit suunnitella oman maksulomakkeesi. Luodaan mukava kassalomake, jossa asiakas antaa maksutietonsa. Käytän tässä opetusohjelmassa hienosti muotoilulomaketta codepenissä.

Lopullisen kansiorakenteen tulee olla seuraava:

Älä ajattele vendor, charge.php, composer.json, composer.locknyt. Luomme sen myöhemmässä osassa.

Luo css/card.csstiedosto ja lisää siihen alla oleva koodi koodikynän ohjeiden mukaan.

@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;
  }
}

Vastaavasti js/card.jstiedostollamme on seuraava koodi.

/* 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"]'
    }
});

Hanki kopio jquery.card.jstästä GitHub-arkistosta. Tallenna tämä tiedosto hakemistoon ‘js’.

Luo nyt index.htmltiedosto. Tähän tiedostoon lisätään HTML-merkintä, joka näyttää kassalomakkeen.

<!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.6.0/jquery.min.js"></script>
    <script src="js/jquery.card.js"></script>
    <script src="js/card.js"></script>
</body>
</html>

Siirry selaimeen ja suorita index.htmltiedosto. Sinun pitäisi nyt nähdä kauniisti näyttävä kassalomake.

Hyväksy luottokorttimaksut PayPal Payments Prolla

Olet nyt valmis PayPal-sovellusliittymän kirjautumistiedoilla ja HTML-lomakkeella. On aika tehdä asioista dynaamisia. Maksuyhdyskäytävän integrointi ei ole helppoa. Sinun täytyy tutkia sitä ja lukea koko toimittajan toimittama dokumentaatio. Joskus siitä tulee niin hämmentävää ja siitä huolimatta, että vietät pitkiä tunteja, epäonnistut tavoitteesi saavuttamisessa. Olin kohdannut sen monta kertaa. PayPalin osalta tilanne muuttuu monimutkaisemmaksi suuren PayPal-dokumentaation takia.

Näin ei ole enää. Omnipay tekee kehittäjämme elämästä helppoa maksuyhdyskäytävän integroinnin kannalta. Tätä kirjastoa käytettäessä sinun ei tarvitse lukea maksuyhdyskäytävän dokumentaatiota. Hanki vain API-tunnuksesi, seuraa Omnipay-ohjeita ja olet valmis. Katso heidän GitHub-sivulta lisätietoja.

Asenna Omnipay ja tuettu PayPal-kirjasto suorittamalla seuraava komento.

composer require league/omnipay:^3 omnipay/paypal

Kun olet asentanut yllä olevat kirjastot, alla oleva koodi menee charge.phptiedostosi sisään.

<?php
require_once "vendor/autoload.php";
  
use OmnipayOmnipay;
  
$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();
    }
}

Muista korvata paikkamerkin PAYPAL_API_USERNAME, PAYPAL_API_PASSWORD, PAYPAL_API_SIGNATURE todellisilla arvoilla. Siirry nyt selaimeesi ja yritä suorittaa maksu näennäisillä luottokorttitiedoilla. Sinun pitäisi saada menestysviesti yhdessä tapahtumasi tunnuksen kanssa. Käyttäjä voi saada PayPalin tarjoamat testiluottokortit.

Hyväksy reaaliaikainen maksu PayPal Pro Payment Gateway -sovelluksella

Kun olet suorittanut hiekkalaatikkotestin, välitä koodissa käytettyjen paikkamerkkien live-tunnistetiedot. Sinun on myös välitettävä ‘väärä’ arvo setTestMode()menetelmälle.

Kyse on luottokorttimaksujen hyväksymisestä PayPal Payments Prolla PHP: ssä. Toivon, että se auttaa sinua integroimaan maksuratkaisun verkkosivustollesi. Kokeile tätä opetusohjelmaa ja kerro minulle ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.

: artisansweb.net