{"title":"Titres-restaurant Component","category":"default","creationDate":1776961628,"content":"<p>This page explains how to add Titres-Restaurant to your existing Web Components integration.<\/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>Integration type<\/strong><\/td>\n<td style=\"text-align: left;\"> Make sure that you have built your <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Components\">Web Components integration<\/a>.   <br> The minimum required version is 5.4.0. <\/td>\n<\/tr>\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\/payment-methods\/titres-restaurant#activate\">Activate Titres-Restaurant<\/a> to get your <em>Carte de domiciliation CONECS<\/em>.<\/li><li markdown=\"1\"><a href=\"\/pt\/payment-methods\/add-payment-methods\">Add the meal voucher payment method in your Customer Area<\/a>, providing your SIRET (your business registration ID) and the Conecs MID from your <em>Carte de domiciliation CONECS<\/em>.<\/li><\/ul><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Import resources for v6<\/h2>\n<p>If you are using Web Components v6, <a href=\"\/pt\/online-payments\/build-your-integration\/?platform=Web&amp;integration=Drop-in&amp;version=6.0.0\">import the Component<\/a> that you need for Titres-Restaurant:<\/p>\n<pre><code class=\"language-js\">import { AdyenCheckout, MealVoucherFR } from '@adyen\/adyen-web'<\/code><\/pre>\n<h2>API reference<\/h2>\n<p>You do not need to send additional fields for Titres-Restaurant. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:<\/p>\n<ul>\n<li> <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>&#58; This is the default with <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Components\">Components v5.0.0<\/a> or later.<\/li>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a>&#58; If you implemented an <a href=\"\/pt\/online-payments\/build-your-integration\">additional use case<\/a>.<\/li>\n<\/ul>\n<h2>Component configuration<\/h2>\n<p>When creating an instance of the Component, specify which meal voucher issuer you want to use:<\/p>\n<ul>\n<li><span translate=\"no\"><strong>mealVoucher_FR_natixis<\/strong><\/span> for Bimpli.<\/li>\n<li><span translate=\"no\"><strong>mealVoucher_FR_sodexo<\/strong><\/span> for Sodexo.<\/li>\n<li><span translate=\"no\"><strong>mealVoucher_FR_groupeup<\/strong><\/span> for Up Dejeuner.<\/li>\n<\/ul>\n<div class=\"notices green\">\n<p><strong>Apetiz<\/strong> and <strong>mealVoucher_FR_natixis<\/strong> refer to Bimpli, the commercial brand for Natixis.<\/p>\n<\/div>\n<h3>Step 1: Create a DOM element<\/h3>\n<p>Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:<\/p>\n<pre><code class=\"language-html\"> &lt;div id=\"mealVoucher_FR_sodexo-container\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<h3>Step 2: Create an instance of the Component<\/h3>\n<p>Select your integration:<\/p>\n\n<div id=\"tabg9jbC\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;&lt;code&gt;\\\/sessions&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Supported in &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/release-notes#releaseNote=2022-07-12-web-componentsdrop-in-5.18.0\\&quot;&gt;Components v5.18.0&lt;\\\/a&gt; and later.&lt;\\\/p&gt;\\n&lt;h3&gt;Required configuration&lt;\\\/h3&gt;\\n&lt;p&gt;Add the following event to your payment method configuration object:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Event name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onOrderCreated(orderStatus)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the balance on the card is less than the transaction amount. Returns an &lt;code&gt;orderStatus&lt;\\\/code&gt; object that includes the remaining amount to be paid. &lt;br&gt; Use your existing instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; to create components for payment methods that the shopper can use to pay the remaining amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The following example shows how to configure the Titres-Restaurant Component to allow the shopper to pay the remaining amount using a credit or debit card.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Component configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;json&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const mealVoucherConfiguration = {\\\\n    onOrderCreated: function (orderStatus) {\\\\n        \\\\\\\/\\\\\\\/ Get the remaining amount to be paid from orderStatus.\\\\n        console.log(orderStatus.remainingAmount);\\\\n        \\\\\\\/\\\\\\\/ Use your existing instance of AdyenCheckout to create payment methods components\\\\n        \\\\\\\/\\\\\\\/ The shopper can use these payment methods to pay the remaining amount\\\\n        const cardComponent = checkout.create(&#039;card&#039;).mount(&#039;#card-container&#039;);\\\\n        \\\\\\\/\\\\\\\/ Add other payment method components that you want to show to the shopper\\\\n    }\\\\n};&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&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example orderStatus object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;amount\\\\\\&quot;: {\\\\n        \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n        \\\\\\&quot;value\\\\\\&quot;: 3200\\\\n    },\\\\n    \\\\\\&quot;expiresAt\\\\\\&quot;: \\\\\\&quot;2023-07-12T10:17:19.00Z\\\\\\&quot;,\\\\n    \\\\\\&quot;orderData\\\\\\&quot;: \\\\\\&quot;Ab02b4c0!B...\\\\\\&quot;,\\\\n    \\\\\\&quot;pspReference\\\\\\&quot;: \\\\\\&quot;G34Q5SC8N5PFWR82\\\\\\&quot;,\\\\n    \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;ABC123\\\\\\&quot;,\\\\n    \\\\\\&quot;remainingAmount\\\\\\&quot;: {\\\\n        \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n        \\\\\\&quot;value\\\\\\&quot;: 700\\\\n    }\\\\n}\\&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;h4&gt;v6.0.0 or later&lt;\\\/h4&gt;\\n&lt;p&gt;Create an instance of the Component, passing:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;The payment method-specific configuration (&lt;code&gt;mealVoucherConfiguration&lt;\\\/code&gt;).&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const mealVoucherComponent = new MealVoucherFR(checkout, mealVoucherConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#v5-x-x-or-earlier\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;v5.x.x or earlier&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Use the &lt;code&gt;create&lt;\\\/code&gt; method of your &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; instance, in this case &lt;code&gt;checkout&lt;\\\/code&gt;, to create an instance of the Component. Pass the configuration object that you created above:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const mealVoucherComponent = checkout.create(&#039;mealVoucher_FR_sodexo&#039;, mealVoucherConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h3&gt;Step 3: Mount the Component&lt;\\\/h3&gt;\\n&lt;p&gt;Mount the Component only after checking that Titres-Restaurant is available to the shopper:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-json\\&quot;&gt;mealVoucherComponent\\n   .isAvailable()\\n   .then(() =&amp;gt; {\\n       mealVoucherComponent.mount(\\&quot;#mealVoucher_FR_sodexo-container\\&quot;);\\n   })\\n   .catch(e =&amp;gt; {\\n       \\\/\\\/Titres-Restaurant is not available\\n   });&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&quot;,&quot;altTitle&quot;:&quot;sessions&quot;,&quot;oldTabId&quot;:&quot;config-sessions_1&quot;,&quot;relation&quot;:&quot;sessions&quot;},{&quot;title&quot;:&quot;&lt;code&gt;\\\/sessions&lt;\\\/code&gt; with your own &lt;b&gt;Pay&lt;\\\/b&gt; button&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Supported in &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/release-notes#releaseNote=2022-08-08-web-componentsdrop-in-5.21.0\\&quot;&gt;Components v5.21.0&lt;\\\/a&gt; and later.&lt;\\\/p&gt;\\n&lt;h3&gt;Required configuration&lt;\\\/h3&gt;\\n&lt;p&gt;When using your own &lt;strong&gt;Pay&lt;\\\/strong&gt; button, you must call the &lt;code&gt;balanceCheck()&lt;\\\/code&gt; method from your button implementation. If the balance on the card is enough to pay the full payment amount, call the &lt;code&gt;submit()&lt;\\\/code&gt; method to make the payment.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Method name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;balanceCheck()&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Checks whether the balance on the card is enough to pay the full payment amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;submit()&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Makes a payment after the &lt;code&gt;onRequiringConfirmation&lt;\\\/code&gt; event has been called.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;To know if the balance on the card is enough to pay the full payment amount, add the following events to the payment method configuration object:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Event name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onOrderCreated(orderStatus)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the balance on the card is less than the transaction amount. Returns an &lt;code&gt;orderStatus&lt;\\\/code&gt; object that includes the remaining amount to be paid. &lt;br&gt; Use your existing instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; to create components for payment methods that the shopper can use to pay the remaining amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onRequiringConfirmation&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the balance on the card is enough to pay the full payment amount. The shopper must then confirm that they want to make the payment with the card.  &lt;br&gt; Use the &lt;code&gt;submit()&lt;\\\/code&gt; method to make the payment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The following example shows how to configure the Titres-Restaurant Component to allow the shopper to pay the remaining amount using a credit or debit card.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Gift card configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;json&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const mealVoucherConfiguration = {\\\\n    onOrderCreated: function (orderStatus) {\\\\n        \\\\\\\/\\\\\\\/ Get the remaining amount to be paid from orderStatus.\\\\n        console.log(orderStatus.remainingAmount);\\\\n        \\\\\\\/\\\\\\\/ Use your existing instance of AdyenCheckout to create payment methods components\\\\n        \\\\\\\/\\\\\\\/ The shopper can use these payment methods to pay the remaining amount\\\\n        const cardComponent = checkout.create(&#039;card&#039;).mount(&#039;#card-container&#039;);\\\\n        \\\\\\\/\\\\\\\/ Add other payment method components that you want to show to the shopper\\\\n    }\\\\n    onRequiringConfirmation: function() {\\\\n       document.querySelector(&#039;#button-to-confirm&#039;)\\\\n           .addEventListener(&#039;click&#039;, () =&amp;gt; window.mealVoucher_FR_sodexo.submit());\\\\n   }\\\\n};&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&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example orderStatus object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;amount\\\\\\&quot;: {\\\\n        \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n        \\\\\\&quot;value\\\\\\&quot;: 3200\\\\n    },\\\\n    \\\\\\&quot;expiresAt\\\\\\&quot;: \\\\\\&quot;2022-07-12T10:17:19.00Z\\\\\\&quot;,\\\\n    \\\\\\&quot;orderData\\\\\\&quot;: \\\\\\&quot;Ab02b4c0!B...\\\\\\&quot;,\\\\n    \\\\\\&quot;pspReference\\\\\\&quot;: \\\\\\&quot;G34Q5SC8N5PFWR82\\\\\\&quot;,\\\\n    \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;ABC123\\\\\\&quot;,\\\\n    \\\\\\&quot;remainingAmount\\\\\\&quot;: {\\\\n        \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n        \\\\\\&quot;value\\\\\\&quot;: 700\\\\n    }\\\\n}\\&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;h4&gt;v6.0.0 or later&lt;\\\/h4&gt;\\n&lt;p&gt;Create an instance of the Component, passing:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Optionally, the payment method-specific configuration.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const mealVoucherComponent = new MealVoucherFR(checkout, mealVoucherConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#v5-x-x-or-earlier\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;v5.x.x or earlier&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Use the &lt;code&gt;create&lt;\\\/code&gt; method of your &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; instance, in this case &lt;code&gt;checkout&lt;\\\/code&gt;, to create the Component. Pass the configuration object if you created one:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const mealVoucherComponent = checkout.create(&#039;mealVoucher_FR_sodexo&#039;, mealVoucherConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h3&gt;Step 3: Mount the Component&lt;\\\/h3&gt;\\n&lt;p&gt;Mount the Component only after checking that the payment method is available to the shopper:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Gift card configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;json&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;mealVoucherComponent\\\\n    .isAvailable()\\\\n    .then(() =&amp;gt; {\\\\n        mealVoucherComponent.mount(\\\\&amp;quot;#mealVoucher_FR_sodexo-container\\\\&amp;quot;);\\\\n    })\\\\n    .catch(e =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/Titres-Restaurant is not available\\\\n    });\\\\n\\\\ndocument.querySelector(&#039;#button-to-verify&#039;).addEventListener(&#039;click&#039;,  () =&amp;gt; window.mealVoucher_FR_sodexo.balanceCheck());&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;sessions-custom&quot;,&quot;oldTabId&quot;:&quot;config-sessions_2&quot;,&quot;relation&quot;:&quot;sessions-custom&quot;},{&quot;title&quot;:&quot;&lt;code&gt;\\\/payments&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;If you implemented an &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\&quot;&gt;additional use case&lt;\\\/a&gt;, or integrated Components before &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/release-notes#releaseNote=2022-07-12-web-componentsdrop-in-5.18.0\\&quot;&gt;v5.18.0&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;h3&gt;Required configuration&lt;\\\/h3&gt;\\n&lt;p&gt;Add the following event to your Titres-Restaurant configuration object:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Event name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onBalanceCheck(resolve, reject, data)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the shopper pays with Titres-Restaurant. Make a  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/paymentMethods\\\/balance\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/paymentMethods\\\/balance&lt;\\\/a&gt; request.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;h3&gt;(Optional) Accepting partial payments&lt;\\\/h3&gt;\\n&lt;p&gt;If you want to accept &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/partial-payments\\&quot;&gt;partial payments&lt;\\\/a&gt;, you can configure the Titres-Restaurant Component to &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/partial-payments#create-an-order\\&quot;&gt;create an order&lt;\\\/a&gt; or &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/partial-payments#cancel-order\\&quot;&gt;cancel an order&lt;\\\/a&gt;. After an order is created, you must &lt;a href=\\&quot;#making-partial-payments\\&quot;&gt;make partial payments&lt;\\\/a&gt; outside of the Component.&lt;\\\/p&gt;\\n&lt;p&gt;To configure the Component to create and cancel orders, add the following events to your Titres-Restaurant configuration object:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Event name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;a id=\\&quot;on-order-request\\&quot;&gt;&lt;\\\/a&gt;&lt;code&gt;onOrderRequest(resolve, reject, data)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the balance on the crad is less than the transaction amount. Make an  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/orders\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/orders&lt;\\\/a&gt; request with the &lt;code&gt;amount&lt;\\\/code&gt; of the total transaction amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onOrderCancel(order)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the shopper cancels the transaction. Make an &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/#\\\/CheckoutService\\\/latest\\\/post\\\/orders\\\/cancel\\&quot; class=\\&quot;codeLabel external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;orders\\\/cancel&lt;\\\/a&gt; request.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The following example shows how to configure the Titres-Restaurant Component:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Gift card configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const mealVoucherConfiguration = {\\\\n    onBalanceCheck: function (resolve, reject, data) {\\\\n        \\\\\\\/\\\\\\\/ Make a POST \\\\\\\/paymentMethods\\\\\\\/balance request\\\\n        resolve(BalanceResponse);\\\\n    }\\\\n    onOrderRequest: function (resolve, reject, data) {\\\\n        \\\\\\\/\\\\\\\/ Make a POST \\\\\\\/orders request\\\\n        \\\\\\\/\\\\\\\/ Create an order for the total transaction amount\\\\n        resolve(OrderResponse);\\\\n    }\\\\n    onOrderCancel: function(Order) {\\\\n        \\\\\\\/\\\\\\\/ Make a POST \\\\\\\/orders\\\\\\\/cancel request\\\\n        \\\\\\\/\\\\\\\/ Call the update function and pass the payment methods response to update the instance of checkout\\\\n        checkout.update(paymentMethodsResponse, amount);\\\\n    }\\\\n};\\&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;h4&gt;v6.0.0 or later&lt;\\\/h4&gt;\\n&lt;p&gt;Create an instance of the Component, passing:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;The payment method-specific configuration (&lt;code&gt;mealVoucherConfiguration&lt;\\\/code&gt;).&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const mealVoucherComponent = new MealVoucherFR(checkout, mealVoucherConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#v5-x-x-or-earlier\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;v5.x.x or earlier&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Use the &lt;code&gt;create&lt;\\\/code&gt; method of your &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; instance, in this case &lt;code&gt;checkout&lt;\\\/code&gt;, to create an instance of the Component. Pass the configuration object that you created above:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const mealVoucherComponent = checkout.create(&#039;mealVoucher_FR_sodexo&#039;, mealVoucherConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h3&gt;Step 3: Mount the Component&lt;\\\/h3&gt;\\n&lt;p&gt;Mount the Component only after checking that Titres-Restaurant is available to the shopper:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;mealVoucherComponent\\n   .isAvailable()\\n   .then(() =&amp;gt; {\\n       mealVoucherComponent.mount(\\&quot;#mealVoucher_FR_sodexo-container\\&quot;);\\n   })\\n   .catch(e =&amp;gt; {\\n       \\\/\\\/Titres-Restaurant is not available\\n   });&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;h3 id=\\&quot;making-partial-payments\\&quot;&gt;(Optional) Making partial payments&lt;\\\/h3&gt;\\n&lt;p&gt;When balance of the shopper&#039;s gift card is less than the payment amount, no payment is made. Instead, the &lt;a href=\\&quot;#on-order-request\\&quot;&gt;\\n  &lt;code&gt;onOrderRequest&lt;\\\/code&gt;\\n&lt;\\\/a&gt; event creates an order for the full payment amount. After the order is created, you can start making partial payments:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;The response to the &lt;code&gt;onOrderRequest&lt;\\\/code&gt; event includes the following fields that you need for payment:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Field&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;pspReference&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The unique reference for the order.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;orderData&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The details needed to make payments for the order.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;remainingAmount&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The full payment amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Example order object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  \\\\\\&quot;pspReference\\\\\\&quot;: \\\\\\&quot;MLSPNCQ8HXSKGK82\\\\\\&quot;,\\\\n  \\\\\\&quot;resultCode\\\\\\&quot;: \\\\\\&quot;Success\\\\\\&quot;,\\\\n  \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;YOUR_ORDER_REFERENCE\\\\\\&quot;,\\\\n  \\\\\\&quot;remainingAmount\\\\\\&quot;: {\\\\n    \\\\\\&quot;value\\\\\\&quot;: 250,\\\\n    \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;\\\\n     },\\\\n  \\\\\\&quot;expiresAt\\\\\\&quot;: \\\\\\&quot;2022-01-01T14:21:00\\\\\\&quot;,\\\\n  \\\\\\&quot;orderData\\\\\\&quot;: \\\\\\&quot;823fh892f8f18f4...148f13f9f3f\\\\\\&quot;\\\\n}\\&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;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Use the values from the Component and the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/payments&lt;\\\/a&gt; endpoint to &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/partial-payments#make-a-payment\\&quot;&gt;make partial payments&lt;\\\/a&gt; and complete the order outside of the Component.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;advanced&quot;,&quot;oldTabId&quot;:&quot;config-payments_3&quot;,&quot;relation&quot;:&quot;advanced&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2 id=\"test-and-go-live\">Test and go live<\/h2>\n<p>To test Titres-restaurant payments, you must get test credentials directly from the meal voucher issuer (Bimpli, Sodexo, or Up D\u00e9jeuner).<\/p>\n<p><\/p>\n<p>Before you can accept live payments, you must contact our <a href=\"https:\/\/ca-test.adyen.com\/ca\/ca\/contactUs\/support.shtml?form=other\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Support Team<\/a> to activate Titres-restaurant in your live environment.<\/p>\n<h2 id=\"see-also\">See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/online-payments\/components-web\"\n                        target=\"_self\"\n                        >\n                    Web Components integration guide\n                <\/a><\/li><li><a href=\"\/development-resources\/webhooks\"\n                        target=\"_self\"\n                        >\n                    Webhooks\n                <\/a><\/li><li><a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/overview\"\n                        target=\"_blank\"\n                         class=\"external\">\n                    API Explorer\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/titres-restaurant\/web-component","articleFields":{"description":"Add Titres-restaurant payments to an existing Components integration.","feedback_component":true,"parameters":{"integration":"Components","platform":"Web","integration_guide_url":"build-your-integration\/sessions-flow?platform=Web&integration=Components","component_name":"the Titres-Restaurant Component","component_name_capitalized":"The Component","payment_method":"Titres-Restaurant","payment_method_type":"mealVoucher_FR_sodexo","component_js_const":"mealVoucher","component_class":"MealVoucherFR","add_version":true,"version":"5.4.0"},"status":"current","last_edit_on":"10-05-2022 17:44"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/titres-restaurant\/web-component","title":"Titres-restaurant Component","content":"This page explains how to add Titres-Restaurant to your existing Web Components integration.\nRequirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\n Make sure that you have built your Web Components integration.    The minimum required version is 5.4.0. \n\n\nSetup steps\nBefore you begin: Activate Titres-Restaurant to get your Carte de domiciliation CONECS.Add the meal voucher payment method in your Customer Area, providing your SIRET (your business registration ID) and the Conecs MID from your Carte de domiciliation CONECS.\n\n\n\nImport resources for v6\nIf you are using Web Components v6, import the Component that you need for Titres-Restaurant:\nimport { AdyenCheckout, MealVoucherFR } from '@adyen\/adyen-web'\nAPI reference\nYou do not need to send additional fields for Titres-Restaurant. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:\n\n \/sessions&#58; This is the default with Components v5.0.0 or later.\n \/payments&#58; If you implemented an additional use case.\n\nComponent configuration\nWhen creating an instance of the Component, specify which meal voucher issuer you want to use:\n\nmealVoucher_FR_natixis for Bimpli.\nmealVoucher_FR_sodexo for Sodexo.\nmealVoucher_FR_groupeup for Up Dejeuner.\n\n\nApetiz and mealVoucher_FR_natixis refer to Bimpli, the commercial brand for Natixis.\n\nStep 1: Create a DOM element\nCreate a DOM element on your checkout page, placing it where you want the payment method form to be rendered:\n &lt;div id=\"mealVoucher_FR_sodexo-container\"&gt;&lt;\/div&gt;\nStep 2: Create an instance of the Component\nSelect your integration:\n\n\n    \n        \n        \n    \n\n\nTest and go live\nTo test Titres-restaurant payments, you must get test credentials directly from the meal voucher issuer (Bimpli, Sodexo, or Up D\u00e9jeuner).\n\nBefore you can accept live payments, you must contact our Support Team to activate Titres-restaurant in your live environment.\nSee also\n\n\n                    Web Components integration guide\n                \n                    Webhooks\n                \n                    API Explorer\n                \n","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Titres-restaurant","lvl3":"Titres-restaurant Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/titres-restaurant","lvl3":"\/pt\/payment-methods\/titres-restaurant\/web-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Titres-restaurant","Component"]}}