#Teja - Ionic Future Payments

1 messages · Page 1 of 1 (latest)

surreal pewter
#

Hello! Not sure what "stripe takes out and searches for return_url from outside. But this is not opening the app. It could potentially open the redirect url in browser..." means, can you provide more details about what specifically is happening?

zenith verge
#

I didnot know that this is avalable. Thank you very much

#

I will try to refactor with this code

#

But right now

surreal pewter
#

Ah, to clarify, I wasn't suggesting you use that, it hasn't been updated in several years. 😅

#

I was just wondering if you were using it or not.

zenith verge
#

ohh

#

custom workflow

# 

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/account/payments/setup-complete',
    }
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});```

I am actually stuck here...
#

so in this code stripe itself is going to redirect to specific return_url with query parameters. It is good. But when stripe is going to access to that return_url from outside, it may end up the return_url opening in browser instead of opening in the app right..!

So specifically for ionic or angular, do we have any plugins or any other way to work with integration?

surreal pewter
#

What exactly do you mean by "from outside"? Outside of what?

#

This is all happening inside a web view inside your app, correct?

zenith verge
#

so to keep this simple,

Using stripe setup for future payments with reference of above code, I was able to successfully integrate stripe.

#

But the real problem is when I enter card details and hit submit, I know that stripe takes care of everything and in return as I mentioned a return_url already, it is going to add query parameters as well to the return url.

#

the problem is when the stripe automatically calls the return_url upon success response, the whole app is reloading where I am loosing the session data for that app

#

normally it would have to just reload that specific page right...! but the whole app is automatically reloading for some reason.

surreal pewter
#

Oh, so you're not doing this inside a web view? You're loading the Payment Element inside your app itself?

zenith verge
#

If the app is going to reload, I would loose all user session data and cannot proceed further right..

#

so I am developing a app using ionic

#

which is just useful for both android and ios - same code but differs in deployment simply.

#

I am not building any website, this is ionic native app

#

for mobile app

surreal pewter
#

Right, but it sounds like you're using the Stripe Payment Element inside your app's HTML rather than opening a web view and using it there. That won't work, the Payment Element must be used on a page served from a web server over a secure connection (HTTPS).

zenith verge
#

ohh

#

so for ionic native app, how do you think I can integrate stripe with?

#

all I need is to save the card details to a customer and then I he would choose the payment method and I will pass that payment method to backend server to process the payment.

#

payment will be done only when the service is successfully completed to the people.

#

so at the time of booking the service, I just want to save the card details and then they choose the paymentMethod out of list. thats it... Could you please give me some leads?

#

I am using ionic framework combined with angular in front-end and spring boot (java) on backend...

surreal pewter
#

For mobile really the best option is to use one of our official mobile SDKs. We have native SDKs for iOS, Android, and React Native, but we don't support Ionic. Your best bet if you want to stick with Ionic is to build a web-based integration and open that in a web view from your Ionic app.

zenith verge
#

Makes sense

#

But then the problem is after adding the card, the user has to come back to app again to confirm booking

surreal pewter
#

What do you mean?

zenith verge
#

So lets say if he is an existing user, in the payment page- he can choose which card to go with the payment in the future before clicking rhe confirm booking button

#

Lets say he wants to add a new card, I am navigating him to another page ( here stripe elements load)

#

After clicking submit, I want him to comeback to payment summary page where he chooses the selective card again for future payment and then clicks the confirm booking button.

surreal pewter
#

That would all happen in the web view on your payment page I would think?

zenith verge
#

So unless I use the android SDk, this might not work may be ?

#

You are right actually. But how can i Achieve with in mobile app is only by adding mobile sdk?

surreal pewter
#

Yes, basically, unless there's some third-party Ionic library that supports the features you're trying to use.

#

But I don't know of one.

zenith verge
#

Thank you very much