Paiement intégré
Le paiement hébergé d’un paiement peut s’ouvrir dans un cadre modal sur la page de votre boutique au lieu de la
remplacer. Créez le paiement sur votre serveur avec embedding :
{ "mode": "frame", "origin": "https://shop.example" }, l’origine de la page qui l’ouvre, telle que la donne
window.location.origin : https:// et un nom d’hôte, ou, dans le bac à sable seulement, hébergé ou sur votre
machine, http://127.0.0.1:<port> et http://localhost:<port>. Seule cette origine peut afficher les pages du
paiement dans un cadre.
Chargez l’ouvreur avec une balise <script> dans le document de votre page, depuis l’origine du paiement hébergé
(https://checkout.sandbox.futa-app.com dans le bac à sable hébergé, http://127.0.0.1:18140 sur votre machine) :
/sdk/v1/checkout.js. Il ne fonctionne ni avec import() ni depuis
un script placé dans un Shadow DOM. FutaCheckout.open prend checkoutUrl, le checkout_url que votre serveur a
reçu pour la commande, jamais l’adresse de la page ni une saisie du client, puis onState, onClose, fallback et
returnFocus. Quand open lève une erreur, ou que window.FutaCheckout manque, envoyez vous-même le payeur vers
checkout_url.
Les événements sont indicatifs : final ne veut pas dire payé, et payment peut être l’id d’un paiement de
remplacement. Confirmez sur votre serveur, par le webhook signé ou GET /v1/payments/{id}. Les
messages suivent checkout-frame-message-v1.schema.json. onClose reçoit
closed quand le payeur ou vous fermez la fenêtre ; avec fallback: "none", il reçoit aussi timeout, refused,
unsupported ou requested, alors que par défaut le payeur part vers la page du paiement hébergé, sans appel à
onClose.
« Retour à … » et la remise à la banque s’ouvrent hors du cadre, et les reçus se téléchargent depuis le cadre. Si
votre page envoie une Content Security Policy, autorisez l’origine du paiement hébergé dans script-src et
frame-src. Si vous construisez le cadre vous-même avec un attribut sandbox, donnez-lui les jetons de l’ouvreur,
allow-scripts allow-forms allow-same-origin allow-downloads allow-top-navigation-by-user-activation : sans
allow-same-origin, chaque formulaire répond 403 ; sans allow-forms, rien n’est envoyé ; sans les autres, la
remise à la banque, le retour, les reçus et les messages sont bloqués. L’adresse du cadre porte la capacité du
paiement : masquez iframe[src^="https://checkout.sandbox.futa-app.com/pay/"] dans le bac à sable hébergé, ou
iframe[src^="http://127.0.0.1:18140/pay/"] sur votre machine, dans les outils de relecture de session, et gardez
les adresses /pay/ hors de ce que relèvent les outils de suivi et d’analyse. Pour un bouton « Payer » placé dans un
popover automatique, passez returnFocus ou utilisez popover="manual".