hamidhh | Stripe Developers | Page 1

kind oxideBOT May 17, 2023, 8:54 AM

#

sterile orchid May 17, 2023, 8:54 AM

#

Hi there!

#

Which Stripe library are you using?

rocky minnow May 17, 2023, 8:55 AM

#

Hi
Currently I'm using "@stripe/stripe-js": "^1.53.0"

#

Btw if you wish I can share my stripe code with you?
Since there is no official support for Angular I tried to adapt the stripe solution for js based projects

sterile orchid May 17, 2023, 8:56 AM

#

Can you clarify what you are trying to do exactly and what is not working?

rocky minnow May 17, 2023, 9:00 AM

#

Actually, I saw different behaviors when I head to my stripe page, but the last is stuck in the loading phase

#

I just saw the payment form for one time

#

Btw always received error when the below code executed

paymentElement.mount('#payment-element');

sterile orchid May 17, 2023, 9:02 AM

#

What's the error exactly?

rocky minnow May 17, 2023, 9:07 AM

#

#

kind oxideBOT May 17, 2023, 9:14 AM

#

rocky minnow May 17, 2023, 9:17 AM

#

This is my html

  <div id="link-authentication-element">
    <!--Stripe.js injects the Link Authentication Element-->
  </div>
  <div id="payment-element">
    <!--Stripe.js injects the Payment Element-->
  </div>
  <button id="submit" (click)="handleSubmit($event)">
    <div class="spinner hidden" id="spinner"></div>
    <span id="button-text">Pay now</span>
  </button>
  <div id="payment-message" class="hidden"></div>
</form>

<app-spinner *ngIf="isLoading == true"></app-spinner>

lime eagle May 17, 2023, 9:18 AM

#

what is the error when you hover over the mount line with the error?

rocky minnow May 17, 2023, 9:18 AM

#

lime eagle May 17, 2023, 9:18 AM

#

ultimately we don't directly document/support using Angular, usually we suggest using a third party wrapper like https://github.com/richnologies/ngx-stripe

rocky minnow May 17, 2023, 9:19 AM

#

I tried this one, but it's not working on Angular v14

#

It generates error

#

I can't run the project

lime eagle May 17, 2023, 9:20 AM

#

it says it should work for Angular 14 as long as you're not using the legacy version of the library (https://ngx-stripe.dev/docs/installation)

rocky minnow May 17, 2023, 9:29 AM

#

Hold on I fixed the running project problem but I have another one

#

In the repo you shared there is a form that collect card info and generates token, but like I said I have token and I want to complete payment process, in fact I just want to get a confirmation from Stripe

Let me clear our flow for you

