Démarrer rapidement
Cette page décrit une intégration rapide en 3 étapes.
Consultez ce lien pour avoir un guide complet : Intégration du formulaire de paiement.
Visualisez le mode de fonctionnement : Cinématique.
I. Créer le formToken
Authentifiez-vous avec les clés d'API REST (Plus d'infos : Etape 2 : S'authentifier).
Utilisez le Web Service Charge/CreatePayment avec les données du paiement (montant, devise, numéro de commande, coordonnées de l'acheteur, etc.).
- Récupèrez le formToken (champ
answer.formtoken) pour afficher le formulaire de paiement
{
"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"
}
}II. Afficher le formulaire
Une fois le formToken généré :
- Dans le
HEAD,
A. chargez notre librairie JavaScript : src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
B. intégrez obligatoirement la clé publique dans le paramètre
kr-public-key(3 ème clé du tableau des clés API REST ).C. intégrez d'autres paramètres d'initialisation, comme le paramètre
kr-post-url-successen cas de paiement accepté.D. choisissez un thème (plus d'infos sur Thèmes).
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" /> <!-- A. load the JS librairy B. add the kr-public-key C. add parameters as kr-post-url-success (optionnal) --> <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="[SUCCESS PAYMENT URL]";> </script> <!-- D. add a 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.min.css"> <script type="text/javascript" src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/neon.js"> </script> </head> (...) </html>
- Dans le
BODY,
- Valorisez le formToken dans l'attribut
kr-form-token(Voir : I. Créer le formToken)
- Choisissez le mode d'affichage :
| Mode liste (par défaut) | Mode Popin | Mode liste avec carte embarquée |
|---|---|---|
 |  | |
<body> <div class="kr-smart-form" kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body> | <body> <div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body> | <body> <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body> |
| Plus d'infos : Mode liste | Plus d'infos : Mode pop-in | Plus d'infos : Mode liste avec carte embarquée |
Exemple de code complet pour la boutique de TEST
Mode liste avec carte embarquée
<!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="[SUCCESS 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.min.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-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"> </div> </body> </html>
Vous avez également le choix :
III. Analyser le résultat du paiement
Analysez le résultat du paiement depuis l'IPN ou lors du retour à la boutique.
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 à la boutique.
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.