--- title: "Titres-restaurant Component" description: "Add Titres-restaurant payments to an existing Components integration." url: "https://docs.adyen.com/payment-methods/titres-restaurant/web-component" source_url: "https://docs.adyen.com/payment-methods/titres-restaurant/web-component.md" canonical: "https://docs.adyen.com/payment-methods/titres-restaurant/web-component" last_modified: "2022-05-10T17:44:00+02:00" language: "en" --- # Titres-restaurant Component Add Titres-restaurant payments to an existing Components integration. [View source](/payment-methods/titres-restaurant/web-component.md) This page explains how to add Titres-Restaurant to your existing Web Components integration. ## Requirements | Requirement | Description | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Integration type** | Make sure that you have built your [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components). The minimum required version is 5.4.0. | | **Setup steps** | Before you begin:- [Activate Titres-Restaurant](/payment-methods/titres-restaurant#activate) to get your *Carte de domiciliation CONECS*. - [Add the meal voucher payment method in your Customer Area](/payment-methods/add-payment-methods), providing your SIRET (your business registration ID) and the Conecs MID from your *Carte de domiciliation CONECS*. | ## Import resources for v6 If you are using Web Components v6, [import the Component](/online-payments/build-your-integration/?platform=Web\&integration=Drop-in\&version=6.0.0) that you need for Titres-Restaurant: ```js import { AdyenCheckout, MealVoucherFR } from '@adyen/adyen-web' ``` ## API reference 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: * [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions): This is the default with [Components v5.0.0](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components) or later. * [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments): If you implemented an [additional use case](/online-payments/build-your-integration). ## Component configuration When creating an instance of the Component, specify which meal voucher issuer you want to use: * **mealVoucher\_FR\_natixis** for Bimpli. * **mealVoucher\_FR\_sodexo** for Sodexo. * **mealVoucher\_FR\_groupeup** for Up Dejeuner. **Apetiz** and **mealVoucher\_FR\_natixis** refer to Bimpli, the commercial brand for Natixis. ### Step 1: Create a DOM element Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered: ```html
``` ### Step 2: Create an instance of the Component Select your integration: ### Tab: `/sessions` Supported in [Components v5.18.0](/online-payments/release-notes#releaseNote=2022-07-12-web-componentsdrop-in-5.18.0) and later. ### Required configuration Add the following event to your payment method configuration object: | Event name | Description | | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `onOrderCreated(orderStatus)` | Called when the balance on the card is less than the transaction amount. Returns an `orderStatus` object that includes the remaining amount to be paid. Use your existing instance of `AdyenCheckout` to create components for payment methods that the shopper can use to pay the remaining amount. | 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. **Component configuration** ```json const mealVoucherConfiguration = { onOrderCreated: function (orderStatus) { // Get the remaining amount to be paid from orderStatus. console.log(orderStatus.remainingAmount); // Use your existing instance of AdyenCheckout to create payment methods components // The shopper can use these payment methods to pay the remaining amount const cardComponent = checkout.create('card').mount('#card-container'); // Add other payment method components that you want to show to the shopper } }; ``` **Example orderStatus object** ```json { "amount": { "currency": "EUR", "value": 3200 }, "expiresAt": "2023-07-12T10:17:19.00Z", "orderData": "Ab02b4c0!B...", "pspReference": "G34Q5SC8N5PFWR82", "reference": "ABC123", "remainingAmount": { "currency": "EUR", "value": 700 } } ``` #### v6.0.0 or later Create an instance of the Component, passing: * Your instance of `AdyenCheckout`. * The payment method-specific configuration (`mealVoucherConfiguration`). ```js const mealVoucherComponent = new MealVoucherFR(checkout, mealVoucherConfiguration); ``` ** #### v5.x.x or earlier Use the `create` method of your `AdyenCheckout` instance, in this case `checkout`, to create an instance of the Component. Pass the configuration object that you created above: ```js const mealVoucherComponent = checkout.create('mealVoucher_FR_sodexo', mealVoucherConfiguration); ``` ### Step 3: Mount the Component Mount the Component only after checking that Titres-Restaurant is available to the shopper: ```json mealVoucherComponent .isAvailable() .then(() => { mealVoucherComponent.mount("#mealVoucher_FR_sodexo-container"); }) .catch(e => { //Titres-Restaurant is not available }); ``` ### Tab: `/sessions` with your own **Pay** button Supported in [Components v5.21.0](/online-payments/release-notes#releaseNote=2022-08-08-web-componentsdrop-in-5.21.0) and later. ### Required configuration When using your own **Pay** button, you must call the `balanceCheck()` method from your button implementation. If the balance on the card is enough to pay the full payment amount, call the `submit()` method to make the payment. | Method name | Description | | ---------------- | -------------------------------------------------------------------------------- | | `balanceCheck()` | Checks whether the balance on the card is enough to pay the full payment amount. | | `submit()` | Makes a payment after the `onRequiringConfirmation` event has been called. | 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: | Event name | Description | | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `onOrderCreated(orderStatus)` | Called when the balance on the card is less than the transaction amount. Returns an `orderStatus` object that includes the remaining amount to be paid. Use your existing instance of `AdyenCheckout` to create components for payment methods that the shopper can use to pay the remaining amount. | | `onRequiringConfirmation` | 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. Use the `submit()` method to make the payment. | 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. **Gift card configuration** ```json const mealVoucherConfiguration = { onOrderCreated: function (orderStatus) { // Get the remaining amount to be paid from orderStatus. console.log(orderStatus.remainingAmount); // Use your existing instance of AdyenCheckout to create payment methods components // The shopper can use these payment methods to pay the remaining amount const cardComponent = checkout.create('card').mount('#card-container'); // Add other payment method components that you want to show to the shopper } onRequiringConfirmation: function() { document.querySelector('#button-to-confirm') .addEventListener('click', () => window.mealVoucher_FR_sodexo.submit()); } }; ``` **Example orderStatus object** ```json { "amount": { "currency": "EUR", "value": 3200 }, "expiresAt": "2022-07-12T10:17:19.00Z", "orderData": "Ab02b4c0!B...", "pspReference": "G34Q5SC8N5PFWR82", "reference": "ABC123", "remainingAmount": { "currency": "EUR", "value": 700 } } ``` #### v6.0.0 or later Create an instance of the Component, passing: * Your instance of `AdyenCheckout`. * Optionally, the payment method-specific configuration. ```js const mealVoucherComponent = new MealVoucherFR(checkout, mealVoucherConfiguration); ``` ** #### v5.x.x or earlier Use the `create` method of your `AdyenCheckout` instance, in this case `checkout`, to create the Component. Pass the configuration object if you created one: ```js const mealVoucherComponent = checkout.create('mealVoucher_FR_sodexo', mealVoucherConfiguration); ``` ### Step 3: Mount the Component Mount the Component only after checking that the payment method is available to the shopper: **Gift card configuration** ```json mealVoucherComponent .isAvailable() .then(() => { mealVoucherComponent.mount("#mealVoucher_FR_sodexo-container"); }) .catch(e => { //Titres-Restaurant is not available }); document.querySelector('#button-to-verify').addEventListener('click', () => window.mealVoucher_FR_sodexo.balanceCheck()); ``` ### Tab: `/payments` If you implemented an [additional use case](/online-payments/build-your-integration), or integrated Components before [v5.18.0](/online-payments/release-notes#releaseNote=2022-07-12-web-componentsdrop-in-5.18.0). ### Required configuration Add the following event to your Titres-Restaurant configuration object: | Event name | Description | | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `onBalanceCheck(resolve, reject, data)` | Called when the shopper pays with Titres-Restaurant. Make a [/paymentMethods/balance](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods/balance) request. | ### (Optional) Accepting partial payments If you want to accept [partial payments](/online-payments/partial-payments), you can configure the Titres-Restaurant Component to [create an order](/online-payments/partial-payments#create-an-order) or [cancel an order](/online-payments/partial-payments#cancel-order). After an order is created, you must [make partial payments](#making-partial-payments) outside of the Component. To configure the Component to create and cancel orders, add the following events to your Titres-Restaurant configuration object: | Event name | Description | | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | []()`onOrderRequest(resolve, reject, data)` | Called when the balance on the crad is less than the transaction amount. Make an [/orders](https://docs.adyen.com/api-explorer/Checkout/latest/post/orders) request with the `amount` of the total transaction amount. | | `onOrderCancel(order)` | Called when the shopper cancels the transaction. Make an [orders/cancel](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/post/orders/cancel) request. | The following example shows how to configure the Titres-Restaurant Component: **Gift card configuration** ```json const mealVoucherConfiguration = { onBalanceCheck: function (resolve, reject, data) { // Make a POST /paymentMethods/balance request resolve(BalanceResponse); } onOrderRequest: function (resolve, reject, data) { // Make a POST /orders request // Create an order for the total transaction amount resolve(OrderResponse); } onOrderCancel: function(Order) { // Make a POST /orders/cancel request // Call the update function and pass the payment methods response to update the instance of checkout checkout.update(paymentMethodsResponse, amount); } }; ``` #### v6.0.0 or later Create an instance of the Component, passing: * Your instance of `AdyenCheckout`. * The payment method-specific configuration (`mealVoucherConfiguration`). ```js const mealVoucherComponent = new MealVoucherFR(checkout, mealVoucherConfiguration); ``` ** #### v5.x.x or earlier Use the `create` method of your `AdyenCheckout` instance, in this case `checkout`, to create an instance of the Component. Pass the configuration object that you created above: ```js const mealVoucherComponent = checkout.create('mealVoucher_FR_sodexo', mealVoucherConfiguration); ``` ### Step 3: Mount the Component Mount the Component only after checking that Titres-Restaurant is available to the shopper: ```js mealVoucherComponent .isAvailable() .then(() => { mealVoucherComponent.mount("#mealVoucher_FR_sodexo-container"); }) .catch(e => { //Titres-Restaurant is not available }); ``` ### (Optional) Making partial payments When balance of the shopper's gift card is less than the payment amount, no payment is made. Instead, the [`onOrderRequest` ](#on-order-request)event creates an order for the full payment amount. After the order is created, you can start making partial payments: 1. The response to the `onOrderRequest` event includes the following fields that you need for payment: | Field | Description | | ----------------- | -------------------------------------------------- | | `pspReference` | The unique reference for the order. | | `orderData` | The details needed to make payments for the order. | | `remainingAmount` | The full payment amount. | **Example order object** ```json { "pspReference": "MLSPNCQ8HXSKGK82", "resultCode": "Success", "reference": "YOUR_ORDER_REFERENCE", "remainingAmount": { "value": 250, "currency": "EUR" }, "expiresAt": "2022-01-01T14:21:00", "orderData": "823fh892f8f18f4...148f13f9f3f" } ``` 2. Use the values from the Component and the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) endpoint to [make partial payments](/online-payments/partial-payments#make-a-payment) and complete the order outside of the Component. ## Test and go live To test Titres-restaurant payments, you must get test credentials directly from the meal voucher issuer (Bimpli, Sodexo, or Up Déjeuner). Before you can accept live payments, you must contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) to activate Titres-restaurant in your live environment. ## See also * [Web Components integration guide](/online-payments/components-web) * [Webhooks](/development-resources/webhooks) * [API Explorer](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/overview)