Stripe Elements - Confirm payment - Page with ID in URL

Ask us anything How do I?
1

Hey, Ive got a page with an ID in the URL. I want the user to pay and then return to the same page with the ID in the URL. (Or ideally not even get redirected at all since the flow continues on the same page)

Currently the confirm payment action only allows us to choose a page, but not provide the params.

image

I tried also binding it manually like so

image

Also tried binding the UUID of the page + the ID of my event, but keep getting errors in console in the live app

image
image721×207 11.9 KB

Appreciate any help on this one!

2

Hi,

I think it’s not possible at the moment in a nocode way. But I will note your feedback for further improvements!

In the meantime I tested a workaround for you with javascript, it seems to be working well =>

wwLib.wwPlugins.stripe.instance.confirmPayment({
    elements: <bind-stripe-element-variable>,
    confirmParams: {
        return_url: <your-url>
    }
})

For this workaround to work both in the editor and in the published website you will have to adapt the url depending of the environment

wwLib.wwPlugins.stripe.instance.confirmPayment({
    elements: <bind-stripe-element-variable>,
    confirmParams: {
        return_url: context.browser?.['environment'] === 'editor' ? <your-editor-page-url> : <your-published-page-url>
    }
})

You will find the stripe element variable in the explorer

Capture d’écran 2023-12-01 à 18.00.55

The editor page url correspond to the full path you have in your browser when working on a given page in the editor.

Do not hesitate to ask if you need more help to use this workaround. You may need to update the condition if you have also a staging environment as it will require you to add a third url, the staging one.

1 Like
3

Thank you, that is exactly what I needed!

4

Hey @Alexis Ive got another similar issue with Stripe.

I am allowing users to sell their service using stripe connect.

The user can create a product/price for their account, I am handling this via supabase edge function as there is no way to set custom headers to include the account_id

const product = await stripe.products.create({
                name: record.name,
                default_price_data: {
                    currency: 'GBP',
                    unit_amount: formatPrice(record.price)
                }
            },
            {
                stripeAccount: data.account.stripe_account_id,
            });

I am then using the payment_secret in the weweb stripe element, but it seems to break.

Here is a vid demo: Loom | Free Screen & Video Recording Software | Loom

Thank you!

EDIT SOLVED:

I needed to add transfer_data to the request:

const paymentIntent = await stripe.paymentIntents.create({
      amount: 2000,
      currency: 'gbp',
      customer: customer_id,
      automatic_payment_methods: {
        enabled: true,
      },
      transfer_data: {
        destination: stripe_account_id,
      }
    });
1 Like
5

Well done! Thanks for sharing the solution :slight_smile:

6

I am writing to inquire about the capabilities of the Stripe plugin in relation to accessing and managing user data via JavaScript. Specifically, I am interested in understanding whether it’s possible to use the plugin as an instance to:

  1. Access and fetch user invoices.
  2. Edit and manage user subscriptions.

Any guidance on how to implement these features, including code examples or documentation references, would be greatly appreciated.