Tester rapidement

Cette page donne un aperçu rapide de comment insérer un formulaire de paiement sécurisé, simplement en 3 actions.

Pour un guide d’intégration plus complet, rendez-vous ici :  Démarrer: Paiement simple

1. Créer un formToken

Pour créer une nouvelle transaction à partir d’un nouveau moyen de paiement (comme une carte bancaire), Il faut préalablement afficher un formulaire. Pour cela, il faut d’abord créer un identifiant de formulaire appelé formToken.

Il peut être crée en appelant le web service Charge/CreatePayment:

{
"amount":   990,
"currency": "EUR",
"orderId":  "myOrderId-999999",
"customer": {
    "email": "sample@example.com"
    }
}
/**
 * I initialize the PHP SDK
 */
require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/keys.php';
require_once __DIR__ . '/helpers.php';

/** 
 * Initialize the SDK 
 * see keys.php
 */
$client = new Lyra\Client();

/**
 * I create a formToken
 */
$store = array("amount" => 250, 
"currency" => "EUR", 
"customer" => array(
  "email" => "sample@example.com",
  "orderId" => uniqid("MyOrderId")
));
$response = $client->post("V4/Charge/CreatePayment", $store);

/* I check if there is some errors */
if ($response['status'] != 'SUCCESS') {
    /* an error occurs, I throw an exception */
    display_error($response);
    $error = $response['answer'];
    throw new Exception("error " . $error['errorCode'] . ": " . $error['errorMessage'] );
}

/* everything is fine, I extract the formToken */
$formToken = $response["answer"]["formToken"];

?>

Pour plus de détails sur comment s’authentifier lors de l’appel au web-service REST, rendez-vous ici: Phase d’authentification.

La réponse sera :

{
    "status": "SUCCESS",
    "_type": "V4/WebService/Response",
    "webService": "Charge/CreatePayment",
    "applicationProvider": "PAYZEN",
    "version": "V4",
    "applicationVersion": "4.1.0",
    "answer": {
        "formToken": "ff:d433b3eee93b40cbac0a20efd13bfccc:161018165424:000003de45555201:9e:01",
        "_type": "V4/Charge/PaymentForm"
    }
}

2. Afficher le formulaire

Vous pouvez afficher le formulaire de paiement, à partir d’un formToken, grâce au code suivant :

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" 
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="https://api.payzen.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
   kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5" 
   kr-post-url-success="paid.html">
  </script>

  <!-- theme and plugins. should be loaded after the javascript library -->
  <!-- not mandatory but helps to have a nice payment form out of the box -->
  <link rel="stylesheet" 
  href="https://api.payzen.eu/static/js/krypton-client/V4.0/ext/classic-reset.css">
 <script 
  src="https://api.payzen.eu/static/js/krypton-client/V4.0/ext/classic.js">
 </script> 
</head>
<body>
  <!-- payment form -->
  <div class="kr-embedded" 
   kr-form-token="ff:d433b3eee93b40cbac0a20efd13bfccc:161018165424:000003de45555201:9e:01">

    <!-- payment form fields -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- error zone -->
    <div class="kr-form-error"></div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" 
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
   kr-public-key="<?php echo $client->getPublicKey();?>"
   kr-post-url-success="paid.php">
  </script>

  <!-- theme and plugins. should be loaded after the javascript library -->
  <!-- not mandatory but helps to have a nice payment form out of the box -->
  <link rel="stylesheet" 
   href="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic-reset.css">
  <script 
   src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic.js">
  </script>
</head>
<body style="padding-top:20px">
  <!-- payment form -->
  <div class="kr-embedded"
   kr-form-token="<?php echo $formToken;?>">

    <!-- payment form fields -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>  

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- error zone -->
    <div class="kr-form-error"></div>
  </div>  
</body>
</html>

Le formToken précédemment généré est défini dans la propriété kr-form-token de l’élément DIV kr-embedded.

Le client JavaScript va utiliser des éléments DIV spéciaux pour insérer les champs du formulaire. Ces conteneurs sont identifiés à partir des classes suivantes :

Class Description
kr-pan Numéro de la carte
kr-expiry Date d’expiration
kr-security-code Code de sécurité (CVV)
kr-form-error Zone d’affichage des erreurs

Exemple de formulaire de paiement :

Lorsque l’acheteur valide le formulaire, la transaction est soumise pour validation.

Si la transaction est payée Le formulaire est posté (sans les données sensibles de la carte).
Si la transaction est refusée Une erreur apparaît, l’acheteur n’est pas redirigé.

3. Vérifier le statut de la transaction

Une fois le paiement effectué, les 2 actions suivantes vont avoir lieu séquentiellement:

  • Une IPN (notification serveur à serveur) va être envoyée avec toutes les informations de la transaction sur l’URL de notification de la boutique.
  • Le client JavaScript va poster les résultats de la transaction comme si vous aviez utilisé un formulaire classique.

Exemple d’informations envoyées :

kr-hash=c3c0323c748fdb7c2d24bd39ada99663526236828efa795193bebfdea022fe58
kr-hash-algorithm=sha256_hmac
kr-hash-key=sha256_hmac
kr-answer={"orderStatus":"PAID", (...)

Une fois la signature vérifiée (kr-hash), vous serez en mesure de vérifier le statut de la transaction.

Pour tester cette 3ème étape, il vous suffit d’effectuer un paiement avec le formulaire ci-dessus, ou de vous rendre ici : Retour navigateur.