createToken does not work with individual elements

[rezmag-wontok]

If I create one card element and pass it onto createToken it works like charm but when I create three individual elements of Card Number, Expiry and Cvc, and pass each to createToken, it fails. The response from the server is:

{ "error": { "code": "parameter_missing", "doc_url": "https://stripe.com/docs/error-codes/parameter-missing", "message": "Missing required param: card[exp_month].", "param": "card[exp_month]", "type": "invalid_request_error" } }

and the request is clearly missing all the values required to create a token:

{ "card": { "name": "Rez Mag", "number": "****4242" }, "guid": "****9f8f573", "muid": "****1c53d81", "sid": "****8853344", "payment_user_agent": "stripe.js/d67f6c85; stripe-js-v3/d67f6c85", "time_on_page": "456225", "referrer": "http://localhost:4200/sign-up", "key": "pk_test_C2****Q1L0" }

and here is my code:

this.stripeService .createToken(this.cardNumber, { name: fullname }) .subscribe(result => { if (result.token) { //success } });

before that I have created three elements and they are showing correctly on the UI:

    this.stripeService.elements(this.elementsOptions)
    .subscribe(elements => {
        this.elements = elements;
        // Only mount the element the first time
        if (!this.cardNumber) {
            this.cardNumber = this.elements.create('cardNumber', {
                style: elementStyles
        });
       this.cardNumber.mount('#card-number');
    }
  });

    this.stripeService.elements(this.elementsOptions)
    .subscribe(elements => {
        this.elements = elements;
        // Only mount the element the first time
        if (!this.cardExpiry) {
            this.cardExpiry = this.elements.create('cardExpiry', {
                style: elementStyles
        });
        this.cardExpiry.mount('#card-expiry');
    }
    });

    this.stripeService.elements(this.elementsOptions)
    .subscribe(elements => {
        this.elements = elements;
        // Only mount the element the first time
        if (!this.cardCvc) {
            this.cardCvc = this.elements.create('cardCvc', {
                style: elementStyles
        });
    this.cardCvc.mount('#card-cvc');
    }
});

[a-antoine]

It works by instanciating only one Elements, and using it create the cardNumber, cardExpiry and cardCvc element fields.