{"title":"MOTO payments through API","category":"default","creationDate":1776961628,"content":"<p>You can make an API request to initiate a MOTO payment and use Web Drop-in to enter the shopper's payment details in your UI.<\/p>\n<p>For example: when a shopper calls your call center, your user (for example, an agent in your call center) enters the shopper's card details in the Drop-in payment form and submits the payment.<\/p>\n<h2>Requirements<\/h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Requirement<\/th>\n<th style=\"text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Setup steps<\/strong><\/td>\n<td style=\"text-align: left;\">Before you begin: <ul><li markdown=\"1\"><a href=\"\/pt\/development-resources\/api-credentials#generate-api-key\">Get your API key.<\/a><\/li><\/ul><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong><a href=\"\/pt\/development-resources\/api-credentials\/roles\/\">API credential roles<\/a><\/strong><\/td>\n<td style=\"text-align: left;\">Make sure that you have the following roles <ul><li markdown=\"1\"><strong>Merchant PAL webservice role<\/strong><\/li><li markdown=\"1\"><strong>Checkout webservice role<\/strong><\/li><li markdown=\"1\"><strong>Checkout encrypted cardholder data<\/strong><\/li><\/ul><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong><a href=\"\/pt\/development-resources\/webhooks\">Webhooks<\/a><\/strong><\/td>\n<td style=\"text-align: left;\">Subscribe to the following webhook: <ul><li markdown=\"1\"><a href=\"\/pt\/development-resources\/webhooks\/webhook-types\/#event-codes\">Standard webhook<\/a><\/li><\/ul><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>How it works<\/h2>\n<p>Use the Checkout API to initiate a payment session and enter the shopper's payment details in the Drop-in payment form.<\/p>\n<ol>\n<li>Your shopper contacts you to initiate a MOTO payment.<\/li>\n<li>Your user (for example, an agent in your call center) goes to your UI for MOTO payments.<\/li>\n<li>Your user enters the payment amount and other required information in your UI.<\/li>\n<li>Your UI application passes the payment amount and other required information to your server.<\/li>\n<li>Your server makes an API request to create a payment session.<\/li>\n<li>Your UI application creates an instance of Drop-in using the session data from the server.<\/li>\n<li>Drop-in shows the payment form.<\/li>\n<li>Your user enters the shopper's payment details in the payment form and submits the payment.<\/li>\n<li>Your webhook server receives the webhook containing the payment outcome.<\/li>\n<\/ol>\n<p><a rel=\"lightbox\" href=\"\/user\/pages\/docs\/06.unified-commerce\/09.mail-order-telephone-order\/01.api-request\/moto-drop-in.svg\" src=\"\">\n  <img alt=\"\" src=\"\/user\/pages\/docs\/06.unified-commerce\/09.mail-order-telephone-order\/01.api-request\/moto-drop-in.svg\" \/>\n<\/a><\/p>\n<h2 id=\"create-payment-session\">Create a session<\/h2>\n<p>Create the payment session resource that includes payment amount information.<\/p>\n<p>To create a payment session, make a  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/sessions\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/sessions<\/a> request, including:<\/p>\n<table>\n<thead>\n<tr>\n<th>Parameter name<\/th>\n<th style=\"text-align: center;\">Required<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/sessions#request-amount\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">amount<\/a><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>The\u00a0<code>currency<\/code>\u00a0and\u00a0<code>value<\/code>\u00a0of the payment, in <a href=\"\/pt\/development-resources\/currency-codes\">minor units<\/a>. This is used to filter the list of available payment methods to your shopper.<\/td>\n<\/tr>\n<tr>\n<td> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/sessions#request-shopperInteraction\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">shopperInteraction<\/a><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>Set to <strong>Moto<\/strong>. This indicates that this is a MOTO payment.<\/td>\n<\/tr>\n<tr>\n<td><code>allowedPaymentMethods<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>Set to <strong>scheme<\/strong>. This indicates that this is a card payment.<\/td>\n<\/tr>\n<tr>\n<td><code>merchantAccount<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>Your merchant account name.<\/td>\n<\/tr>\n<tr>\n<td><code>reference<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>Your unique reference for the payment. Minimum length: three characters.<\/td>\n<\/tr>\n<tr>\n<td><code>returnUrl<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>URL where your user should be taken back to, in case of a redirection. Format: <br> - Maximum of 1024 characters <br> - Must include the protocol: <code>http:\/\/<\/code> or <code>https:\/\/<\/code>. <br> You can also include your own additional query parameters like the order reference number.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The following example shows how to create a session for a payment of <strong>10<\/strong> EUR.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example \/sessions request for a MOTO payment'\" :id=\"'moto-sessions'\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v71\\\/sessions \\\\\\n-H 'x-api-key: ADYEN_API_KEY' \\\\\\n-H \\&quot;idempotency-key: YOUR_IDEMPOTENCY_KEY\\&quot; \\\\\\n-H 'content-type: application\\\/json' \\\\\\n-d '{\\n  \\&quot;amount\\&quot;: {\\n      \\&quot;value\\&quot;: 1000,\\n      \\&quot;currency\\&quot;: \\&quot;EUR\\&quot;\\n  },\\n  \\&quot;shopperInteraction\\&quot;: \\&quot;MOTO\\&quot;,\\n  \\&quot;allowedPaymentMethods\\&quot;:\\&quot;scheme\\&quot;,\\n  \\&quot;merchantAccount\\&quot;: \\&quot;ADYEN_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;returnUrl\\&quot;: \\&quot;https:\\\/\\\/your-company.example.com\\\/motoUI?motoOrder=12xy..\\&quot;,\\n  \\&quot;reference\\&quot;: \\&quot;YOUR_PAYMENT_REFERENCE\\&quot;\\n}'&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>The response contains:<\/p>\n<ul>\n<li><code>sessionData<\/code>: the payment session data you need to pass to your front end.<\/li>\n<li><code>id<\/code>: a unique identifier for the session data.<\/li>\n<li>The request body.<\/li>\n<\/ul>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example HTTP 201 \/sessions response'\" :id=\"'sessions-response'\" :code-data='[{\"language\":\"json\",\"tabTitle\":\"\",\"content\":\"{\\n    \\\"amount\\\": {\\n        \\\"currency\\\": \\\"EUR\\\",\\n        \\\"value\\\": 1000\\n    },\\n    \\\"countryCode\\\": \\\"NL\\\",\\n    \\\"expiresAt\\\": \\\"2024-08-24T13:35:16+02:00\\\",\\n    \\\"id\\\": \\\"CSD9CAC34EBAE225DD\\\",\\n    \\\"merchantAccount\\\": \\\"YOUR_MERCHANT_ACCOUNT\\\",\\n    \\\"reference\\\": \\\"YOUR_PAYMENT_REFERENCE\\\",\\n    \\\"returnUrl\\\": \\\"https:\\\/\\\/your-company.example.com\\\/motoUI?motoOrder=12xy..\\\",\\n    \\\"sessionData\\\": \\\"Ab02b4c..\\\"\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>If you do not get an HTTP 201 response, use the <code>errorCode<\/code> field and the list of <a href=\"\/pt\/development-resources\/error-codes\">API error codes<\/a> to troubleshoot.<\/p>\n<h2>Prepare your front end<\/h2>\n<p>Use Drop-in to show the payment form in your UI, where you enter the shopper's payment details.<\/p>\n<h3 id=\"install-adyen-web\">Install Adyen Web<\/h3>\n<p>Use the Adyen Web npm package, or embed the Adyen Web script and stylesheet into your HTML file:<\/p>\n\n<div id=\"tab1Slao\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;npm (recommended)&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Install the &lt;a href=\\&quot;https:\\\/\\\/www.npmjs.com\\\/package\\\/@adyen\\\/adyen-web\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Adyen Web Node package&lt;\\\/a&gt;:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;bash\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;npm install @adyen\\\\\\\/adyen-web --save\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;p&gt;Import Adyen Web with the resources for card payments into your application.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;import { AdyenCheckout, Card } from &#039;@adyen\\\\\\\/adyen-web&#039;;\\\\nimport &#039;@adyen\\\\\\\/adyen-web\\\\\\\/styles\\\\\\\/adyen.css&#039;;&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:&quot;npm&quot;,&quot;oldTabId&quot;:&quot;npm_1&quot;,&quot;relation&quot;:&quot;npm&quot;},{&quot;title&quot;:&quot;Embed script and stylesheet&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Use the &lt;code&gt;integrity&lt;\\\/code&gt; attribute so browsers can verify that the script and stylesheet have not been changed unexpectedly.&lt;\\\/p&gt;\\n&lt;p&gt;The value of the &lt;code&gt;integrity&lt;\\\/code&gt; attribute is the &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/web-best-practices#implement-subresource-integrity-hashes\\&quot;&gt;Subresource Integrity (SRI) hash&lt;\\\/a&gt; which Adyen provides for each version of the Adyen Web JavaScript and CSS files.&lt;\\\/p&gt;\\n&lt;p&gt;Get the SRI hashes in the &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/release-notes?integration_type=web\\&quot;&gt;release notes&lt;\\\/a&gt;, under &lt;strong&gt;Updating to this version&lt;\\\/strong&gt;.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;checkout.html&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;html\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;&lt;!-- Embed the Adyen Web script element above any other JavaScript in your checkout page. --&gt;\\\\n&amp;lt;script src=\\\\\\&quot;https:\\\\\\\/\\\\\\\/checkoutshopper-test.cdn.adyen.com\\\\\\\/sdk\\\\\\\/VERSION\\\\\\\/adyen.js\\\\\\&quot;\\\\n   integrity=\\\\\\&quot;JS_INTEGRITY_HASH_FOR_YOUR_VERSION\\\\\\&quot;\\\\n   crossorigin=\\\\\\&quot;anonymous\\\\\\&quot;&amp;gt;&amp;lt;\\\\\\\/script&amp;gt;\\\\n\\\\n&lt;!-- Embed the Adyen Web stylesheet. You can add your own styling by overriding the rules in the CSS file --&gt;\\\\n&amp;lt;link rel=\\\\\\&quot;stylesheet\\\\\\&quot; href=\\\\\\&quot;https:\\\\\\\/\\\\\\\/checkoutshopper-test.cdn.adyen.com\\\\\\\/checkoutshopper\\\\\\\/sdk\\\\\\\/VERSION\\\\\\\/adyen.css\\\\\\&quot;\\\\n    integrity=\\\\\\&quot;CSS_INTEGRITY_HASH_FOR_YOUR_VERSION\\\\\\&quot;\\\\n    crossorigin=\\\\\\&quot;anonymous\\\\\\&quot;&amp;gt;\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:&quot;script&quot;,&quot;oldTabId&quot;:&quot;embed_script_and_stylesheet_1_2&quot;,&quot;relation&quot;:&quot;script&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<p>Drop-in resources are available on the <code>window<\/code> global variable.<\/p>\n<h3 id=\"create-dom-element\">Create a DOM element for Drop-in<\/h3>\n<p>Create a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Document Object Model (DOM)<\/a> container element on your page where you want to render Drop-in. We recommend that you include a descriptive <code>id<\/code>.<\/p>\n<div class=\"notices green\">\n<p>We strongly recommend that you do not put it in an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/iframe\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">iframe element<\/a>, because it may cause issues.<\/p>\n<\/div>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Create a DOM element'\" :id=\"''\" :code-data='[{\"language\":\"html\",\"tabTitle\":\"\",\"content\":\"&lt;div id=\\\"drop-in-container\\\"&gt;&lt;\\\/div&gt;\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.<\/p>\n<h2>Create Drop-in<\/h2>\n<p>Drop-in consists of:<\/p>\n<ul>\n<li><code>AdyenCheckout<\/code>: represents one payment <a href=\"#create-payment-session\">session<\/a>.<\/li>\n<li><code>Dropin<\/code>: represents the interface where a shopper completes their payment.<\/li>\n<\/ul>\n<p>With the <code>AdyenCheckout<\/code> instance, you can create a <code>Dropin<\/code> instance.<\/p>\n<h3 id=\"configure\">Create your instance of AdyenCheckout<\/h3>\n<p>Create a global configuration object that you use to create the instance of <code>AdyenCheckout<\/code>. The object contains configuration parameters and event handlers.<\/p>\n<ol>\n<li>\n<p>Add configuration parameters.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Parameter name<\/th>\n<th style=\"text-align: center;\">Required<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><code>session<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>The payment session object from your call to <code>\/sessions<\/code>. Contains a <code>session.id<\/code> and <code>session.sessionData<\/code>.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><code>environment<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>Use <strong>test<\/strong>. When you are ready to accept live payments, change the value to one of our <a href=\"#test-and-go-live\">live environments<\/a>.\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><code>amount<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>An object representing the amount to be displayed on the <strong>Pay<\/strong> Button. Its properties are <code>value<\/code> (the amount in the currencies smallest unit, for example cents for EUR) and <code>currency<\/code>.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><code>countryCode<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>The shopper's country code.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><code>locale<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>The language used in the  UI. For possible values, see the <a href=\"https:\/\/github.com\/Adyen\/adyen-web\/tree\/main\/packages\/server\/translations\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">list of available languages<\/a>. <br> By default, this is the either the <code>shopperLocale<\/code> from your <code>\/sessions<\/code> request or, if this locale is not available on , <strong>en-US<\/strong>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li>\n<p>Add event handlers, to handle events that get triggered during the payment.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Event handler name<\/th>\n<th style=\"text-align: center;\">Required<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><code>onPaymentCompleted(result, component)<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>Create an event handler, called when the payment is completed.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><code>onPaymentFailed(result, component)<\/code><\/td>\n<td style=\"text-align: center;\"><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>Create an event handler, called when the payment failed. A failed payment has result code <strong>Cancelled<\/strong>, <strong>Error<\/strong> or <strong>Refused<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><code>onError(error)<\/code><\/td>\n<td style=\"text-align: center;\"><\/td>\n<td>Create an event handler, called when an error occurs in .<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span id=\"handle-errors\">If an error occurs, the <code>onError<\/code> event returns an object which contains details about the error:<\/span><\/p>\n<table>\n<thead>\n<tr>\n<th>Error field<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>error.name<\/code><\/td>\n<td>The type of error. Use the values it returns to configure localized error messages for your shoppers: <ul> <li markdown=\"1\"><strong>NETWORK_ERROR<\/strong>: a call that  made to the server has failed, for example because of a timeout, or if there is missing information in the request. Ask the shopper to try again.<\/li> <li markdown=\"1\"><strong>CANCEL<\/strong>: the shopper cancelled the payment. Only applies for payment methods that allow explicit cancellation in the UI, for example Apple Pay or PayPal.<\/li> <li markdown=\"1\"><strong>IMPLEMENTATION_ERROR<\/strong>: the method or parameter is incorrect or not supported.<\/li> <li markdown=\"1\"><strong>ERROR<\/strong>: generic catch-all error. Tell the shopper something went wrong and ask them to try paying again, maybe with a different payment method.<\/li> <\/ul><\/td>\n<\/tr>\n<tr>\n<td><code>error.message<\/code><\/td>\n<td>Gives more information for each type of error. The message is technical so you shouldn't show it to your shoppers. <br> For <code>error.name<\/code>: <strong>NETWORK_ERROR<\/strong>, the information in the <code>message<\/code> field depends on the environment: <ul> <li markdown=\"1\"><strong>test<\/strong>: you get a message with a <a href=\"\/pt\/development-resources\/error-codes#generic-error-codes\">generic error code<\/a> to help you troubleshoot.<\/li> <li markdown=\"1\"><strong>live<\/strong>: the message from the response.<\/li> <\/ul><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The <code>error<\/code> object may contain additional fields inherited from the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Error\/Error\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\"><code>Error()<\/code> constructor<\/a>.<\/p>\n<p>Combine the configuration parameters and event handlers into your global configuration object.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Create a global configuration object'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;const globalConfiguration = {\\n  session: {\\n    id: 'CSD9CAC34EBAE225DD', \\\/\\\/ Unique identifier for the payment session.\\n    sessionData: 'Ab02b4c...' \\\/\\\/ The payment session data.\\n  },\\n  environment: 'test', \\\/\\\/ Change to 'live' for the live environment.\\n  amount: {\\n    value: 1000,\\n    currency: 'EUR'\\n  },\\n  locale: 'nl-NL',\\n  countryCode: 'NL',\\n  clientKey: 'test_870be2...', \\\/\\\/ Public key used for client-side authentication: https:\\\/\\\/docs.adyen.com\\\/development-resources\\\/client-side-authentication\\n  onPaymentCompleted: (result, component) =&gt; {\\n    console.info(result, component);\\n  },\\n  onPaymentFailed: (result, component) =&gt; {\\n    console.info(result, component);\\n  },\\n  onError: (error, component) =&gt; {\\n    console.error(error.name, error.message, error.stack, component);\\n  }\\n};&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>Use this global configuration object to create an instance of <code>AdyenCheckout<\/code>.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Create an instance of AdyenCheckout'\" :id=\"''\" :code-data='[{\"language\":\"javascript\",\"tabTitle\":\"\",\"content\":\"\\\/\\\/ All of the resources that you imported are properties of the window.\\nconst { AdyenCheckout, Card} = window.AdyenWeb;\\n\\nconst checkout = await AdyenCheckout(globalConfiguration);\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n<h3 id=\"create-instance\">Create your instance of Drop-in<\/h3>\n<ol>\n<li>\n<p>Create another configuration object for Drop-in including the following configuration:<\/p>\n<table>\n<thead>\n<tr>\n<th>Parameter name<\/th>\n<th>Required<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>paymentMethodComponents<\/code><\/td>\n<td><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td><strong>[Card]<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>paymentMethodsConfiguration.card.hideCVC<\/code><\/td>\n<td><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td><strong>false<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Drop-in configuration (when importing individual payment methods)'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"const dropinConfiguration = {\\n   paymentMethodComponents: [Card],\\n   paymentMethodsConfiguration: {\\n     card: {\\n       hideCVC: false\\n     }\\n   }\\n};\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>Create an instance of Drop-in, passing the <a href=\"#configure\">instance of <code>AdyenCheckout<\/code><\/a> and the Drop-in configuration object that you created.<\/p>\n<\/li>\n<li>\n<p>Mount the Drop-in to the <a href=\"#create-dom-element\">DOM element you created<\/a>.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Create an instance of Drop-in'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;const dropin = new Dropin(checkout, dropinConfiguration).mount('#dropin');&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n<p>Drop-in shows the payment form where your user enters the shopper's payment details.<\/p>\n<h2>Get the outcome<\/h2>\n<p>After your user submits the payment, you must wait for a webhook.<\/p>\n<p>You get the outcome of each payment asynchronously, in an <strong>AUTHORISATION<\/strong> <a href=\"\/pt\/development-resources\/webhooks\">webhook<\/a>. Use the <code>merchantReference<\/code> from the webhook to match it to your order reference.<br \/>\nFor a successful payment, the event contains <code>success<\/code>: <strong>true<\/strong>.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example webhook for a successful payment'\" :id=\"''\" :code-data='[{\"language\":\"json\",\"tabTitle\":\"\",\"content\":\"{\\n  \\\"live\\\": \\\"false\\\",\\n  \\\"notificationItems\\\":[\\n    {\\n      \\\"NotificationRequestItem\\\":{\\n        \\\"eventCode\\\":\\\"AUTHORISATION\\\",\\n        \\\"merchantAccountCode\\\":\\\"YOUR_MERCHANT_ACCOUNT\\\",\\n        \\\"reason\\\":\\\"033899:1111:03\\\/2030\\\",\\n        \\\"amount\\\":{\\n          \\\"currency\\\":\\\"EUR\\\",\\n          \\\"value\\\":2500\\n        },\\n        \\\"operations\\\":[\\\"CANCEL\\\",\\\"CAPTURE\\\",\\\"REFUND\\\"],\\n        \\\"success\\\":\\\"true\\\",\\n        \\\"paymentMethod\\\":\\\"mc\\\",\\n        \\\"additionalData\\\":{\\n          \\\"expiryDate\\\":\\\"03\\\/2030\\\",\\n          \\\"authCode\\\":\\\"033899\\\",\\n          \\\"cardBin\\\":\\\"411111\\\",\\n          \\\"cardSummary\\\":\\\"1111\\\",\\n          \\\"checkoutSessionId\\\":\\\"CSF46729982237A879\\\"\\n        },\\n        \\\"merchantReference\\\":\\\"YOUR_REFERENCE\\\",\\n        \\\"pspReference\\\":\\\"NC6HT9CRT65ZGN82\\\",\\n        \\\"eventDate\\\":\\\"2024-08-13T14:10:22+02:00\\\"\\n      }\\n    }\\n  ]\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>For an unsuccessful payment, you get <code>success<\/code>: <strong>false<\/strong>, and the <code>reason<\/code> field has details about why the payment was unsuccessful.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example webhook for an unsuccessful payment'\" :id=\"''\" :code-data='[{\"language\":\"json\",\"tabTitle\":\"\",\"content\":\"{\\n  \\\"live\\\": \\\"false\\\",\\n  \\\"notificationItems\\\":[\\n    {\\n      \\\"NotificationRequestItem\\\":{\\n        \\\"eventCode\\\":\\\"AUTHORISATION\\\",\\n        \\\"merchantAccountCode\\\":\\\"YOUR_MERCHANT_ACCOUNT\\\",\\n        \\\"reason\\\":\\\"validation 101 Invalid card number\\\",\\n        \\\"amount\\\":{\\n          \\\"currency\\\":\\\"EUR\\\",\\n          \\\"value\\\":2500\\n        },\\n        \\\"success\\\":\\\"false\\\",\\n        \\\"paymentMethod\\\":\\\"unknowncard\\\",\\n        \\\"additionalData\\\":{\\n          \\\"expiryDate\\\":\\\"03\\\/2030\\\",\\n          \\\"cardBin\\\":\\\"411111\\\",\\n          \\\"cardSummary\\\":\\\"1112\\\",\\n          \\\"checkoutSessionId\\\":\\\"861631540104159H\\\"\\n        },\\n        \\\"merchantReference\\\":\\\"YOUR_REFERENCE\\\",\\n        \\\"pspReference\\\":\\\"KHQC5N7G84BLNK43\\\",\\n        \\\"eventDate\\\":\\\"2024-08-13T14:14:05+02:00\\\"\\n      }\\n    }\\n  ]\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2 id=\"test-and-go-live\">Test and go live<\/h2>\n<p>Before going live, use our list of <a href=\"\/pt\/development-resources\/test-cards-and-credentials\/test-card-numbers\">test cards<\/a> to test your integration.<\/p>\n<p>You can check the status of a test payment in your\u00a0<a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>, under <strong>Transactions<\/strong> &gt;\u00a0<strong>Payments<\/strong>.<\/p>\n<p>To debug or troubleshoot test payments, you can also use <a href=\"\/pt\/development-resources\/logs-resources\/api-logs\">API logs<\/a> in your test environment.<\/p>\n<p>When you are ready to go live, you need to:<\/p>\n<ol>\n<li><a href=\"\/pt\/online-payments\/go-live-checklist\">Configure your live account<\/a>.\u00a0<\/li>\n<li>Reach out to your Adyen contact to get the Self Assessment Questionnaire C-VT (SAQ C-VT) form for PCI DSS compliance.<\/li>\n<li>Submit your filled-out Self Assessment Questionnaire C-VT (SAQ C-VT) form.<\/li>\n<li>Switch from test to our <a href=\"\/pt\/development-resources\/live-endpoints#checkout-endpoints\">live endpoints<\/a>.<\/li>\n<li>\n<p>Load Drop-in from one of our live environments and set the <code>environment<\/code> to match your live endpoints:<\/p>\n<table>\n<thead>\n<tr>\n<th>Endpoint region<\/th>\n<th>Value<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Europe (EU) live<\/td>\n<td><strong>live<\/strong><\/td>\n<\/tr>\n<tr>\n<td>United States (US) live<\/td>\n<td><strong>live-us<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Australia (AU) live<\/td>\n<td><strong>live-au<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Asia Pacific &amp; Southeast (APSE) live<\/td>\n<td><strong>live-apse<\/strong><\/td>\n<\/tr>\n<tr>\n<td>India (IN) live<\/td>\n<td><strong>live-in<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ol>\n<h2>See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/online-payments\/build-your-integration\/sessions-flow\/?platform=Web&amp;integration=Drop-in\"\n                        target=\"_self\"\n                        >\n                    Sessions flow Web Drop-in integration guide\n                <\/a><\/li><li><a href=\"\/development-resources\/webhooks\"\n                        target=\"_self\"\n                        >\n                    Webhooks\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/unified-commerce\/mail-order-telephone-order\/api-request","articleFields":{"description":"Make API requests to make Mail Order\/Telephone Order (MOTO) payments.","feedback_component":true,"filters_component":false,"page_id":"5ea6f4c8-ae76-40bf-b99a-7ebbb2c7e6d8","decision_tree":"[]"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/unified-commerce\/mail-order-telephone-order\/api-request","title":"MOTO payments through API","content":"You can make an API request to initiate a MOTO payment and use Web Drop-in to enter the shopper's payment details in your UI.\nFor example: when a shopper calls your call center, your user (for example, an agent in your call center) enters the shopper's card details in the Drop-in payment form and submits the payment.\nRequirements\n\n\n\nRequirement\nDescription\n\n\n\n\nSetup steps\nBefore you begin: Get your API key.\n\n\nAPI credential roles\nMake sure that you have the following roles Merchant PAL webservice roleCheckout webservice roleCheckout encrypted cardholder data\n\n\nWebhooks\nSubscribe to the following webhook: Standard webhook\n\n\n\nHow it works\nUse the Checkout API to initiate a payment session and enter the shopper's payment details in the Drop-in payment form.\n\nYour shopper contacts you to initiate a MOTO payment.\nYour user (for example, an agent in your call center) goes to your UI for MOTO payments.\nYour user enters the payment amount and other required information in your UI.\nYour UI application passes the payment amount and other required information to your server.\nYour server makes an API request to create a payment session.\nYour UI application creates an instance of Drop-in using the session data from the server.\nDrop-in shows the payment form.\nYour user enters the shopper's payment details in the payment form and submits the payment.\nYour webhook server receives the webhook containing the payment outcome.\n\n\n  \n\nCreate a session\nCreate the payment session resource that includes payment amount information.\nTo create a payment session, make a  \/sessions request, including:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\n amount\n\nThe\u00a0currency\u00a0and\u00a0value\u00a0of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.\n\n\n shopperInteraction\n\nSet to Moto. This indicates that this is a MOTO payment.\n\n\nallowedPaymentMethods\n\nSet to scheme. This indicates that this is a card payment.\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\nreference\n\nYour unique reference for the payment. Minimum length: three characters.\n\n\nreturnUrl\n\nURL where your user should be taken back to, in case of a redirection. Format:  - Maximum of 1024 characters  - Must include the protocol: http:\/\/ or https:\/\/.  You can also include your own additional query parameters like the order reference number.\n\n\n\nThe following example shows how to create a session for a payment of 10 EUR.\n\n    \n\nThe response contains:\n\nsessionData: the payment session data you need to pass to your front end.\nid: a unique identifier for the session data.\nThe request body.\n\n\n    \n\nIf you do not get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.\nPrepare your front end\nUse Drop-in to show the payment form in your UI, where you enter the shopper's payment details.\nInstall Adyen Web\nUse the Adyen Web npm package, or embed the Adyen Web script and stylesheet into your HTML file:\n\n\n    \n        \n        \n    \n\n\nDrop-in resources are available on the window global variable.\nCreate a DOM element for Drop-in\nCreate a Document Object Model (DOM) container element on your page where you want to render Drop-in. We recommend that you include a descriptive id.\n\nWe strongly recommend that you do not put it in an iframe element, because it may cause issues.\n\n\n    \n\nIf you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.\nCreate Drop-in\nDrop-in consists of:\n\nAdyenCheckout: represents one payment session.\nDropin: represents the interface where a shopper completes their payment.\n\nWith the AdyenCheckout instance, you can create a Dropin instance.\nCreate your instance of AdyenCheckout\nCreate a global configuration object that you use to create the instance of AdyenCheckout. The object contains configuration parameters and event handlers.\n\n\nAdd configuration parameters.\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nsession\n\nThe payment session object from your call to \/sessions. Contains a session.id and session.sessionData.\n\n\nenvironment\n\nUse test. When you are ready to accept live payments, change the value to one of our live environments.\u00a0\n\n\namount\n\nAn object representing the amount to be displayed on the Pay Button. Its properties are value (the amount in the currencies smallest unit, for example cents for EUR) and currency.\n\n\ncountryCode\n\nThe shopper's country code.\n\n\nlocale\n\nThe language used in the  UI. For possible values, see the list of available languages.  By default, this is the either the shopperLocale from your \/sessions request or, if this locale is not available on , en-US.\n\n\n\n\n\nAdd event handlers, to handle events that get triggered during the payment.\n\n\n\nEvent handler name\nRequired\nDescription\n\n\n\n\nonPaymentCompleted(result, component)\n\nCreate an event handler, called when the payment is completed.\n\n\nonPaymentFailed(result, component)\n\nCreate an event handler, called when the payment failed. A failed payment has result code Cancelled, Error or Refused.\n\n\nonError(error)\n\nCreate an event handler, called when an error occurs in .\n\n\n\nIf an error occurs, the onError event returns an object which contains details about the error:\n\n\n\nError field\nDescription\n\n\n\n\nerror.name\nThe type of error. Use the values it returns to configure localized error messages for your shoppers:  NETWORK_ERROR: a call that  made to the server has failed, for example because of a timeout, or if there is missing information in the request. Ask the shopper to try again. CANCEL: the shopper cancelled the payment. Only applies for payment methods that allow explicit cancellation in the UI, for example Apple Pay or PayPal. IMPLEMENTATION_ERROR: the method or parameter is incorrect or not supported. ERROR: generic catch-all error. Tell the shopper something went wrong and ask them to try paying again, maybe with a different payment method. \n\n\nerror.message\nGives more information for each type of error. The message is technical so you shouldn't show it to your shoppers.  For error.name: NETWORK_ERROR, the information in the message field depends on the environment:  test: you get a message with a generic error code to help you troubleshoot. live: the message from the response. \n\n\n\nThe error object may contain additional fields inherited from the Error() constructor.\nCombine the configuration parameters and event handlers into your global configuration object.\n\n\n\n\n\nUse this global configuration object to create an instance of AdyenCheckout.\n\n\n\n\n\nCreate your instance of Drop-in\n\n\nCreate another configuration object for Drop-in including the following configuration:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\npaymentMethodComponents\n\n[Card]\n\n\npaymentMethodsConfiguration.card.hideCVC\n\nfalse\n\n\n\n\n\n\n\n\nCreate an instance of Drop-in, passing the instance of AdyenCheckout and the Drop-in configuration object that you created.\n\n\nMount the Drop-in to the DOM element you created.\n\n\n\n\n\nDrop-in shows the payment form where your user enters the shopper's payment details.\nGet the outcome\nAfter your user submits the payment, you must wait for a webhook.\nYou get the outcome of each payment asynchronously, in an AUTHORISATION webhook. Use the merchantReference from the webhook to match it to your order reference.\nFor a successful payment, the event contains success: true.\n\n    \n\nFor an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.\n\n    \n\nTest and go live\nBefore going live, use our list of test cards to test your integration.\nYou can check the status of a test payment in your\u00a0Customer Area, under Transactions &gt;\u00a0Payments.\nTo debug or troubleshoot test payments, you can also use API logs in your test environment.\nWhen you are ready to go live, you need to:\n\nConfigure your live account.\u00a0\nReach out to your Adyen contact to get the Self Assessment Questionnaire C-VT (SAQ C-VT) form for PCI DSS compliance.\nSubmit your filled-out Self Assessment Questionnaire C-VT (SAQ C-VT) form.\nSwitch from test to our live endpoints.\n\nLoad Drop-in from one of our live environments and set the environment to match your live endpoints:\n\n\n\nEndpoint region\nValue\n\n\n\n\nEurope (EU) live\nlive\n\n\nUnited States (US) live\nlive-us\n\n\nAustralia (AU) live\nlive-au\n\n\nAsia Pacific &amp; Southeast (APSE) live\nlive-apse\n\n\nIndia (IN) live\nlive-in\n\n\n\n\n\nSee also\n\n\n                    Sessions flow Web Drop-in integration guide\n                \n                    Webhooks\n                \n","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Omnichannel","lvl2":"Mail Order\/Telephone Order (MOTO) payments","lvl3":"MOTO payments through API"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/unified-commerce","lvl2":"https:\/\/docs.adyen.com\/pt\/unified-commerce\/mail-order-telephone-order","lvl3":"\/pt\/unified-commerce\/mail-order-telephone-order\/api-request"},"levels":4,"category":"Omnichannel","category_color":"green","tags":["payments","through"]},"articleFiles":{"moto-drop-in.svg":"<img style=\"width: 800px;\" alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/06.unified-commerce\/09.mail-order-telephone-order\/01.api-request\/moto-drop-in.svg\" \/>","sessions-response.json":"<p alt=\"\">sessions-response.json<\/p>"}}