How to add Billing and shipping fields in the stripe gateway by using angular 7

Question

Basically, we are using angular 7 with stripe payment. We have a complete form with all credit card fields like credit card number, credit card expiry and CCV beside all of this, we have some fields for shipping and billing addresses.

Please see the below code, we are creating an element for stripe and then using createtoken() function to generate a token. So, my question is how we can add the billing and shipping fields in this code, so we can send their data to the stripe API? and as a result in API response we can get dynamic data for billing and shipping fields along with generated token

this.stripeService.elements()
      .subscribe(elements => {
        this.elements = elements;
           this.carditem = this.elements.create('cardNumber', {
              style: {
                base: {
                  iconColor: '#c4f0ff',
                  fontSmoothing: 'antialiased',
                  ':focus': {
                    color: 'green',
                  },
                },
                invalid: {
                  iconColor: '#FFC7EE',
                  color: 'red',
                  ':focus': {
                    color: 'brown',
                  },
                  '::placeholder': {
                    color: '#FFCCA5',
                  },
                },
              },
              placeholder: 'Card Number',
           });

          var cvc = this.elements.create('cardCvc', {
            placeholder: 'security code',
          });

          var expiry = elements.create('cardExpiry', {

          });
          var postal = elements.create('postalCode', {
            placeholder: 'Zip/Postal Code',
          });
          this.carditem.mount('#card-number');
          cvc.mount('#card-cvc');
          expiry.mount('#card-expiry');
          postal.mount('#card-postal');

      });
  } 

buy(){

this.stripeService
      .createToken(this.carditem,{name, address_city, address_country})
      .subscribe(result => {
        if (result.token) {
          //result with token
          console.log('result',result.token);


        } else if (result.error) {
          // Error creating the token
          this.error = result.error.message;
          console.log('result',result.error.message);
        }
      });
}

Answer 1

The billing details are associated with the card itself. This means that you would send the information when you create the Token client-side with Elements. This is something that your code is already doing in part by passing the city and the country for example.

You can see an example in jsfiddle here but the code would look like this:

var options = {
  name: 'name',
  address_line1: 'line1',
  address_line2: 'line2',
  address_city: 'city',
  address_state: 'state',
  address_zip: 'zip',
  address_country: 'country',
};
stripe.createToken(card, options).then(setOutcome);

For the shipping address, this is usually associated with a given payment or a given customer. This information is something you'd collect separately in your own form and send to your server to pass it either on the Customer creation or the PaymentIntent creation