Using custom forms and other elements

[microft]

I'm trying to use custom elements to design a form. Something derived from what Stripe provides in https://stripe.github.io/elements-examples/

But am struggling to find a way to have multiple elements created with elements.create() register as a single card information object.

Thanks!

[WillPoulson]

I'm having the same issue, did you find a solution?

[microft]

Not so far. What I ended up doing what using the generated form inside my own form. And put all the logic in the buy() method.

[jenkyjeni]

I'm having the same issue,any solution?

[ziXet]

You can use something like this:

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: this.elementStyles
              });
              this.cardNumber.mount('#card-number');
            }
            if (!this.cardExpiry) {
              this.cardExpiry = this.elements.create('cardExpiry', {
                style: this.elementStyles
              });
              this.cardExpiry.mount('#card-expiry');
            }
            if (!this.cardCvc) {
              this.cardCvc = this.elements.create('cardCvc', {
                style: this.elementStyles
              });
              this.cardCvc.mount('#card-cvc');
            }
          });

and then just use the "cardNumber" to create the token.

this.stripeService
          .createToken(this.cardNumber, { name })
          .subscribe(result => {
            if (result.token) {
              // Use the token to create a charge or a customer
              // https://stripe.com/docs/charges
              console.log(result.token.id);
              this.platformService.createCard(result.token.id).subscribe(
                  r => {
                      console.log(r)
                  },
                  error => {
                      console.log(error);
                  }
              );
            } else if (result.error) {
              // Error creating the token
              console.log(result.error.message);
            }
          });
      }

[IARKI]

Use this.cardNumber, stripe will pull data from other Elements you’ve created on the same instance.

[richnologies]

I will close this now due to inactivity. Sorry for this library to be abandon for such a long time. A new version of the library has been published that should address this issue. Please give it a try. If the problem persists, please fell free to open it again. The new commitment of the team is to answer in less than a week.

[snill93]

@ziXet i have error passing cardNumber on createToken. What type should cardNumber be? Do you have a complete example for this snippet?