Closed imuchene closed 10 months ago
Hey @imuchene, thanks for reaching out with such a detail explanation. It helps a lot.
You can already do what you ask. Here is an example where I have a Payment element with an accordion layout:
The layout is part of the element options. You can pass it as parameter:
<ngx-stripe-payment
[options]="options"
[appearance]="appearance"
[clientSecret]="elementsOptions?.clientSecret"
></ngx-stripe-payment>
options: StripePaymentElementOptions = {
layout: {
type: 'accordion',
},
};
You a lot of options to fine tune the look and feel. Check the documentation: https://stripe.com/docs/payments/customize-payment-element#layouts
As for the error you're getting, I might be wrong, but this block of code does not look good to me. You shouldn't have to create the element yourself. The library does it for you and is capable to adapt to any changes in your options for example. Here is the component source code: https://github.com/richnologies/ngx-stripe/blob/main/projects/ngx-stripe/src/lib/components/payment-element.component.ts
What I think is happening here is that the library is creating one payment element and you're trying to create a second one and that is not allowed on the same elements object. (or maybe you create the first one and then the library tries to create the second, it doesn't matter)
ngAfterViewChecked(): void {
this.stripePaymentElement.elements?.create('payment', this.paymentElementOptions);
}
Let me know if this helps
Kind regards
R
Hello @richnologies ,
Thanks for the quick response. I was able to adapt the Stackblitz sample you provided, and to successfully change the layout of the payment elements as shown in the screenshot below:
You're right that I was doing something wrong by re-creating the payment element a second time. This was my fault, as I was trying various things to make the layout change, but couldn't quite figure it out. The only thing pending would be to add a note to the documentation about the options parameter in the ngx-stripe-payment
component. I would gladly assist in the task, if it hasn't been done already.
Hey @imuchene, by all means. Here is the docs page link: https://github.com/richnologies/ngx-stripe/blob/main/projects/ngx-stripe-docs/src/app/docs/payment-element/payment-element.component.ts
The format is a bit rudimentary, but on the bright side is easy to understand. Feel free to open a PR with what would have help you. We can review it and merge it.
Really appreciate the help
Regards
R
When using the payment element without a custom payment form, the default layout rendered is the tabs layout. I'd kindly request that support be added for different layouts such as the accordion layout. When I try to modify the layout currently I get the following error in the browser console:
My payment element component:
My payment element component:
The payment class:
I'm using angular material as my responsive CSS framework.