How to implement Stripe Embedded Payment (In-App Payment UI) using Pega Constellation without redirecting to Stripe Checkout page?

User Experience
1

–>We are currently working on integrating Stripe with a Pega Constellation application to support online payments within a case flow.

–>our requirement is to enable embedded (in-app) payment within Pega UI, without redirecting the user to an external Stripe-hosted page.

**Question:**How to implement Stripe Embedded Payment (In-App Payment UI) using Pega Constellation without redirecting to Stripe Checkout page?

Expected Outcome:

  • User should be able to complete payment within Pega UI (embedded form)

  • No redirection to Stripe-hosted pages

  • Payment status should update the case in real-time

Any guidance or recommended approach would be appreciated.

2

Hi,

could you help us better understand your setup. Is it ootb Constellation portal and you want to build DX Component or is it for SDK? Can you please link to Stripe docs?

3

Hello Kamil,

We are using the OOTB Constellation portal and exploring the option of building a custom DX component to integrate Stripe embedded payment within the application UI. Our requirement is to render the payment form inside Pega without redirecting users to a Stripe-hosted page. We are evaluating Stripe’s embedded Checkout and Stripe.js (Elements) approach for this purpose. Could you please suggest if DX components are the recommended approach in this scenario or if there are alternative patterns?

We referred to Stripe documentation for embedded payments:

4

A DX Component would be the recommended way to deal with this requirement.

There are so many resources for building DX components, so it depends where you are starting from.

  • I would be looking at our Component Build Guide on Github, specifically Pega_Extensions_IframeWrapper this seems to be the approach you are after? (Embeds external content within an iframe.)

If you are starting from the very beginning our recent webinar would be a great start:

1 Like
5

@MarcCheong @Kamil_Janeczek Lets say we are implementing a custom component here. I have a kind of blocker. In all payment gateways, most of the times there will be redirects. Like when we submit our card details, it takes me to bank’s page to authenticate the transaction and then post that it redirects me back to current screen. In the stripe scenario as well, there is a redirect, it is redirecting me back to review screen and I am seeing the Go button with assignment. As end users, they expect to return to the screen where the component is present instead of coming to review screen and clicking on Go. Is there any option in Constellation to configure a URL where we can force the case to open the assignment directly instead of opening the case in review mode? Not only for this scenario but there are other scenarios where I felt it would be better if we can open any assignment directly instead of giving an extra click for user. Please provide your inputs or any alternate suggestions.

6

Ok good tha you have manage to embed payment ui in your DX component. Showing vendor specyfic ui and then redirecting is standard thing. This is due to compliance and regulations - those screens needs to comply with law.

Coming back to your question, you migth need to redirect back to assignement not to a case. Take a look on this article:

2 Likes
7

Thank you @Kamil_Janeczek . I somehow missed this thread. I checked for this feature few months back, it was not possible then, happy to know that the product is evolving. I will proceed with the implementation.

1 Like