Is it possible to hide zip code on the Stripe payment bar using the Ngx Stripe Library for Angular Applications? https://ngx-stripe.dev/docs/installation

I have tried creating the component in the controller via mount: https://ngx-stripe.dev/docs/manually-mount-your-element. And adding hidePostalCode:true:

cardOptions: StripeCardElementOptions = {
    hidePostalCode: true
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        fontWeight: '300',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '18px',
        '::placeholder': {
          color: '#CFD7E0'
        }
      }
    }
  };

I've also tried creating the element directly in the html and passing the options in as an Input:

<ngx-stripe-card [options]="cardOptions" [elementsOptions]="elementsOptions">
                                    </ngx-stripe-card>

Neither work. This still shows the zip code as I type into the payment bar. Is this possible?

CodePudding user response：

Issue must be somewhere else, in your code, please cross check with this working sample code.

html

<div >
  <div >
    <div  [formGroup]="paymentForm">
      <div >
        <label>Name</label>
        <input  type="text" formControlName="name">
      </div>
      <div >
        <ngx-stripe-card
          [options]="cardOptions"
          (on)="onChange($event)"
          [elementsOptions]="elementsOptions"
        ></ngx-stripe-card>
      </div>
      <button 
        
        (click)="buy()" 
        [disabled]="!validForm"
      >CLICK</button>
    </div>
  </div>
</div>

ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {
  StripeService,
  ElementOptions,
  ElementsOptions,
  StripeCardComponent,
} from 'ngx-stripe';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  paymentForm: FormGroup;
  stripeCardValid: boolean = false;
  @ViewChild(StripeCardComponent) card: StripeCardComponent;

  cardOptions: ElementOptions = {
    hidePostalCode: true,
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        fontWeight: 300,
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '18px',
        '::placeholder': {
          color: '#CFD7E0',
        },
      },
    },
  };

  get validForm() {
    return this.paymentForm.valid && this.stripeCardValid;
  }

  elementsOptions: ElementsOptions = {
    locale: 'es',
  };

  constructor(private fb: FormBuilder, private stripeService: StripeService) {}

  ngOnInit() {
    this.paymentForm = this.fb.group({
      name: ['', [Validators.required]],
    });
  }

  onChange({ type, event }) {
    if (type === 'change') {
      this.stripeCardValid = event.complete;
    }
  }

  buy() {
    this.stripeService
      .createToken(this.card.getCard(), { name: this.paymentForm.value.name })
      .subscribe((result) => {
        if (result.token) {
          console.log(result.token);
        } else if (result.error) {
          console.log(result.error.message);
        }
      });
  }
}

stackblitz

CodePudding user response：

Your code looks OK to me, hidePostalCode is a valid param in StripeCardElementOptions.

It looks like a bug to me. Since ngx-stripe is not an official library maintained by Stripe, you should reach out to the developer community and ask for help.