Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

payment-details embedded component pops empty, disappear, and re-pops before displaying info about payment #148

Open
dvadri opened this issue Aug 15, 2024 · 9 comments
Open

payment-details embedded component pops empty, disappear, and re-pops before displaying info about payment #148

dvadri opened this issue Aug 15, 2024 · 9 comments

Comments

@dvadri
Copy link

dvadri commented Aug 15, 2024

When using the payment-details embedded component (alone, without the payments embedded component)... no matter if called from a button "View payment details" or if executed on page load... it always pops empty, disappear, and re-pops before displaying info about payment. How to fix it?
@dvadri
Copy link
Author

dvadri commented Aug 15, 2024

Stripe talks about this popping behaviour here, but couldn't find a way to actually fix it.
https://docs.stripe.com/connect/get-started-connect-embedded-components#reacting-to-component-display
PS.: I am using the pure version import { loadConnectAndInitialize } from '@stripe/connect-js/pure';

@jojo-stripe
Copy link
Contributor

Could you attach a video of this behavior?

@dvadri
Copy link
Author

dvadri commented Aug 15, 2024

Screen.Recording.2024-08-15.at.15.39.09.mov

@kaiying-stripe
Copy link
Contributor

kaiying-stripe commented Aug 15, 2024 •
edited
Loading

This isn't an known issue and seems like a bug, could you provide a small github repo that reproduces this issue? Thanks!

@MaherBouidani
Copy link

It could be related to the state updated asynchronously (e.g., after an API call). In that case, the component might render before the state is populated, causing it to briefly appear empty and re-render when it is updated.

@irina-shakhova
Copy link

Hey everyone, I'm getting the same issue. I checked that there're no async state updates.

@dvadri have you found a solution?

@dvadri
Copy link
Author

dvadri commented Oct 12, 2024 •
edited
Loading

Hi guys, I haven't found the solution yet. I'm using Laravel v11:

This is the html of the page from the video:

<!DOCTYPE html>
    <head>        
        <meta charset="utf-8">        
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        @vite(['resources/css/app.css', 'resources/js/payment.js'])
    </head>    
    <body>       

        <button id="view" wire:ignore class="m-3 p-3 bg-red-100 rounded">View Payment Details</button> <br>

        <div id="spinner" wire:ignore></div>
        <div id="payment-details-container" wire:ignore></div>

    </body>
</html>

This is the payment.js:

import { loadConnectAndInitialize } from "@stripe/connect-js/pure";

let paymentIntentId = 'pi_example123';
console.log(paymentIntentId);

let shop_id = 'exampleShop123';
console.log(shop_id);

const viewButton = document.getElementById('view');

viewButton.addEventListener('click', function() {

    const fetchClientSecret = async () => {

        // Fetch the AccountSession client secret
        const response = await fetch('/account_session', { 
                method: "POST", 
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                },
                body: JSON.stringify({
                    shop_id: shop_id,
                }), 
            });
        if (!response.ok) {
            // Handle errors on the client side here
            const {error} = await response.json();
            console.error('An error occurred: ', error);
            return undefined;
        } else {
            const {clientSecret: clientSecret} = await response.json();
            return clientSecret;
        }
    }

    const stripeConnectInstance = loadConnectAndInitialize({
        // This is your test publishable API key.
        publishableKey: "pk_test_example123",
        fetchClientSecret: fetchClientSecret,
    });
    
    // Include this element in your HTML
    const paymentDetails = stripeConnectInstance.create('payment-details');
    
    paymentDetails.setPayment(paymentIntentId);
    const container = document.getElementById("payment-details-container");
    container.appendChild(paymentDetails);

    // use setOnClose to set a callback function to close payment-details
    paymentDetails.setOnClose(() => {
        paymentDetails.remove();
    });

});

This is the app.js (that Laravel uses):

import './bootstrap';

import { loadConnectAndInitialize } from '@stripe/connect-js/pure';

// Ensure the loadConnectAndInitialize is accessible globally
window.loadConnectAndInitialize = loadConnectAndInitialize;

---x---

Another problem I just spotted... I also think the payment-details embedded component isn't showing all the disputes related to a single charge. I tested using the 4000000404000079 (multiple dispute card from Stripe) and only one of the disputes appeared, while in the regular stripe dashboard for the conected account (when accessing from the platform account) both disputes appeared.
I also noticed the retrieve charge api won't list all the disputes under the 'dispute' parameter, but just shows one. This might explain it and be all interconnected. Can someone from Stripe check if it's a bug? Because otherwise connected accountes without dashboard access won't be able to counterdispute one of the disputes!!!

@jorgea-stripe
Copy link
Contributor

jorgea-stripe commented Oct 14, 2024 •
edited
Loading

@dvadri Looking at this code - can you console log the code in your click listener and verify it is running only once? I believe the video you shared indicates that 2 separate payment details components are mounted onto the page at the same time (one after another)

@jojo-stripe
Copy link
Contributor

@dvadri And regarding multiple disputes, we do not currently support multiple disputes management in embedded, but that shouldn't be causing your issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@irina-shakhova @MaherBouidani @jorgea-stripe @dvadri @kaiying-stripe @jojo-stripe