richnologies / ngx-stripe

Angular 6+ wrapper for StripeJS
MIT License
217 stars 77 forks source link

[QUESTION] Can't hide postal code, name, and email with ng-stripe-payment component #221

Open bschmitz9 opened 1 year ago

bschmitz9 commented 1 year ago

Describe the bug Using the ngx-stripe-payment component there appears to be no way to hide the postal code for card and us_bank_account payments. And then no way to hide the name and email fields when making a payment via a bank account. I see the documentation in Stripe where you can provide billing details and specify fields to never show. But there is no way I can see to pass that into the component here. What am I missing?

The Stripe docs specify fields.billingDetails to be on the options but there I am getting typescript errors when I try to add to any of the Stripe interfaces.

<ngx-stripe-payment
              [appearance]="appearance"
              [clientSecret]="paymentElementOptions.clientSecret"
             ```how do I remove the above inputs with options?```
              [options]="options">
 </ngx-stripe-payment>

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior Postal Code, Name, and Email should be hidden at all times if I specify something like:.

billingDetails: {
      name: 'never',
      email: 'never',
      address: {
          postalCode: 'never'
    }
}

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

richnologies commented 1 year ago

Hi @bschmitz9,

Here is a stackblitz example where I use the fields property to hide the country. I'm from Spain and here postalCode is hidden by default, but basically is the same syntax for other properties.

Here is the interface

export type FieldOption = 'auto' | 'never';

export interface FieldsOption {
  billingDetails?:
    | FieldOption
    | {
        name?: FieldOption;
        email?: FieldOption;
        phone?: FieldOption;
        address?:
          | FieldOption
          | {
              country?: FieldOption;
              postalCode?: FieldOption;
              state?: FieldOption;
              city?: FieldOption;
              line1?: FieldOption;
              line2?: FieldOption;
            };
      };
}

On your other question: how do I remove the above inputs with options?

You don't. In Stripe you have to entities. The elements group and the element you're using, in this case, the payment element. The above options belong to the elements entity, not to the payment element and this is why you can't pass them directly.

Please, let me know if this helps you. If you have further questions, please don't forget to share which versions of Angular, ngx-stripe and @stripe/stripe-js you're using

Regards

R

bschmitz9 commented 1 year ago

@richnologies thanks for the response. So are you saying it's not possible to remove the email, name, and zip code using ngx-stripe? Or can you please provide an example of removing those inputs using the component I mentioned above? Not sure how to use entities and ngx-stripe to remove them. Thanks!