Payment-method icon

Titres-Restaurant Component

Add Titres-Restaurant payments to an existing Components integration.

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.
The minimum required version is 5.4.0.
Setup steps Before you begin:
  • Activate Titres-Restaurant to get your Carte de domiciliation CONECS.
  • Contact our Support Team to enable the meal voucher payment method, providing your SIRET (your business registration ID) and the Conecs MID from your Carte de domiciliation CONECS.

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:

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:

Copy code
 <div id="mealVoucher_FR_sodexo-container"></div>

Step 2: Create an instance of the Component

Select your integration:

Supported in Components v5.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
Expand view
Copy link to code block
Copy code
Copy code
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
Expand view
Copy link to code block
Copy code
Copy code
{
"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).
Copy code
mealVoucherConfiguration.type = 'mealVoucher_FR_sodexo';
const mealVoucher = new Redirect(checkout, mealVoucherConfiguration);

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:

Copy code
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:

Copy code
mealVoucherComponent
.isAvailable()
.then(() => {
mealVoucherComponent.mount("#mealVoucher_FR_sodexo-container");
})
.catch(e => {
//Titres-Restaurant is not available
});

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 to activate Titres-Restaurant in your live environment.

See also