How to hide country dropdown in <ngx-stripe-payment> element?

[pixpixpox]

I will collect and handle the user's billing address separately. Is there any way to hide the country field, so that user does not have to put the same value for two times.

[richnologies]

Hi @pixpixpox,

Yes, you can hide the country field. You need to pass an options object to the component like the one below. You're telling the Payment Element not to collect the address information using fields. Here is a link to the API Reference: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-customized_fields-fields

options: Partial<StripePaymentElementOptions> = {
  fields: {
    billingDetails: {
      address: 'never',
    },
  },
};

However, if you do this, then you need to pass the full address information in the confirm params when you confirm the payment.

this.stripeService
      .confirmPayment({
        elements: this.paymentElement.elements,
        confirmParams: {
          payment_method_data: {
            billing_details: {
              name: this.checkoutForm.get('name').value,
              email: this.checkoutForm.get('email').value,
              address: {
                line1: this.checkoutForm.get('address').value,
                line2: '',
                postal_code: this.checkoutForm.get('zipcode').value,
                city: this.checkoutForm.get('city').value,
                state: 'Pontevedra',
                country: 'ES',
              },
            },
          },
        },
        redirect: 'if_required',
      })

Here is a full Stackblitz example: https://stackblitz.com/edit/ngx-stripe-issue-181?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Let me know if this helps you. If you need anything else just let me know

Kind regards

R