marcoB

[violet scroll]

hi! what does your frontend code look like that tries to create the Source?

[tiny arch]

<Elements options={options} stripe={stripePromise}>

[violet scroll]

I think you only posted the first line, where's the rest?

[tiny arch]

<Elements options={options} stripe={stripePromise}>
<MultibancoRequest pi={props.paymentIntent} />
</Elements>

function MultibancoRequest(props) {

const [message, setMessage] = useState('waiting multibanco sources');
const stripe = useStripe();

useEffect(() => {

    const createSource = async () => {
        const sourceData = {
            type: 'multibanco',
            amount: props.pi.amount,
            currency: props.pi.currency,
            owner: {
                name: 'Prova Multibanco',
                email: '[e-mail]',
            },
            redirect: {
                return_url: `http://localhost:3000?payment_intent=${props.pi.id}`,
            },
            statement_descriptor: 'Stripe Payments Demo',
            metadata: {
                paymentIntent: props.pi.id,
            },
        };


        const result = await stripe.createSource(sourceData);
        console.log("Multibanco Source: ", result);
        setMessage("Multibanco source created");
    }

    if (!stripe) {
        return;
    }

    createSource().catch(console.error);

    console.log("send source request .... ");

}, [stripe]);

...
}

the same createSource call done in the backend run succesfully. Here never returns.

[violet scroll]

what is the value of result ? have you added logs/breakpoints to see how far the code runs? are there any errors in the browser console?

I'd also I think suggest not doing this on a useEffect on the stripe variable and doing it when a button is pressed, maybe there's a timing issue

[tiny arch]

I do this on a button press, i have break the code before the createSource, and when continue the execution await never returns, the console.log after the call is never reached, and I've no message or errors at all on the console!

[violet scroll]

do you have a public page doing this that I could visit to investigate in my own browser?

[tiny arch]

no sorry

[violet scroll]

can you log the value of sourceData and share that here?

[tiny arch]

{
"type": "multibanco",
"amount": 66600,
"currency": "eur",
"owner": {
"name": "Prova Multibanco",
"email": "[e-mail]"
},
"redirect": {
"return_url": "http://localhost:3000?payment_intent=pi_3MRv1RChhQqk1uXO0xSNDkrh"
},
"statement_descriptor": "Stripe Payments Demo",
"metadata": {
"paymentIntent": "pi_3MRv1RChhQqk1uXO0xSNDkrh"
}
}

[violet scroll]

hmm, it works client side for me at least using stripe.js directly so the params themselves are fine

maybe your call should be await createSource().catch(console.error);?

[tiny arch]

how you got the stripe variable ? I use the hooks useStripe.

[violet scroll]

I'm not using React

unfortunately it's hard for us to debug this without being able to look at your page directly and inspect it

[tiny arch]

yes I know that with pure javascript it's working, I found an example on GitHub. The problem seems to be with React Environment.

[violet scroll]

if you write to https://support.stripe.com/?contact=true we can take more time to investigate and try to reproduce something

[tiny arch]

Ok thank you , a last question do you know if Stripe support MBWay payments ?

[violet scroll]

no

[tiny arch]

many thanks

[violet scroll]

Hi, there is a way to see created sources in Stripe's Dashboard ?

not in a list view no

if you know the ID of a src_xxx you can search for that in the dashboard search bar and it will bring you to a page for it

ultimately Sources are entirely deprecated for a few years and shouldn't even be used, unfortunately Multibanco is not well supported so we haven't prioritised migrating it to the "new" APIs