we collect user info + his card info
call our API, API returns client secret (token) & stripe public key
I need to confirm this process by stripe (but I dont know how! if I'm wrong with this process please let me know)

<form novalidate (ngSubmit)="createToken()" [formGroup]="stripeTest">
  <input type="text" formControlName="name" placeholder="Jane Doe">
  <ngx-stripe-card
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
  ></ngx-stripe-card>
  <button type="submit">
    CREATE TOKEN
  </button>
</form>

#

#

@lime eagle @sterile orchid Would you please assist me on this

lime eagle May 17, 2023, 9:37 AM

#

that looks like it's using the old CardElement integration yes, so generally the way that worked is on the frontend it creates a Stripe Token tok_xxx object, and you would send that to a backend server to then call the API to charge the token.

#

I'm not really clear what you're asking, but the recommendation is to replace pages/integrations like that with using the PaymentElement(the component you're trying to use in your initial question) (https://stripe.com/docs/payments/payment-element/migration)

#

in fact I just want to get a confirmation from Stripe
not 100% sure what you mean, but you use webhooks to be notified of a payment success : https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#web-post-payment

rocky minnow May 17, 2023, 9:41 AM

#

rocky minnow

this is my own form before touching any Stripe code, Imagine we are collecting user card information then send to our API when we got the response we are supposed to continue, so I'm redirecting users to stripe page which is like the below

#

lime eagle May 17, 2023, 9:43 AM

#

yep that is the old CardElement integration , so everything I said above applies.

rocky minnow May 17, 2023, 9:52 AM

#

I tried to adapt it but it's not working
There is an error that says:

'CheckoutForm' is not a known element:

<ng-container *ngIf="stripe != null">
  <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="options">
    <CheckoutForm />
  </ngx-stripe-elements>
</ng-container>

#

 stripe;
  options: Partial<StripeElementsOptions> = {
    mode: 'payment',
    currency: 'usd',
    amount: 1099,
  };

  constructor() {}

  ngOnInit(): void {
    this.initialize();
  }

  initialize() {
    const stripePromise = loadStripe('pk_test_01QZ55AeQfGutsrsRjjkToqz').then(
      (loadedStripe) => {
        this.stripe = loadedStripe;
      }
    );
  }

lime eagle May 17, 2023, 9:52 AM

#

where is CheckoutForm defined?

rocky minnow May 17, 2023, 9:53 AM

#

In the link you shared

https://stripe.com/docs/payments/payment-element/migration

Migrate to the Payment Element

Learn how to migrate your existing integration with individual payment method Elements into a single Element.

lime eagle May 17, 2023, 9:53 AM

#

are you maybe reading the React docs?

#

There aren't docs for Angular , you can't just copy and paste the code that we have there for an Angular project, sorry

rocky minnow May 17, 2023, 9:55 AM

#

yes, I just tried to adapt

lime eagle May 17, 2023, 9:55 AM

#

I would instead follow the guide of the library you're using, so https://ngx-stripe.dev/docs/payment-element in this case

rocky minnow May 17, 2023, 9:57 AM

#

Okay, lemme check this out

rocky minnow May 17, 2023, 10:31 AM

#

kind oxideBOT May 17, 2023, 10:31 AM

#

lime eagle May 17, 2023, 10:31 AM

#

what errors are in the browser console?

rocky minnow May 17, 2023, 10:32 AM

#

lime eagle May 17, 2023, 10:35 AM

#

what is the error when you click on the last entry, the failed request to /v1/elements/sessions?

#

most likely you are doing something like using the wrong publishable key I would say, like you create the PaymentIntent on one account but are not using the publishable key pk_xxx of the same account

rocky minnow May 17, 2023, 10:41 AM

#

The error is

{
"error": {
"message": "The client_secret provided does not match any associated PaymentIntent on this account.",
"param": "client_secret",
"request_log_url": "https://dashboard.stripe.com/test/logs/req_7sIxqu0oHFIKIK?t=1684320057",
"type": "invalid_request_error"
}
}

Stripe Login | Sign in to the Stripe Dashboard

Sign in to the Stripe Dashboard to manage business payments and operations in your account. Manage payments and refunds, respond to disputes and more.

#

Client-secret has a pattern like pi_xxx, right?

#

My secret is like the below
pi_3N8hmHDASfsdafdsfnH851vfasdVSFu00ojHG7U6_secret_0fdsaf4151fasdqeLffHeEKEfypVi3Wkbfasdfyz4MuAUQ

hybrid wyvern May 17, 2023, 10:45 AM

#

That doesn't appear to be a valid PI/client_secret

rocky minnow May 17, 2023, 10:46 AM

#

How you understood that? the pattern is invalid?

hybrid wyvern May 17, 2023, 10:48 AM

#

Because I'm trying it look up the PI internally and it's not returning a result

rocky minnow May 17, 2023, 10:48 AM

#

Hold on

#

Try this one
"pi_3N8hmnH851vVSFu00ojHG7U6_secret_qeLHeEKEfypVi3Wkbyz4MuAUQ"

hybrid wyvern May 17, 2023, 10:50 AM

#

Ok, pi_3N8hmnH851vVSFu00ojHG7U6 is valid. But that doesn't match what the secret you're using

rocky minnow May 17, 2023, 10:51 AM

#

If I share that, would you please check that is valid or not, I just wana make sure?

lime eagle May 17, 2023, 10:53 AM

#

well as I said the issue is you're mixing up your API keys really.

pi_3N8hmnH851vVSFu00ojHG7U6 exists but it's not on the same account that you are using in the frontend where you get the error from /v1/elements/sessions, which means you are using the wrong publishable key in your frontend code.

#

pi_3N8hmnH851vVSFu00ojHG7U6 was created on a Dutch Stripe account(presumably your own) , but based on the error you posted from the frontend, you're using the publishable key of a different, US, Stripe account called "Online Store" . Maybe you copied some example code from somewhere online with a key in it and just ran it without changing the key first, or you have multiple Stripe accounts.

#

so make sure you go to https://dashboard.stripe.com/test/apikeys , confirm you're logged into the Stripe account you want to use, carefully copy the correct keys and configure your code to use them, and restart your servers.

#hamidhh