Make a payment form in a row

[palmthree-studio]

Hello,

I'm trying to make a payment form in a row, but it seems impossible with Ngx-Stripe.

Here is the code that I find in the official documentation :

// Collapse a Payment Elememt
var paymentElement = elements.getElement('payment');
paymentElement.collapse();

Unfortunately, I didn't find this options in ngx-stripe typings ...

Maybe I've missed something ?

Thanks for your help. 😄

[richnologies]

Hi @positiv-prod,

Thanks for pointing out the pain point. The way ngx-stripe works, the elements instance is created by the Payment Element. You can pass any options you need using the elementsOptions input.

Here is a Stackblitz example you can check: https://stackblitz.com/edit/ngx-stripe-issue-162?file=src%2Fapp%2Fapp.component.ts

Please ignore all the Pluto thing, that is just a way to get a PaymentIntent instance to demo this element. The main idea, we let the PaymentElement to build the elements instance, and then we use the @ViewChild to grab access to the element. It exposes a similar API.

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

import { StripeElementsOptions } from '@stripe/stripe-js';

import { StripePaymentElementComponent } from 'ngx-stripe';

import { PlutoService } from './pluto.service';

@Component({
  selector: 'my-app',
  template: `
  <h1>Payment Element Collapse Example</h1>
  <div [formGroup]="stripeTest">
    <input matInput placeholder="name" formControlName="name" />
    <input placeholder="amount" type="number" formControlName="amount" />
    <ng-container *ngIf="elementsOptions?.clientSecret">
      <ngx-stripe-payment
        [clientSecret]="elementsOptions?.clientSecret"
      ></ngx-stripe-payment>
    </ng-container>
    <button (click)="collapse()">COLLAPSE</button>
  </div>
  `,
})
export class AppComponent implements OnInit {
  @ViewChild(StripePaymentElementComponent)
  paymentElement: StripePaymentElementComponent;

  stripeTest = this.fb.group({
    name: ['Angular v13', [Validators.required]],
    amount: [1309, [Validators.required, Validators.pattern(/\d+/)]],
  });

  elementsOptions: StripeElementsOptions = {
    locale: 'en',
  };

  paying = false;

  constructor(private fb: FormBuilder, private plutoService: PlutoService) {}

  ngOnInit() {
    this.plutoService
      .createPaymentIntent({
        amount: this.stripeTest.get('amount').value,
        currency: 'eur',
      })
      .subscribe((pi) => {
        this.elementsOptions.clientSecret = pi.client_secret;
      });
  }

  collapse() {
    this.paymentElement.collapse();
  }
}

Please let me know if this helps you. Don't hesitate to ask further is you need more help. I would to hear what are you trying to build and if there is anything I can do to help you.

Kind regards

R