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:
|
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: This is the default with Components v5.0.0 or later.
- /payments: If you implemented an additional use case.
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:
<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.
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 } };
{ "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
).
mealVoucherConfiguration.type = 'mealVoucher_FR_sodexo'; const mealVoucher = new Redirect(checkout, mealVoucherConfiguration);
Step 3: Mount the Component
Mount the Component only after checking that Titres-Restaurant is available to the shopper:
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.