Récupérer la clé publique et la clé privé d'API pour l'environnement souhaité (test ou live) sur votre dashboard https://dashboard.cresh.eu/implementation
Récupérer l'URL d'API relative à votre environnement sur votre dashboard (https://dashboard.cresh.eu/implementation), ainsi que l'URL de la librarie JS
Initialisation
Il est conseillé de placer la librairie dans une balise <script> à la fin de votre <body> et de s'assurer de l'initialisation une fois que la page est totalement chargée.
<html>
<!-- ... -->
<body>
<!-- ... -->
<script src="<https://cdn.cresh.eu/lib/v1/cresh.min.js>"></script>
<script>
function onLoad() {
const cresh = Cresh({
publishableKey: 'pk_test_xxxxxxxxxxxxxxxx', // Récupéré dans votre dashboard
apiUrl: '<https://sandbox.payment.cresh.eu>', // Récupéré dans votre dashboard
});
}
document.addEventListener('DOMContentLoaded', () => onLoad());
</script>
</body>
</html>
Préparation du payload
Vous devez préparer le payload définitif à envoyer à notre plateforme de paiement dans votre backend pour des raisons de sécurité et éviter toute falsification.
Le payload doit contenir :
order: un objet Order contenant au minimum l'ensemble des valeurs obligatoires.seal: un sceau calculé à partir de l'objetorderet votresecret_keypour garantir aucune altération des informations de paiement.
Calcul du seal
Le seal doit être caculé à partir de l'objet order respectant nos spécifications
Le seal se calcule en plusieurs étapes :
- Conversion de l'objet
orderen formatJSON - Encodage de la string
JSONenbase64 - Calcul d'un hash digest avec l'algorithme
sha512
Exemple d'implémentation dans un backend Node.js
const crypto = require('crypto');
const secretKey = 'sk_test_xxxxxxxxxxxxxxxxx';
const order = {
// valid order object
};
const payload = Buffer.from(JSON.stringify(order)).toString('base64');
const seal = crypto.createHmac(
'sha512',
secretKey,
).update(payload).digest('hex');
return {
order,
seal,
};
Récupération des paramètres de paiement dans la page html
Vous êtes libre de récupérer les attributs order et seal généré dans votre backend à votre convenance, mais il est conseillé d'utilisé un système de templating ou d'effectuer une requête à votre backend durant le chargement de la page.
Via templating
<aside> 💡 Ceci est une simulation de templating, référez-vous à la documentation de la librairie de templating que vous souhaitez utiliser.
</aside>
<html>
<!-- ... -->
<body>
<!-- ... -->
<script src="<https://cdn.cresh.eu/lib/v1/cresh.min.js>"></script>
<script>
function onLoad() {
const cresh = Cresh({
publishableKey: 'pk_test_xxxxxxxxxxxxxxxx', // Récupéré dans votre dashboard
apiUrl: '<https://sandbox.payment.cresh.eu>', // Récupéré dans votre dashboard
});
}
const checkoutPayload = {
order: JSON.parse('{{ json_order_placeholder }}'),
seal: '{{ seal_placeholder }}',
};
cresh.checkout.payload(checkoutPayload)
document.addEventListener('DOMContentLoaded', () => onLoad());
</script>
</body>
</html>
Via requête HTTP
<html>
<!-- ... -->
<body>
<!-- ... -->
<script src="<https://cdn.cresh.eu/lib/v1/cresh.min.js>"></script>
<script>
const BACKEND_URL='your backend url here';
function onLoad() {
const cresh = Cresh({
publishableKey: 'pk_test_xxxxxxxxxxxxxxxx', // Récupéré dans votre dashboard
apiUrl: '<https://sandbox.payment.cresh.eu>', // Récupéré dans votre dashboard
});
const xhr = new XMLHttpRequest();
xhr.open('GET', BACKEND_URL, true);
xhr.send();
xhr.onload = function() {
if (this.readyState == 4 && this.status == 200) {
/* Attend une réponse en JSON du format:
{
"order": {
...
},
"seal": "ac23f2b57a674aba5b28a23dae677fa2f4d1ae1a349ebcdd6772a028c7f26861"
}
*/
const payload = JSON.parse(xhr.responseText);
cresh.checkout.payload(payload);
}
};
xhr.onerror = function() {
console.log("Unable to retrieve checkout payload from backend");
};
}
document.addEventListener('DOMContentLoaded', () => onLoad());
</script>
</body>
</html>
Configuration et affichage des éléments d'interface
Une fois le contexte de paiement correctement configuré il reste à afficher à l'utilisateur le module Cresh de paiement avec la sélection du nombre d'échéances.
Vous devez utiliser la méthode mount() de la librairie Cresh, voir la documentation pour plus de détail.
<html>
<!-- ... -->
<body>
<!-- ... -->
<div id="cresh-placeholder"></div>
<!-- ... -->
<script src="<https://cdn.cresh.eu/lib/v1/cresh.min.js>"></script>
<script>
function onLoad() {
const cresh = Cresh({
publishableKey: 'pk_test_xxxxxxxxxxxxxxxx', // Récupéré dans votre dashboard
apiUrl: '<https://sandbox.payment.cresh.eu>', // Récupéré dans votre dashboard
});
cresh.mount({
amount: 35000, // obligatoirement en centimes. Exemple €150 doit être noté 15000
domElement: 'cresh-placeholder', // id d'un élément html vide présent dans le <body>
});
};
document.addEventListener('DOMContentLoaded', () => onLoad());
</script>
</body>
</html>
Exemple complet d'implémentation frontend
<html>
<!-- ... -->
<body>
<!-- ... -->
<div id="cresh-placeholder"></div>
<!-- ... -->
<script src="<https://cdn.cresh.eu/lib/v1/cresh.min.js>"></script>
<script>
function onLoad() {
const cresh = Cresh({
publishableKey: 'pk_test_xxxxxxxxxxxxxxxx', // Récupéré dans votre dashboard
apiUrl: '<https://sandbox.payment.cresh.eu>', // Récupéré dans votre dashboard
});
const payload = { // Doit être généré par votre backend, à votre convenance. Template ou requête http.
order: {
callback_url: '<http://www.votresite.com/callback>',
billing_address: {
street_number: '14',
address_line1: 'rue duvivier',
city: 'paris',
country: 'fra',
zipcode: '75007',
},
currency: 'eur',
customer: {
civility: 'mme',
firstname: 'Mathilde',
lastname: 'Cresh',
birthdate: '1978-09-12',
email: '[email protected]',
phone: '0612345678',
},
items: [{
label: 'nom du produit',
sku: 'unique-identifier',
url: '<https://www.votresite.com/url/du/produit>',
image_url: '<https://www.votresite.com/url/image/produit>',
quantity: 1,
unit_price: 35000,
currency: 'eur',
description: 'description libre',
}],
// shipping_address: {}, // Optionnel
shipping_amount: 1000,
tax_amount: 5800,
total_amount: 35000,
merchant_reference: '123-456',
store_id: 's4YZ0APEf2chGP',
},
seal: 'ac23f2b57a674aba5b28a23dae677fa2f4d1ae1a349ebcdd6772a028c7f26861', // Généré par votre backend, voir la section relative.
};
cresh.checkout.payload(payload);
cresh.mount({
amount: payload.order.total_amount, // obligatoirement en centimes. Exemple €150 doit être noté 15000
domElement: 'cresh-placeholder',
});
};
document.addEventListener('DOMContentLoaded', () => onLoad());
</script>
</body>
</html>