#raohongping_best-practices
static stirrupBOT
๐ Welcome to your new thread!
โฒ๏ธ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
โฑ๏ธ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
๐ This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1478577672811577344
๐ Have more to share? Add more details, code, screenshots, videos, etc. below.
alpine relic
๏ผ
tepid fiber
Hi
alpine relic
tepid fiber
The Return URL normally is a website you own. You can make it matches your business branding
Are the screenshots above your own website?
alpine relic
"Yes, Image 1 is integrated through Superwall, and Image 2 is from directly integrating Stripe Checkout. I noticed the layouts are different. I'd like to achieve the layout shown in Image 1 โ the one that comes through Superwall's integration. Could you help me understand how to get that same Checkout layout?"
tepid fiber
Image 2 what is the return URL you set
alpine relic
Here's the English translation with full URLs:
"Both URLs are obtained from the https://api.stripe.com/v1/payment_pages endpoint:
The first URL was captured from Superwall's response (via packet sniffing):
https://checkout.stripe.com/c/pay/cs_test_a1IVl8ECqYh0LP4XRQ3d15NgnU37UnJYfrOjNcUX82MfO5D0ug4D0OiADI#fid1d2BpamRhQ2prcSc%2FJ0xrcWB3JyknZ2p3YWB3VnF8aWAnPyd3anBrYScpJ3ZwZ3Zmd2x1cWxqa1BrbHRwYGtgdnZAa2RnaWBhJz9jZGl2YCknandsYmxrRmprcWB9cSc%2FJ2hqZ2xpYFpkdXUnKSdkdWxOYHwnPyd1blpxYHZxWjA0VVU1XVY0azRUSHNLY1E9bURDPXxpaUNxPUdcT21%2FQ2FKcWBiPXZHcmdAYmdPa2sxN1E9M2NwMlFcMUNBNXVCSUdzSU5EXGgyVjNqVUxsRnFgYXNgaFVJNTVOTktpN0FKXScpJ2N3amhWYHdzYHcnP3F3cGApJ2dkZm5id2pwa2FGamlqdyc%2FJyZgY2M9Y2MnKSdpZHxqcHFRfHVgJz8ndmxrYmlgWmxxYGgnKSdga2RnaWBVaWRmYG1qaWFgd3YnP3F3cGB4JSUl
The second URL is from our direct Stripe Checkout integration:
https://checkout.stripe.com/c/pay/cs_test_a19IIqJ1qHceS7NfOAMjbEDYAB1n2ko010TBzm36a65879aiI27IuDql2u#fid1d2BpamRhQ2prcSc%2FJ0xrcWB3JyknZ2p3YWB3VnF8aWAnPyd3anBrYScpJ3ZwZ3Zmd2x1cWxqa1BrbHRwYGtgdnZAa2RnaWBhJz9jZGl2YCknZHVsTmB8Jz8ndW5acWB2cVowNFVVNV1WNGs0VEhzS2NRPW1EQz18aWlDcT1HXE9tf0NhSnFgYj12R3JnQGJnT2trMTdRPTNjcDJRXDFDQTV1QklHc0lORFxoMlYzalVMbEZxYGFzYGhVSTU1Tk5LaTdBSl0nKSdjd2poVmB3c2B3Jz9xd3BgKSdnZGZuYndqcGthRmppancnPycmYGNjPWNjJyknaWR8anBxUXx1YCc%2FJ3Zsa2JpYFpscWBoJyknYGtkZ2lgVWlkZmBtamlhYHd2Jz9xd3BgeCUl
Both URLs come from the same Stripe API endpoint (/v1/payment_pages), but they render different layouts. The first one (from Superwall) shows a cleaner, simplified checkout page (Image 1), while the second one (from our direct integration) shows a different layout (Image 2). How can we configure our Checkout Session to get the same layout as the one returned through Superwall?
The difference on the web side is minor โ one has a back button and the other doesn't. The main issue is on mobile. When loaded on a phone, the rendering and layout are completely different between the two URLs. The one from Superwall (Image 1) shows a clean, native-like mobile checkout experience, while our direct Stripe Checkout integration (Image 2) renders a different mobile layout. We'd like to achieve the same mobile checkout experience as the Superwall one.
tepid fiber
Ok so these are the main Stripe Checkout URL, not its "return_url"
I am not sure what Superwall's setup, but you can customize your branding in your Stripe Account
alpine relic
Or to simplify my question โ how can I remove the back button from the Stripe Checkout page?
tepid fiber
I think that's the browser default back button. You can't remove it
If you open the link directly, you wouldn't see that button
alpine relic
Here's the English translation with full URLs:
"Both URLs are obtained from the ...
No, what I mean is โ when you open the first URL (from Superwall), there is no back button on the Checkout page. But when you open the second URL (from our direct integration), there is a back button. Why is there a difference, and how can I get rid of the back button like in the first URL? @tepid fiber
alpine relic
Yes, removing the cancel_url made the close button disappear. But there's another issue โ if you open the two URLs I shared above on a mobile device, you'll notice the following differences:
Loading behavior: The first URL (from Superwall) shows a skeleton screen and then the Apple Pay button appears immediately after. The second URL (from our direct integration) shows a skeleton screen, but after it disappears, there's roughly a 0.5-second delay before the Apple Pay button appears.
Payment method display: The first URL shows the payment methods in a collapsed/folded view, while the second URL shows them fully expanded.
How can I configure our Stripe Checkout Session to achieve the same behavior as the first URL โ instant Apple Pay button appearance after the skeleton screen, and collapsed payment methods?
tepid fiber
I think your would want to ask Superwall their settings. It would be difficult reverse engineering from us