Skip to main content

Cofidis 4xcard

You can start accepting Cofidis installment payments on the Web using Hosted Payment Page or Cofidis Component. No additional configuration is required to use Cofidis 4xcard in Hosted Payment Page.

Our Cofidis Component renders Cofidis button to your payment page. When a customer selects "Pay with Cofidis", the component presents a Cofidis overlay, where the customer could see commercial conditions, legal information and continue to the Cofidis payment page .


We also provide a Cofidis Widget that dynamically calculates the conditions for a loan based on the given price.


Check our guide how to add it to your cart or product page.

caution

If you are using Cofidis payment method it is mandatory to put view details link or Cofidis Widget to your cart or product page.

Before you begin​

This page explains how to add Cofidis to your custom payment page. If you don't need a custom checkout experience we recommend using our prebuilt payment page. It already supports all available payment methods and does not require coding.

Before you start, you need to make sure that you have Cofidis enabled in MONEI Dashboard → Settings → Payment Methods.

Unfortunately Cofidis does not provide test environment

Integration​

1. Create a Payment Server-side​

Create a Payment on your server with an amount and currency. Always decide how much to charge on the server side, a trusted environment, as opposed to the client. This prevents malicious customers from being able to choose their own prices.

POST https://api.monei.com/v1/payments
curl --request POST 'https://api.monei.com/v1/payments' \
--header 'Authorization: pk_test_3c140607778e1217f56ccb8b50540e00' \
--header 'Content-Type: application/json' \
--data-raw '{
  "amount": 110,
  "currency": "EUR",
  "orderId": "14379133960355",
  "description": "Test Shop - #14379133960355",
  "customer": {
    "email": "john.doe@microapps.com"
   },
  "completeUrl": "https://example.com/receipt",
  "cancelUrl": "https://example.com/checkout",
  "callbackUrl": "https://example.com/checkout/callback"
}'

The following parameters are required:

  • amount positive integer - Amount intended to be collected by this payment. A positive integer representing how much to charge in the smallest currency unit (e.g., 100 cents to charge 1.00 USD)
  • currency string - Three-letter ISO currency code, in uppercase. Must be a supported currency.
  • orderId string - An order ID from your system. A unique identifier that can be used to reconcile the payment with your internal system.
  • callbackUrl string - The URL to which a payment result should be sent asynchronously.
  • completeUrl string - A customer will be redirected to this url when the payment is complete (successful or failed).
  • cancelUrl string - A customer is redirected to this url if he cancels the payment (clicks "Go back")

Check all available request parameters.

Included in the returned Payment object is a payment id, which is used on the client side to securely complete the payment process instead of passing the entire Payment object.

2. Add Cofidis to your payment page Client-side​

Include monei.js on your checkout page by adding the script tag to the head of your HTML file.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.monei.com/v2/monei.js"></script>
</head>

Add MONEI Cofidis Component to your payment page. Create empty DOM node (container) with unique ID in your payment form.

checkout.html
<div id="cofidis_container">
  <!-- A MONEI Cofidis Component will be inserted here. -->
</div>

Initialize Cofidis Component

client.js
// Create an instance of the Cofidis component.
const cofidis = monei.Cofidis({
  paymentId: '{{payment_id}}',
  onSubmit(result) {
    // Redirect the customer to the Cofidis payment page
    window.location.assign(result.redirectUrl);
  },
  onError(error) {
    console.log(error);
  }
});

// Render an instance of the cofidis component into the `cofidis_container` <div>.
cofidis.render('#cofidis_container');
note

Cofidis Component is also available as a React and Vue component. Check out our examples.

Check the MONEI JS Reference for more options.

3. Check the payment status Server-side​

After the payment is completed the customer is redirected to the completeUrl with payment_id query parameter, you can obtain the status of the payment by calling get payment endpoint.

4. An asynchronous request is sent to your server.​

MONEI will notify you about the payment status by sending an HTTP POST request to the callbackUrl. The request body will contain full payment object in JSON format.

This ensures that you get the payment status even when customer closed the browser window or lost internet connection.

The request also contains a MONEI-Signature header. Verify this signature to confirm that received request is sent from MONEI.

To acknowledge receipt of the request, your endpoint must return a 200 HTTP status code to MONEI. All other response codes, including 3xx codes, indicate to MONEI that you did not receive the event.

If MONEI does not receive a 200 HTTP status code, the notification attempt is repeated. After multiple failures to send the notification over multiple days, MONEI marks the request as failed and stops trying to send it to your endpoint.

Before you go live​