thedarklod-payment-elements | Stripe Developers | Page 1

slow shard Jan 18, 2022, 7:48 AM

#

Hi there, did you pass a valid clientSecret to the payment elements?

grand shoal Jan 18, 2022, 7:48 AM

#

yes. I confirmed that there are no errors with the clientSecret.

#

In-facct, I can manually set the height of the iframe to (say 200px via the element inspector) and then continue with a successful checkout sessions

#

it's jus that the iframe gets set to 2px in height and I'm not sure what I'm missing

slow shard Jan 18, 2022, 7:50 AM

#

can you share with me the relevant code?

grand shoal Jan 18, 2022, 7:51 AM

#

this is the html part (Angular)

#

        <form [formGroup]="paymentDetailsFormGroup">
          <ng-template matStepLabel>Payment Details</ng-template>

          <ng-container *ngIf="clientSecret !== ''">
            <ngx-stripe-payment [clientSecret]="clientSecret">
            </ngx-stripe-payment>
          </ng-container>
        </form>
        <div>
          <button mat-raised-button (click)="pay()" color="accent">Pay</button>
        </div>

#

and this is the pay() method

#

  pay() {
    this.showLoader('Please wait while process your payment.')
    this.stripe.confirmPayment({
      elements: this.paymentElement.elements,
      confirmParams: {
        payment_method_data: {
          billing_details: {
            name: this.contactDetailsFormGroup.get('name').value
          }
        }
      },
      redirect: 'if_required'
    }).subscribe((result) => {
      if (result.error) {
        console.log(result.error.message);
        this.loader.dismiss();
        this.showAlertMessage(result.error.message);
      } else {
        if (result.paymentIntent.status === 'succeeded') {
          this.loader.dismiss();
          this.stepper.next();
        } else {
          console.log(result);
        }
      }
    });
  }

slow shard Jan 18, 2022, 7:53 AM

#

<ngx-stripe-payment [clientSecret]="clientSecret">
I'm not an angular expert, one question about this line of code, is the "clientSecret" here a variable or a static string literal?

grand shoal Jan 18, 2022, 7:54 AM

#

its a variable which is set from the response to a call to my backend server

slow shard Jan 18, 2022, 7:55 AM

#

which angular library are you using?

grand shoal Jan 18, 2022, 7:55 AM

#

ngx-stripe - https://github.com/richnologies/ngx-stripe

GitHub

GitHub - richnologies/ngx-stripe: Angular 6+ wrapper for StripeJS

Angular 6+ wrapper for StripeJS. Contribute to richnologies/ngx-stripe development by creating an account on GitHub.

#

Found them here

Stripe Partners: Ngx Stripe

Ngx Stripe is a thing wrapper around Stripe.js that provides a more convenient way to interact with Stripe for Angular developers. It provides lazy loading, an observable API and is ready to work with server side rendered Angular applications.

#

This is how it shows up

#

And this is after I manually set the height

#

would you know any property that I might be able to set to set the height of the iframe?

slow shard Jan 18, 2022, 8:05 AM

#

Hmm, you might want to reach out to the developer directly on this issue, the ngx-stripe is a community library and it's not officially supported by Stripe

grand shoal Jan 18, 2022, 8:06 AM

#

I'll do that. But are you aware of any option that I might be able to use to set the height?

slow shard Jan 18, 2022, 8:07 AM

#

The official stripe payment elements doesn't have this option, and the developer shouldn't need to worry about it in my opinion.

grand shoal Jan 18, 2022, 8:08 AM

#

my understanding of the ngx-stripe lib is that it wraps all the styling options that stripe.js offers. So I'm trying to find if there is any styling option that lets you set the height ofthe Payment Element component

#thedarklod-payment-elements