CINXE.COM
PAYONE Documentation Platform | Client API - AJAX-Mode
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="author" content="PAYONE"> <title>PAYONE Documentation Platform | Client API - AJAX-Mode </title> <meta name="description" content=""> <link rel="icon" href="https://docs.payone.com/bl-themes/payone-docs/img/favicon.ico" type="image/png"> <link rel="stylesheet" type="text/css" href="https://docs.payone.com/bl-themes/payone-docs/css/font-line-aw-1.3.0/css/line-awesome.min.css?version=3.15.0"> <!-- Theme --> <link rel="stylesheet" type="text/css" href="https://docs.payone.com/bl-themes/payone-docs/css/bulma.min.css?version=3.15.0"> <link rel="stylesheet" type="text/css" href="https://docs.payone.com/bl-themes/payone-docs/css/bulma-tooltip.min.css?version=3.15.0"> <link rel="stylesheet" type="text/css" href="https://docs.payone.com/bl-themes/payone-docs/css/bulma.overrides.css?version=3.15.0"> <link rel="stylesheet" type="text/css" href="https://docs.payone.com/bl-themes/payone-docs/css/payone.icons.css?version=3.15.0"> <link rel="stylesheet" type="text/css" href="https://docs.payone.com/bl-themes/payone-docs/css/payone.misc.css?version=3.15.0"> <!-- Highlight --> <link rel="stylesheet" type="text/css" href="https://docs.payone.com/bl-themes/payone-docs/css/highlight.github.min.css?version=3.15.0"> <!-- Api template --> <link rel="stylesheet" type="text/css" href="https://docs.payone.com/bl-themes/payone-docs/php/api/api-template.css?version=3.15.0"> <!-- Load Plugins: Site head --> <link rel="canonical" href="https://docs.payone.com/integration/channel-client-api/client-api-ajax-mode"/> <!-- Robots plugin --> </head> <body> <!-- Load Bludit Plugins: Site Body Begin --> <div class="site_container" id="payone-sitecontainer"> <!-- Navbar --> <div id="navbardiv_on_index"> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="https://docs.payone.com"> <img src="/bl-themes/payone-docs/img/logo.svg" width="150" height="44" class="mt-3 mb-3"> </a> <a role="button" class="navbar-burger" data-target="navbarMenuContent" aria-label="menu" aria-expanded="false"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> <button id="mobileSubmenu" title="Open submenu"></button> </div> <div id="static top right sight" class="navbar-menu" style="display: block !important;"> <div class="navbar-end"> <div class="navbar-item"><div class="field has-addons"><div class="control"><input type="hidden" id="jspluginPayoneSearchMinChars" value="3" readonly><span id="jspluginPayoneSearchTextTooltip"><input type="text" class="input is-primary" id="jspluginPayoneSearchText" /> </span></div><div class="control"><button id="jspluginPayoneSearchButton" class="button is-primary" onClick="pluginPayoneSearch()" ><i class="payone-icon-tiny payone-white-search"></i></button></div></div></div><script> function openMinCharsMessage() { const tooltip = document.getElementById("jspluginPayoneSearchTextTooltip"); const minChars = document.getElementById("jspluginPayoneSearchMinChars").value; const message = 'Please enter at least ' + minChars + ' characters!'; tooltip.dataset.tooltip = message; tooltip.classList.add( 'has-tooltip-left', 'has-tooltip-arrow', 'has-tooltip-primary', 'has-tooltip-active' ); } function pluginPayoneSearch() { const text = document.getElementById("jspluginPayoneSearchText").value; const minChars = document.getElementById("jspluginPayoneSearchMinChars").value; const valid = (text.length >= minChars); if (!valid) { openMinCharsMessage(); return false; } window.open('https://docs.payone.com/'+'search/'+text, '_self'); return true; } document.getElementById("jspluginPayoneSearchText").onkeypress = function(e) { if (!e) e = window.event; var keyCode = e.keyCode || e.which; if (keyCode == '13'){ pluginPayoneSearch(); return false; } } </script> <div id="login" class="navbar-item"> <div class="buttons"> <a class="btn btn-outline-primary" type="button" href="https://login.pay1.de/"> Login PMI </a> </div> </div> <!-- <div id="signup" class="navbar-item"> <div class="buttons"> <a class="btn btn-primary" type="button" src="https://www.payone.com/DE-de/formulare/enterprise"> Sign up </a> </div> </div> --> </div> </div> </nav> <nav class="navbar payone-hide-navbar-mobile"> <div id="navbarMenuContent" class="navbar-menu box"> <div class="navbar-start"> <a class="navbar-item" href="/pcp/payone-commerce-platform"> PAYONE Commerce Platform </a> <a class="navbar-item" href="/payment-methods/"> Payment Methods </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link" href="/integration"> Integration </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/integration/plugins"> Plugins </a> <hr class="navbar-divider"> <a class="navbar-item" href="/integration/channel-server-api"> Server API </a> <hr class="navbar-divider"> <a class="navbar-item" href="/integration/channel-client-api"> Client API </a> <hr class="navbar-divider"> <a class="navbar-item" href="/integration/channel-payone-link"> Channel PAYONE Link </a> <hr class="navbar-divider"> <a class="navbar-item" href="/integration/channel-frontend"> Channel Frontend </a> <hr class="navbar-divider"> <a class="navbar-item" href="/integration/response-handling"> Response Handling </a> <hr class="navbar-divider"> <a class="navbar-item" href="/integration/testdata"> Testdata </a> </div> </div> <a class="navbar-item" href="/advanced-features"> Advanced Features </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Security & Risk Management </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/security-risk-management/3d-secure"> 3DS </a> <hr class="navbar-divider"> <a class="navbar-item" href="/security-risk-management/fraudprevention"> Fraud </a> <hr class="navbar-divider"> <a class="navbar-item" href="/security-risk-management/consumerscore"> Consumer score </a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Information </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/information/general-information"> General information </a> <hr class="navbar-divider"> <a class="navbar-item" href="/information/platform-codes"> Platform codes </a> <hr class="navbar-divider"> <a class="navbar-item" href="/information/payone-merchant-interface"> PAYONE Merchant Interface (PMI) </a> <hr class="navbar-divider"> <a class="navbar-item" href="/information/sequence-diagrams"> Sequence diagrams </a> <hr class="navbar-divider"> <a class="navbar-item" href="/information/privacy-policy"> Privacy Policy </a> <hr class="navbar-divider"> <a class="navbar-item" href="https://www.payone.com/DE-de/service/kontakt" target="_blank"> Contact (DE) </a> <hr class="navbar-divider"> <a class="navbar-item" href="https://www.payone.com/DE-de/service/feedback-beschwerde" target="_blank"> Report an issue (DE) </a> </div> </div> </div> </div> </nav> </div> <div class="payone-breadcrumbs"> <nav class="breadcrumb has-arrow-separator is-small" aria-label="breadcrumbs"> <ul> <li class=""><a href="/integration">Integration</a></li><li class=""><a href="/integration/channel-client-api">Channel-Client-API</a></li><li class="is-active"><a href="/integration/channel-client-api/client-api-ajax-mode">Client API - AJAX-Mode</a></li><!-- <li><a href="#">Bulma</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">Components</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li> --> </ul> </nav> </div> <div class="docs-container is-flex"> <aside id="aside" class="column is-2 is-narrow-mobile is-fullheight is-hidden-touch"><ul class="tree"><li><a target="_self" href="https://docs.payone.com/integration">Integration</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/plugins">Plugins</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-shopware-6">Integration Guide Shopware 6 </a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/shopware-6-integrationsanleitung">Integrationsanleitung Shopware 6 </a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-magento-2">Integration Guide Magento 2</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-magento-2">Integrationsanleitung Magento 2</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-shopware-5">Integration Guide Shopware 5</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-shopware-5">Integrationsanleitung Shopware 5</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-woocommerce">Integration Guide WooCommerce</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-woocommerce">Integrationsanleitung WooCommerce</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-oxid-6">Integrationsanleitung Oxid 6</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-oxid-6">Integration Guide Oxid 6</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-oxid-7">Integrationsanleitung Oxid 7</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-oxid-7">Integration Guide Oxid 7</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/installationsanleitung-magento-1">Installationsanleitung Magento 1</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-magento-1">Integration Guide Magento 1</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api">Channel-Server-API</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-preauthorization">Server API - Preauthorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-authorization">Server API - Authorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-capture">Server API - Capture</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-refund">Server API - Refund</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-debit">Server API - Debit</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-managemandate">Server API - Managemandate</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-getinvoice">Server API - Getinvoice</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-getfile">Server API - Getfile</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-vauthorizatuion">Server API - Vauthorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-creditcardcheck">Server API - Creditcardcheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-getuser">Server API - Getuser</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-updateuser">Server API - Updateuser</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-3dscheck">Server API - 3dscheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-bankaccountcheck">Server API - Bankaccountcheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-addresscheck">Server API - Addresscheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-createaccess">Server API - Createaccess</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-updateaccess">Server API - Updateaccess</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-updatereminder">Server API - Updatereminder</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-general-definitions">Server API - General Interface Definitions</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-checkout-demo-app">Server API - checkout demo app</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api">Channel-Client-API</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-preauthorization">Client API - Preauthorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-bankaccountcheck">Client API - Bankaccountcheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-creditcardcheck">Client API - Creditcardcheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-managemandate">Client API - Managemandate</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-general-interface-definitions">Client API - General Interface Definitions</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-createaccess">Client API - Createaccess</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-vauthorization">Client API - Vauthorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-authorization">Client API - Authorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-ajax-mode">Client API - AJAX-Mode</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-redirect-mode">Client API - Redirect-Mode</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-addresscheck">Client API - Addresscheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-hosted-iframe-mode">Client API - Hosted iFrame Mode </a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-hosted-iframe-mode/hosted-iframe-examples">Hosted Iframe Examples</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-hosted-iframe-mode/client-api-additional-tips">Client API - Additional Tips</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/calculation-of-the-hash-value">Client API - Calculation of the HASH value</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link">PAYONE Link</a><ul style="display:none"><li><a target="_blank" href="https://docs.payone.com/integration/channel-payone-link/payone-link-api?fullwidth=1">PAYONE Link - API</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link/payone-link-notification-api">PAYONE Link - Notification-API</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link/how-to-verify-notifications">PAYONE Link - How to Verify Notifications</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link/payone-link-authorization">PAYONE Link - Authorization + Linkstatus</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link/payone-link-complete-bash-example">PAYONE Link - Complete Bash Example + HMAC SHA256 Examples</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-frontend">Channel-Frontend</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/channel-frontend/frontend-available-payment-types">Frontend - Available payment types</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-frontend/payment-portals-access-shop">Payment portals (Access - Shop Versions)</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/response-handling">Response Handling</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/response-handling/transactionstatus-notification"> Transactionstatus Notifications - Samples and Responses</a></li><li><a target="_self" href="https://docs.payone.com/integration/response-handling/json-responses">JSON-Responses</a></li><li><a target="_self" href="https://docs.payone.com/integration/response-handling/json-examples">JSON Examples</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/testdata">Testdata</a></li></ul></li></ul></aside> <div id="payone-modal-submenu" class="modal"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title"> Integration </p> <button class="delete payone-primary-background" aria-label="close"></button> </header> <section class="modal-card-body"> <ul class="tree"> <li><a target="_self" href="https://docs.payone.com/integration">Integration</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/plugins">Plugins</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-shopware-6">Integration Guide Shopware 6 </a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/shopware-6-integrationsanleitung">Integrationsanleitung Shopware 6 </a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-magento-2">Integration Guide Magento 2</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-magento-2">Integrationsanleitung Magento 2</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-shopware-5">Integration Guide Shopware 5</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-shopware-5">Integrationsanleitung Shopware 5</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-woocommerce">Integration Guide WooCommerce</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-woocommerce">Integrationsanleitung WooCommerce</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-oxid-6">Integrationsanleitung Oxid 6</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-oxid-6">Integration Guide Oxid 6</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integrationsanleitung-oxid-7">Integrationsanleitung Oxid 7</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-oxid-7">Integration Guide Oxid 7</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/installationsanleitung-magento-1">Installationsanleitung Magento 1</a></li><li><a target="_self" href="https://docs.payone.com/integration/plugins/integration-guide-magento-1">Integration Guide Magento 1</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api">Channel-Server-API</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-preauthorization">Server API - Preauthorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-authorization">Server API - Authorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-capture">Server API - Capture</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-refund">Server API - Refund</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-debit">Server API - Debit</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-managemandate">Server API - Managemandate</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-getinvoice">Server API - Getinvoice</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-getfile">Server API - Getfile</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-vauthorizatuion">Server API - Vauthorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-creditcardcheck">Server API - Creditcardcheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-getuser">Server API - Getuser</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-updateuser">Server API - Updateuser</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-3dscheck">Server API - 3dscheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-bankaccountcheck">Server API - Bankaccountcheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-addresscheck">Server API - Addresscheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-createaccess">Server API - Createaccess</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-updateaccess">Server API - Updateaccess</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-updatereminder">Server API - Updatereminder</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-general-definitions">Server API - General Interface Definitions</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-server-api/server-api-checkout-demo-app">Server API - checkout demo app</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api">Channel-Client-API</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-preauthorization">Client API - Preauthorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-bankaccountcheck">Client API - Bankaccountcheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-creditcardcheck">Client API - Creditcardcheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-managemandate">Client API - Managemandate</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-general-interface-definitions">Client API - General Interface Definitions</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-createaccess">Client API - Createaccess</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-vauthorization">Client API - Vauthorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-authorization">Client API - Authorization</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-ajax-mode">Client API - AJAX-Mode</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-redirect-mode">Client API - Redirect-Mode</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-addresscheck">Client API - Addresscheck</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-hosted-iframe-mode">Client API - Hosted iFrame Mode </a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-hosted-iframe-mode/hosted-iframe-examples">Hosted Iframe Examples</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/client-api-hosted-iframe-mode/client-api-additional-tips">Client API - Additional Tips</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-client-api/calculation-of-the-hash-value">Client API - Calculation of the HASH value</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link">PAYONE Link</a><ul style="display:none"><li><a target="_blank" href="https://docs.payone.com/integration/channel-payone-link/payone-link-api?fullwidth=1">PAYONE Link - API</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link/payone-link-notification-api">PAYONE Link - Notification-API</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link/how-to-verify-notifications">PAYONE Link - How to Verify Notifications</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link/payone-link-authorization">PAYONE Link - Authorization + Linkstatus</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-payone-link/payone-link-complete-bash-example">PAYONE Link - Complete Bash Example + HMAC SHA256 Examples</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/channel-frontend">Channel-Frontend</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/channel-frontend/frontend-available-payment-types">Frontend - Available payment types</a></li><li><a target="_self" href="https://docs.payone.com/integration/channel-frontend/payment-portals-access-shop">Payment portals (Access - Shop Versions)</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/response-handling">Response Handling</a><ul style="display:none"><li><a target="_self" href="https://docs.payone.com/integration/response-handling/transactionstatus-notification"> Transactionstatus Notifications - Samples and Responses</a></li><li><a target="_self" href="https://docs.payone.com/integration/response-handling/json-responses">JSON-Responses</a></li><li><a target="_self" href="https://docs.payone.com/integration/response-handling/json-examples">JSON Examples</a></li></ul></li><li><a target="_self" href="https://docs.payone.com/integration/testdata">Testdata</a></li></ul></li> </ul> </section> <footer class="modal-card-foot"> <div class="buttons"> <button class="btn btn-outline-primary">Cancel</button> </div> </footer> </div> </div> <!-- Content --> <section class="section"> <div class="column is-12 mb-3 payone-sitedivs"> <div class="payone-white-content-section"> <h3>AJAX-Mode</h3> <p>In AJAX mode, values entered in a form can be checked and processed directly without reloading the web page. In order to enable this, two JavaScripts are required: one JavaScript inside the form and one JavaScript hosted by PAYONE. The second JavaScript is required because JavaScript does not allow cross-domain access. Checking and processing the data via AJAX should take place before the form is sent to the shop.</p> <p>Include the following JavaScript in your HTML page containing the form:</p> <p><strong>AJAX JavaScript URL:</strong> <a href="https://secure.pay1.de/client-api/js/ajax.js" class="external-link" rel="noopener" target="_blank">https://secure.pay1.de/client-api/js/ajax.js</a> </p> <h4>Remark</h4> <p>Payment data should not come into touch with your system. This is very important with credit card data. Certification according to the PCI standard is not necessary only if the card data does not come into touch with your systems. Sensible payment data should be removed from the form after checking and processing via the client API (see below) in order to not have contact with your systems. Any other data can be queried in preceding steps.</p> <h4>Important note</h4> <p>This mode is also known as “direct post”. The input fields are placed on the merchant payment page and not provided by PAYONE. Therefore the merchant needs to comply with PCI DSS SAQ A-EP certification <strong style="font-style: inherit;">if the full creditcard number (PAN) is processed</strong> (using the pseudocardnumber with “direct post” (e.g. to ask the customer for CVC) is fine).</p> <div class="rwui_text_box rwui_text_small rwui_type_warning rwui_id_a57af334-d126-44c8-b186-95d9abc4fcc6"> <p><span class="rwui_content rwui_body">To be SAQ A compliant PAYONE recommends implementation of the PAYONE hosted-iFrame-solution when processing the full original creditcard number (PAN).</span></p> </div> <p class="endOfBlock m-0 p-0">---end</p> <div class="samplebox responsesDIV"> <div class="sampleboxheader sbflex-big"><span class="sampleboxhtext has-text-white">JavaScript/AJAX code example</span></div> <button type="button" class="payone-copy-text button payone-is-tiny btn-primary sbflex"> <span class="icon-text"> <span class="icon payone-is-tiny"> <i class="payone-copy-outline"></i> </span> <span>Copy</span> </span> </button> <button class="btn-primary button payone-is-tiny sbflex" aria-expanded="false"> <svg class="svg-Up svg2" version="1.1" viewbox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true" style="fill: currentColor;"> <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon> </svg><span>expand</span> <!--<span class="sc-jcwpoC DVwyR"></span> --></button> <table class="samplecodebox sbflex-full"> <tbody> <tr style="height: 179px;"> <td> <pre class="language-javascript"><code>var data = { request : 'creditcardcheck', responsetype : ‘REDIRECT’, // JSON or REDIRECT available mode : 'live', mid : '10000', aid : '10001', portalid : '2000000', encoding : 'UTF-8', storecarddata : 'yes', hash : '19062005567ca72601cc9d031f9a94b1', cardholder : document.Testform.cardholder.value, cardpan : document.Testform.cardpan.value, cardtype : document.Testform.cardtype.value, cardexpiremonth : document.Testform.cardexpiremonth.value, cardexpireyear : document.Testform.cardexpireyear.value, cardcvc2 : document.Testform.cardcvc2.value, language : 'en' } var options = { return_type : 'object', callback_function_name: 'processPayoneResponse' } function processPayoneResponse(response) { if (response.get('status') == 'VALID') { document.Testform.cardpan.value=’’; document.Testform.cardcvc2.value=’’; document.Testform.pseudocardpan.value=response.get('pseudocardpan') document.Testform.submit(); } else { alert(response.get('customermessage')); } } var request = new PayoneRequest(data, options); request.checkAndStore();</code></pre> </td> </tr> </tbody> </table> </div> <p></p> <p class="endOfBlock m-0 p-0">---end</p> <div class="samplebox responsesDIV"> <div class="sampleboxheader sbflex-big"><span class="sampleboxhtext has-text-white">JSON response example</span></div> <button type="button" class="payone-copy-text button payone-is-tiny btn-primary sbflex"> <span class="icon-text"> <span class="icon payone-is-tiny"> <i class="payone-copy-outline"></i> </span> <span>Copy</span> </span> </button> <button class="btn-primary button payone-is-tiny sbflex" aria-expanded="false"> <svg class="svg-Up svg2" version="1.1" viewbox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0" aria-hidden="true" style="fill: currentColor;"> <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon> </svg><span>expand</span> <!--<span class="sc-jcwpoC DVwyR"></span> --></button> <table class="samplecodebox sbflex-full"> <tbody> <tr style="height: 179px;"> <td> <pre class="language-markup"><code>{ "status" : "ERROR", "errorcode" : "1078", "errormessage" : "Parameter {cardpan} incorrect or missing", "customermessage" : "Invalid cardpan. Please check the information on the card.", </code></pre> </td> </tr> </tbody> </table> </div> </div> </div> </section> <!-- Javascript --> <script src="https://docs.payone.com/bl-kernel/js/jquery.min.js?version=3.15.0"></script> <script src="https://docs.payone.com/bl-themes/payone-docs/js/highlight.min.js?version=3.15.0"></script> <script src="https://docs.payone.com/bl-themes/payone-docs/js/jquery-resizable.js?version=3.15.0"></script> <script src="https://docs.payone.com/bl-themes/payone-docs/js/payone.misc.js?version=3.15.0"></script> <script src="https://docs.payone.com/bl-themes/payone-docs/php/api/jquery.json-editor.min.js?version=3.15.0"></script> <script src="https://docs.payone.com/bl-themes/payone-docs/php/api/stickyNavigator.js?version=3.15.0"></script> <script src="https://docs.payone.com/bl-themes/payone-docs/php/api/autosize.js?version=3.15.0"></script> <script> hljs.initHighlighting(); </script> <script> autosize(document.querySelectorAll('.codetext')); </script> <script> $(function() { /***************************************** PHP generated Sidebar Add Active Navigation Class Based on URL *****************************************/ const browserPath = (location.pathname).slice(1); $('ul.tree li a').each(function(){ var $this = $(this); // We need to extract path from anchor href, so we can do exact comparision const checkLink = $this.attr('href'); const extractedPathWithDomain = checkLink.replace(/http(s)?(:)?(\/\/)?|(\/\/)/g, ''); const pathParts = extractedPathWithDomain.split('/'); pathParts.shift(); const extractedPath = pathParts.join('/'); if(browserPath === extractedPath) { $this.parent().addClass('is-active'); $this.parent().children('ul').show() } // for localhost only // or (window.location.hostname === "localhost" && window.location.pathname==="/bludit/") if (window.location.pathname==="/bludit-commercetools/") { $this.parent().removeClass('is-active'); } }); /************************ Sidebar SVG icon ************************/ jQuery('.svgCl').each(function(){ jQuery(this).css({'height': $(this).closest('ul').height($(this).height() + 5) + 'px'}); jQuery(this).css({'display': 'inline-block'}); }); /************************ Sidebar Nav items toggle open/close ************************/ $( 'ul.tree li' ).each( function() { if($(this).children('ul').length > 0) { $(this).addClass('parentLi'); $('li.parentLi > a').attr('href'); } if ($(this).find('ul > li').hasClass('is-active')) { $(this).addClass('activated'); $(this).children('ul').show(); // ul > display:none is hardcoded in sidebar.php } }); $( 'ul.tree li > ul > li' ).each( function() { $(this).addClass('parentLi'); if ($(this).hasClass('is-active')) { $(this).addClass('activated'); } }); }); // doc ready </script> <script> /************************ Copy to clipboard ************************/ function copyToClipboard(text) { var aux = document.createElement("input"); aux.setAttribute("value", text); document.body.appendChild(aux); aux.select(); document.execCommand("copy"); document.body.removeChild(aux); } function copyToClipboardAsFormatted(text) { navigator.clipboard.writeText(text); } function stripHtml(inputHtml) { const brToNewline = inputHtml.replace(/<br\s*[\/]?>/gi, "\n"); const content = brToNewline.replace(/<\/?[^>]+(>|$)/g, ""); return content; } $(function() { $( ".payone-copy-text" ).on( "click", function() { const currentCopyBtn = $(this); let parentNode = currentCopyBtn.closest('div.divcopybtn'); let payloadbox; if (parentNode.length > 0) { payloadbox = parentNode.next('div.payloadbox'); } else { parentNode = currentCopyBtn.closest('div.samplebox'); parentNode = parentNode.children('table'); parentNode = parentNode.children('tbody'); parentNode = parentNode.children('tr'); payloadbox = parentNode.children('td'); } if (payloadbox.length == 0) { return; } const preNode = payloadbox.children('pre'); const htmlContent = preNode.html(); const content = stripHtml(htmlContent); copyToClipboardAsFormatted(content); }); }); $(function() { $("h2").click(function() { var id = $(this).attr("id"); var permalink = "https://docs.payone.com/integration/channel-client-api/client-api-ajax-mode"; var link = permalink+"#"+id; copyToClipboard(link); }); }); // doc ready </script> <script> /************************ Sticky navbar ************************/ // Declare the function first var myFunction; // When the user scrolls the page, assign myFunction window.onscroll = function() { if (typeof myFunction === "function") { myFunction(); } }; // Get the navbar var navbar = document.getElementById("subnavbar"); // Check if the navbar exists if (navbar) { // Get the offset position of the navbar var sticky = navbar.offsetTop; // Define the function myFunction = function() { if (window.scrollY >= sticky) { navbar.classList.add("sticky"); } else { navbar.classList.remove("sticky"); } }; } </script> <script src="https://docs.payone.com/bl-themes/payone-docs/php/api/api-template.js?version=3.15.0"></script> <!-- Load Plugins: Site Body End --> </div> </div> <div class="site_footer" id="footcontainer"> <footer class="footer site-footer"> <!-- Footer --> <div class="container"> <!-- Column 1 Links --> <div class="footer-column"> <h3 class="h3Footer">PAYONE</h3> <ul> <li><a href="https://www.payone.com/DE-de/agb">Terms and Conditions</a></li> <li><a href="https://www.payone.com/DE-de/impressum">Legal Notice</a></li> <li><a href="/information/privacy-policy">Privacy Policy</a></li> <li><a href="https://www.payone.com/DE-de/ueber-uns/presse">Press</a></li> </ul> </div> <!-- Column 2 Links --> <div class="footer-column"> <h3 class="h3Footer">Service</h3> <ul> <li><a href="https://www.payone.com/DE-de/service/kundenportale">Customer Portals</a></li> <li><a href="https://www.payone.com/DE-de/ueber-uns/partner">Partner</a></li> <li><a href="https://github.com/PAYONE-GmbH">Github</a></li> <li><a href="https://www.payone.com/DE-de/service/downloads">Downloads</a></li> <li><a href="https://www.payone.com/DE-de/service/kontakt">Contact</a></li> <li><a href="https://www.payone.com/DE-de/service/feedback-beschwerde">Feedback</a></li> </ul> </div> <!-- Column 3 Links --> <div class="footer-column"> </div> <!-- Column 4 Social and Logo --> <div class="footer-column-social"> <!-- Social Links --> <div class="social-links" style="width: 100%;justify-content: space-evenly;"> <p> <a href="https://www.instagram.com/payone_gmbh/" style="padding: 5px;"> <i class="payone-icon-medium payone-black-instagram"></i></a> <a href="https://www.linkedin.com/company/payone_gmbh" style="padding: 5px;"> <i class="payone-icon-medium payone-black-linkedin"></i></a> <a href="https://www.facebook.com/PAYONEGmbH/"><i class="payone-icon-medium payone-black-facebook"></i></a> <a href="https://github.com/PAYONE-GmbH/" style="padding: 5px;"> <i class="payone-icon-medium payone-black-github"></i></a> <a href="https://www.youtube.com/channel/UCM7Eky84PKzkyTILI6xga-Q" style="padding: 5px;"> <i class="payone-icon-medium payone-black-youtube"></i></a> </p> </div> </div> <div class="footer-column-copyright"> <!--<div class="footer-powered-copyright"> <p>Powered by <a href="https://www.bludit.com/" target="_blank" rel="noopener noreferrer">Bludit</a></p> <p>© MyCompany 2023</p> </div>--> <div class="footer-powered-copyright"> <p ><span style="font-size:13px;">© PAYONE GmbH, Powered by <a target="_blank" class="text-white" href="https://www.bludit.com">Bludit</a></span></p> </div> </div> <div class="footer-column-worldline"> <!-- Logo and Text --> <div class="logo-text"> <img src="//media3.payone.com/f/64176/4200x387/933f1413c4/payone_worldline_endorsement_dunkelgrau.png" alt="" style="max-width:200px;"> </div> </div> </div> </footer> </div> <button id="backToTopBtn" title="Go to page start"></button> </body> </html>