• France
Rechercher
Catégories
Tags
Français
Français
Anglais
Implémentation
Formulaire embarqué (cartes)
API REST de paiement
Formulaire en redirection
Push mail
Échange de fichiers
Paiement mobile
Exemples de code
Logos
Modules de paiement
Back office
Guides
Aide
FAQ
Tutoriels vidéos
Contacter le support

Démarrer rapidement

Cette page décrit une intégration rapide en 3 étapes avec un exemple fonctionnel.

Consultez ce lien pour avoir un guide complet : Intégration du formulaire de paiement.

I. Créer le formToken

  1. Créez une requête de paiement vers le Web Service Charge/CreatePayment.

  • Elle contient le contexte de paiement (montant, devise, numéro de commande, coordonnées de l'acheteur, etc.).

  • Exemple pour un paiement simple :

    • montant : 9, 90 €.
    • commande : "myOrderId-999999",
    • email de l'acheteur : "sample@example.com".

Pour envoyer la requête, authentifiez-vous avec les clés d'API REST (pour plus d'infos : Etape 2 : S'authentifier)

/doc/fr-FR/rest/V4.0/api/kb/authentication.html
https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L9-L44
https://api.systempay.fr/api-payment/V4/Charge/CreatePayment
{
    "amount":   990,
    "currency": "EUR",
    "orderId":  "myOrderId-999999",
    "customer": {
        "email": "sample@example.com"
    }
}
{
    "amount":   1500,
    "currency": "PEN",
    "orderId":  "myOrderId-999999",
    "more": "parameters",
    "customer": {
        "email": "sample@example.com"
    }
}
{
    "amount":   20000,
    "currency": "ARS",
    "orderId":  "myOrderId-999999",
    "more": "parameters",
    "customer": {
        "email": "sample@example.com"
    }
}
{
    "amount":   100000,
    "currency": "COP",
    "orderId":  "myOrderId-999999",
    "more": "parameters",
    "customer": {
        "email": "sample@example.com"
    }
}
{
    "amount":   2500,
    "currency": "BRL",
    "orderId":  "myOrderId-999999",
    "more": "parameters",
    "customer": {
        "email": "sample@example.com"
    }
}

La réponse sera :

{
    "status": "SUCCESS",
    "_type": "V4/WebService/Response",
    "webService": "Charge/CreatePayment",
    "applicationProvider": "NPS",
    "version": "V4",
    "applicationVersion": "4.1.0",
    "answer": {
        "formToken": "DEMO-TOKEN-TO-BE-REPLACED",
        "_type": "V4/Charge/PaymentForm"
    }
}
  1. Récupèrez le formToken généré pour afficher le formulaire de paiement

Le formToken généré est Processing...

II. Afficher le formulaire

Une fois le formToken généré, affichez le formulaire de paiement.

  1. Dans le HEAD,

  • chargez notre librairie JavaScript: src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"

  • intégrez obligatoirement la clé publique dans le paramètre kr-public-key ( 3 ème clé du tableau des clés API REST).

  • intégrez d'autres paramètres d'initialisation, comme le paramètre kr-post-url-success en cas de paiement accepté ( Etape 4 : Afficher le formulaire de paiement)

    • Exemple : kr-post-url-success ="[SUCESS PAYMENT URL]"

  • choisissez un thème (plus d'infos sur Thèmes).

  1. Dans le BODY,

  • choissisez le mode d'affichage:

    • avec la class= kr-embedded pour le mode embarqué( Mode embarqué)
    • avec la class= kr-embedded et l'attibtut kr-popin pour le mode pop-in ( Mode pop-in)

  • valorisez le formToken dans l'attribut kr-form-token

Mode embarqué

Exemple de code pour la boutique de TEST 

<!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" />


<!-- STEP :
1 : load the JS librairy
2 : required public key and the JS parameters as url sucess -->

<script type="text/javascript"
        src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
        kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ"
        kr-post-url-success="[SUCESS PAYMENT URL]";>
 </script>

 <!-- 3 : theme néon should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon-reset.css">
<script type="text/javascript" src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon.js">
    </script>
</head>


<body>

<!-- 4 : display the form payment -->
<div class="kr-embedded" kr-form-token="[GENERATED FORMTOKEN]">

</div>
</body>
</html>

Exemple de formulaire de paiement fonctionnel :

Le formulaire est fonctionnel, vous pouvez effectuer un paiement fictif en utilisant les cartes de tests de la barre de debug (en bas à gauche de cette fenêtre).

III. Analyser le résultat du paiement

A la fin du paiement, vous pouvez analyser le résultat du paiement depuis :

  • la notification de paiement instanée : IPN : Analyse de l'IPN (URL de notification).
  • la réponse envoyée au navigateur : Analyse du résultat du paiement via le retour navigateur.

Un mécanisme de sécurité vérifie l'authenticité des informations envoyées, avec le kr-hash.

Dans l'objet PAYMENT, un exemple de kr-answer :

{
  "shopId": "73239078",
  "orderCycle": "CLOSED",
  "orderStatus": "PAID",
  "serverDate": "2022-01-21T09:28:17+00:00",
  "orderDetails": {
    "orderTotalAmount": 990,
    "orderEffectiveAmount": 990,
    "orderCurrency": "EUR",
    "mode": "TEST",
    "orderId": "myOrderId-475882",
    "metadata": null,
    "_type": "V4/OrderDetails"
  },
  "customer": {
    "billingDetails": {
      "address": null,
      "category": null,
      "cellPhoneNumber": null,
      "city": null,
      "country": null,
      "district": null,
      "firstName": null,
      "identityCode": null,
      "language": "FR",
      "lastName": null,
      "phoneNumber": null,
      "state": null,
      "streetNumber": null,
      "title": null,
      "zipCode": null,
      "legalName": null,
      "_type": "V4/Customer/BillingDetails"
    },
    "email": "sample@example.com",
    "reference": null,
    "shippingDetails": {
      "address": null,
      "address2": null,
      "category": null,
      "city": null,
      "country": null,
      "deliveryCompanyName": null,
      "district": null,
      "firstName": null,
      "identityCode": null,
      "lastName": null,
      "legalName": null,
      "phoneNumber": null,
      "shippingMethod": null,
      "shippingSpeed": null,
      "state": null,
      "streetNumber": null,
      "zipCode": null,
      "_type": "V4/Customer/ShippingDetails"
    },
    "extraDetails": {
      "browserAccept": null,
      "fingerPrintId": null,
      "ipAddress": "185.244.73.2",
      "browserUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36",
      "_type": "V4/Customer/ExtraDetails"
    },
    "shoppingCart": {
      "insuranceAmount": null,
      "shippingAmount": null,
      "taxAmount": null,
      "cartItemInfo": null,
      "_type": "V4/Customer/ShoppingCart"
    },
    "_type": "V4/Customer/Customer"
  },
  "transactions": [
    {
      "shopId": "73239078",
      "uuid": "1c8356b0e24442b2acc579cf1ae4d814",
      "amount": 990,
      "currency": "EUR",
      "paymentMethodType": "CARD",
      "paymentMethodToken": null,
      "status": "PAID",
      "detailedStatus": "AUTHORISED",
      "operationType": "DEBIT",
      "effectiveStrongAuthentication": "ENABLED",
      "creationDate": "2022-01-21T09:28:16+00:00",
      "errorCode": null,
      "errorMessage": null,
      "detailedErrorCode": null,
      "detailedErrorMessage": null,
      "metadata": null,
      "transactionDetails": {
        "liabilityShift": "YES",
        "effectiveAmount": 990,
        "effectiveCurrency": "EUR",
        "creationContext": "CHARGE",
        "cardDetails": {
          "paymentSource": "EC",
          "manualValidation": "NO",
          "expectedCaptureDate": "2022-01-27T09:38:10+00:00",
          "effectiveBrand": "VISA",
          "pan": "497011XXXXXX1003",
          "expiryMonth": 12,
          "expiryYear": 2025,
          "country": "FR",
          "issuerCode": 17807,
          "issuerName": "Banque Populaire Occitane",
          "effectiveProductCode": null,
          "legacyTransId": "929936",
          "legacyTransDate": "2022-01-21T09:28:16+00:00",
          "paymentMethodSource": "NEW",
          "authorizationResponse": {
            "amount": 990,
            "currency": "EUR",
            "authorizationDate": "2022-01-21T09:28:16+00:00",
            "authorizationNumber": "3fe205",
            "authorizationResult": "0",
            "authorizationMode": "FULL",
            "_type": "V4/PaymentMethod/Details/Cards/CardAuthorizationResponse"
          },
          "captureResponse": {
            "refundAmount": null,
            "refundCurrency": null,
            "captureDate": null,
            "captureFileNumber": null,
            "effectiveRefundAmount": null,
            "effectiveRefundCurrency": null,
            "_type": "V4/PaymentMethod/Details/Cards/CardCaptureResponse"
          },
          "threeDSResponse": {
            "authenticationResultData": {
              "transactionCondition": null,
              "enrolled": null,
              "status": null,
              "eci": null,
              "xid": null,
              "cavvAlgorithm": null,
              "cavv": null,
              "signValid": null,
              "brand": null,
              "_type": "V4/PaymentMethod/Details/Cards/CardAuthenticationResponse"
            },
            "_type": "V4/PaymentMethod/Details/Cards/ThreeDSResponse"
          },
          "authenticationResponse": {
            "id": "30eaa40d-dd76-4617-b527-4bed6240b81c",
            "operationSessionId": "ae6f2ad3ffea41bb8faf1aefabad87b9",
            "protocol": {
              "name": "THREEDS",
              "version": "2.1.0",
              "network": "VISA",
              "challengePreference": "NO_PREFERENCE",
              "simulation": true,
              "_type": "V4/Charge/Authenticate/Protocol"
            },
            "value": {
              "authenticationType": "CHALLENGE",
              "authenticationId": {
                "authenticationIdType": "dsTransId",
                "value": "bafdb21f-e3d6-4d1c-b4f6-d1668b7f7f21",
                "_type": "V4/Charge/Authenticate/AuthenticationId"
              },
              "authenticationValue": {
                "authenticationValueType": "CAVV",
                "value": "BqLgDBHYRaCBpip3Fn3+erKT9vg=",
                "_type": "V4/Charge/Authenticate/AuthenticationValue"
              },
              "status": "SUCCESS",
              "commerceIndicator": "05",
              "extension": {
                "authenticationType": "THREEDS_V2",
                "threeDSServerTransID": "30eaa40d-dd76-4617-b527-4bed6240b81c",
                "dsTransID": "bafdb21f-e3d6-4d1c-b4f6-d1668b7f7f21",
                "acsTransID": "bd6e58b4-6f37-4993-b428-9096766d83a6",
                "_type": "V4/Charge/Authenticate/AuthenticationResultExtensionThreedsV2"
              },
              "reason": {
                "_type": "V4/Charge/Authenticate/AuthenticationResultReason"
              },
              "_type": "V4/Charge/Authenticate/AuthenticationResult"
            },
            "_type": "V4/AuthenticationResponseData"
          },
          "installmentNumber": null,
          "installmentCode": null,
          "markAuthorizationResponse": {
            "amount": null,
            "currency": null,
            "authorizationDate": null,
            "authorizationNumber": null,
            "authorizationResult": null,
            "_type": "V4/PaymentMethod/Details/Cards/MarkAuthorizationResponse"
          },
          "cardHolderName": null,
          "identityDocumentNumber": null,
          "identityDocumentType": null,
          "_type": "V4/PaymentMethod/Details/CardDetails"
        },
        "fraudManagement": {
          "_type": "V4/PaymentMethod/Details/FraudManagement"
        },
        "subscriptionDetails": {
          "subscriptionId": null,
          "_type": "V4/PaymentMethod/Details/SubscriptionDetails"
        },
        "parentTransactionUuid": null,
        "mid": "9999999",
        "sequenceNumber": 1,
        "taxAmount": null,
        "preTaxAmount": null,
        "taxRate": null,
        "externalTransactionId": null,
        "nsu": null,
        "tid": "001",
        "acquirerNetwork": "CB",
        "taxRefundAmount": null,
        "userInfo": "JS Client",
        "paymentMethodTokenPreviouslyRegistered": null,
        "occurrenceType": "UNITAIRE",
        "_type": "V4/TransactionDetails"
      },
      "_type": "V4/PaymentTransaction"
    }
  ],
  "subMerchantDetails": null,
  "_type": "V4/Payment"
}

  • Pour avoir plus de détails, Etape 5 : Analyser le résultat du paiement.

  • Testez aussi le formulaire de paiement grâce au Playground interactif.

© 2023 | Tous droits réservés à Systempay | Mentions légales
2.16.0-doc-1.8