Customer detail collection with Express Component

The Express Component lets shoppers pay in a single tap without leaving your page. If you require customer's contact or address information, you can instruct Mollie to collect this. Information that will be collected from the express payment method will be available when your customer has completed the payment.

Collecting customer details

Declare which contact and address fields you need by adding requiredCustomerDetails to your Checkout Session. The Express Component takes care of collecting them from the shopper during the payment flow. After payment, the details are available on the Checkout Session and the resulting Payment object.

Indicate fields you want to collect

You can collect the following details by passing these values to the requiredCustomerDetails property when you create a Checkout Session.

curl -X POST https://api.mollie.com/v2/sessions \
  -H "Authorization: Bearer live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "amount": { "currency": "EUR", "value": "10.00" },
    "description": "Order #12345",
    "lines": [ "..." ],
    "redirectUrl": "https://example.org/order/12345/result",
    "requiredCustomerDetails": ["email", "shipping-address", "billing-address"]
  }'

Reading collected details

After the payment is completed, retrieve the Session or Payment to access the data.

{
  "billingAddress": {
    "givenName": "Jan",
    "familyName": "de Vries",
    "email": "[email protected]",
    "streetAndNumber": "Keizersgracht 126",
    "city": "Amsterdam",
    "region": "Noord-Holland",
    "postalCode": "1015 CW",
    "country": "NL"
  },
  "shippingAddress": {
    "givenName": "Jan",
    "familyName": "de Vries",
    "streetAndNumber": "Keizersgracht 126",
    "city": "Amsterdam",
    "region": "Noord-Holland",
    "postalCode": "1015 CW",
    "country": "NL"
  }
}

Behaviour for other components

If the requiredCustomerDetails property is set, these properties become required. This means that the Session cannot be completed without this information being available. If the Checkout Session is used in combination with another component than the Express Component, you will have to pass the required details yourself using the submit event handler.

checkout.on('submit', (event) => {
  event.resolve({
    email: form.email || undefined,
    shippingAddress: form.getShippingAddress() || undefined,
    billingAddress: form.getBillingAddress() || undefined,
  })
})