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
Le formToken contient les données du panier (montant, devise, numéro de commande, coordonnées de l'acheteur, etc.),
- Créez une requête de paiement vers le Web Service Charge/CreatePayment.
- Exemple pour un paiement simple :
- montant : 10 000 XPF.
- commande : "myOrderId-999999",
- email de l'acheteur : "sample@example.com".
- Par défaut, tous les moyens de paiement compatibles (en fonction du montant minimum ou maximum, des contraintes techniques, ...) associés à la boutique seront proposés. Si vous souhaitez filtrer les moyens de paiement, consultez : sélectionner les moyens de paiement.
Pour envoyer la requête, authentifiez-vous avec les clés d'API REST (pour plus d'infos :Etape 2 : S'authentifier)
{ "amount": 990, "currency": "XPF", "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": "CSB", "version": "V4", "applicationVersion": "4.1.0", "answer": { "formToken": "DEMO-TOKEN-TO-BE-REPLACED", "_type": "V4/Charge/PaymentForm" } }
- Récupèrez le formToken généré pour afficher le formulaire de paiement
II. Afficher le formulaire
Après la création du formToken, affichez le formulaire de paiement.,
Une fois le formToken généré, affichez le formulaire de paiement.
- Dans le
HEAD
,
chargez notre librairie JavaScript : src="https://epaync.nc/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="[SUCCESS PAYMENT URL]"
choisissez un thème (plus d'infos sur Thèmes).
- 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'attibtutkr-popin
pour le mode pop-in (Mode pop-in)
- avec la
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://epaync.nc/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="15578053:testpublickey_1xhxA8MgmKyFJJK8fS7EaNRPAHDJFTv9AzlF6ue2ZJU8o" kr-post-url-success="[SUCCESS PAYMENT URL]";> </script> <!-- 3 : theme néon should be loaded in the HEAD section --> <link rel="stylesheet" href="https://epaync.nc/static/js/krypton-client/V4.0/ext/neon-reset.min.css"> <script type="text/javascript" src="https://epaync.nc/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 :
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": "15578053", "orderCycle": "CLOSED", "orderStatus": "PAID", "serverDate": "2022-01-21T09:28:17+00:00", "orderDetails": { "orderTotalAmount": 990, "orderEffectiveAmount": 990, "orderCurrency": "XPF", "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": "15578053", "uuid": "1c8356b0e24442b2acc579cf1ae4d814", "amount": 990, "currency": "XPF", "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": "XPF", "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": "XPF", "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.