Sv1751

[normal ibex]

Sorry I don't really follow your sentence. Could you rephrase?

[stuck breach]

We use Payment Elements JS to collect the payment data. In the Payment Element there are address collection fields (Country + Postal code if required) to process the payment. We have same fields (Country + Postal code if required) on our side, not in the Stripe Payment Element. In case user fill the values of those fields on our side we hide the same fields in the Payment Element. We tried just pass 'never' for Country as it said in the Stripe docs but it this case the Postal code is also not shown. It works if only we pass default value for Country. Is it possible to manage the Postal code without passing default country?

[normal ibex]

Hmm if you already have (Country + Postal code) on your side, why wouldn't you just completely hide the (Country + Postal code) on PaymentElement?

[stuck breach]

On the way we also observed interesting behavior: for example, we pass default country = GB (Country is hidden in the Stripe element in this case), but postal code is required and it is shown in the element. We start type the value in the field but don't pull the request yet. After that we update the default country to Albania (Country still not shown) and postal code is not required for our this country but it is still shown in the element like it is in the cash already. Looks like a bug.

[stuck breach]

Because sometimes we don't have postal code in the logic of our fields but it is required in Stripe.

We use our own tax fields for address collection and for UK postal code is not needed for tax calculation, but Stripe requires postal code for UK to process the payment.

So, we need to hide the country, but show the postal code in Stripe Payment Element

[normal ibex]

I see, and when you update the Element, pass country = never, postalCode= auto, the Postal Code is hidden

[stuck breach]

Correct

[torpid venture]

Hi @stuck breach I'm taking over this thread.

[stuck breach]

Hi, @torpid venture !

[torpid venture]

I believe orakaro has already answered your question, let me know if there're any other follow-up questions.

[stuck breach]

No, we tried to do what he suggested and it didn't work)

The default country is required to hide the postal code

[torpid venture]

Can you share the code?

[stuck breach]

We have video for this behavior as well

And you can see that we pass country = never, postalCode= auto and the postal is still there

[torpid venture]

Can you share me the code?

[stuck breach]

Wait please

[torpid venture]

Ok, so what didn't work, is the country still showing?

[stuck breach]

Here is the better view - country does not require postal code but it is still there

[torpid venture]

I don't see country in the payment element,

I saw a country at the top of the page, but is it from stripe elements?

[stuck breach]

No, this is our field for our own tax calculation service

That's the reason why we need to hide the same field in the Stripe element

[torpid venture]

I'm still trying to understand you. The country field is already hidden in stripe payment element.

So what else do you want to hide?

[stuck breach]

Yes, country is hidden. But we pass postal code 'auto' expecting that by passing the default country postal code in Stripe element will be rather hidden if it's not required for default country or shown if it is required. But if you take a look at the screenshot we pass Albania as a default country, postal code is not required for Albania and not shown in the element in case we pass 'auto' for both country and postal code. In our case it is still there.

[torpid venture]

I don't understand what you mean.

[stuck breach]

We pass country = never, postalCode= auto.
We define the country in our own field and see that the country is GB, so we pass GB as a default country in Stripe element. In this case the Postal code is shown because it is required for GB on the Stripe side. After that user starts fill the Postal code in Stripe element. We don't complete paymentintent yet. User decides to change the default country and change it in our field to Albania (the country that does not require postal code). We update the default value to Albania in Stripe element. We expect that the postal code will be hidden because Albania does not require postal code in Stripe side too. But the postal code is still shown and required.

Here are the examples for the cases when we pass both country and postal code = 'auto'. The default Stripe element behavior. For GB postal is required, for Albania - not

That's the config for default

We don't understand why the logic to show or not postal code is different for default and customized cases

[torpid venture]

Thanks for the clarificaiton, let me see if I can reproduce the problem.

[stuck breach]

Thank you! I'm waiting

You can check the video one more time - the logic is there

[torpid venture]

Ok, I'm able to reproduce the problem, looks like calling paymentElement.update() doesn't refresh the payment element.

Are you using react?

[stuck breach]

No, angular

[torpid venture]

I see. I have a solution for react.

So what I did is create a state variable

    address: {
      country: 'GB'
    }
  })

[stuck breach]

We use angular 1.2.22

[torpid venture]

And pass the billingDetails state variblae to payment element

        id="payment-element"
        options={{
          defaultValues: {
            billingDetails: billingDetails
          },

And I can call

            address: {
              country: 'BG'
            }
          })

to update the billingDetails, and this change is reflected in payment-element.

I'm not familiar with angular, but I think you can achieve something similar.

[stuck breach]

Please, wait 2-5 mins we will check whether this solution works with angular or not

This solution not working with angular((

[torpid venture]

Does angular have state variable?

[stuck breach]

Creation of the new object doesn't help

[torpid venture]

Or is there a way to refresh a component when its dependent variable changes?

[stuck breach]

As it is said in the docs it is initialized straight in the div

We did everything according to the Stripe docs

That's why we don't understand what to do else

and what do we do incorrect

We use paymentElement.mount('#stripe-payment-elements') for component initialization (<div id="stripe-payment-elements"></div>). That's the code snippet how we refresh the component

this.initStripeElements = (clientSecret, user) => {
const defer = $q.defer();
this.initStripe();

const appearance = getStripeAppearance();
elements = stripe.elements({appearance, clientSecret});

let userModel = null;
if (user) {
userModel = user;
} else {
userModel = TPParam.config ? TPParam.config.user || TPParam.user : TPParam.user;
}
const fullName = [userModel.firstName, userModel.lastName].filter(i=> !!i).join(' ');
const defaultOptions = {
defaultValues: {
billingDetails: {
name: fullName ? fullName: userModel.displayName,
email: userModel.email,
address: {

}
},
email: userModel.email
},
fields: {
billingDetails: {
address: {
"line1": "auto",
"line2": "auto",
"postalCode": "auto",
"state": "auto",
"city": "auto",
"country": "auto"
}
},
},
wallets: {
applePay: 'never',
googlePay: googlePayEnabled ? 'auto' : 'never',
}
};

configurablePaymentOptions = getStripeCreateOptions();
prefillAddressIfRequired();

paymentOptions = merge(defaultOptions, configurablePaymentOptions);
// https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options
paymentElement = elements.create('payment', paymentOptions);
// "wallets" is required only for "elements.create('payment', paymentOptions)"
// if pass it into "confirmSetup" or any other methods
// it will lead to errors
delete paymentOptions.wallets;

paymentElement.mount('#stripe-payment-elements');

paymentElement.off('loaderror');
paymentElement.off('ready');
paymentElement.off('change');

paymentElement.on('ready', () => {
isLoaded = true;
defer.resolve();
});

paymentElement.on('loaderror', (event) => {
isLoaded = false;
defer.reject(event);
})

paymentElement.on('change', (event) => {
currentPaymentType = event.value.type;
ngEventService.fire('EVENT_STRIPE_PAYMENT_METHOD_CHANGE', currentPaymentType);
});

return defer.promise;
};

[torpid venture]

If you can't find a way to use state variable in your angular application. I'd suggest you to reach out to Stripe support https://support.stripe.com/contact/email and report this problem. They will escalate it to the relevant team.

[stuck breach]

Ok, We'll do it