React-stripe-elements: Refused to frame '' because it violates the following Content Security Policy directive: "frame-src https:".

[mohammad-naji7]

Descripiton

We have the following issue when we try to use 3D secure

There are no adblockers or any related extensions installed.

The issue happens on both chrome and safari browsers, with the following error messages:
Chrome:

Safari:

On firefox, the error does not happen, however, the following warning message is displayed:

Steps to reproduce

We dont have a straight forward steps to reproduce, since it happens randomlly after failing the authorization multiple times, or clicking on the authorize/fail buttons more than once at the same time

Other information

I think the screen shown above is related to the "return to merchant" view

I'm currently unsure if the issue is a misconfiguration from our side or it is from this library or Stripe's APIs, appreciate any help

[asolove-stripe]

Hi @mohammad-naji7, yikes, that doesn't look good! Let's see how we can fix that.

Can you tell us a little about what you are doing to get this to happen? (Even if it doesn't work every time.) It looks like you are using the PaymentIntent API from your server, and then calling stripe.handleCardPayment, which sometimes shows 3DS. Do you get this broken CSP issue immediately? Or are you first seeing the Stripe "Testmode Source" page and interacting with that in some way?

[asolove-stripe]

Ah, ok, I was just able to reproduce by clicking the testmode authorize/fail buttons more than once. We will fix this shortly!

[zakisaadeh]

@asolove-stripe Thanks a lot. When do you expect to have this fix released?

[asolove-stripe]

I expect the fix to be out later today. In the mean time, just want you to know that this double-click problem is limited to the fake 3DS page we use in testmode and does not affect live transactions.

[asolove-stripe]

@mohammad-naji7 @zakisaadeh We've launched a fix here that prevents you from double-clicking on those buttons. I can no longer reproduce the bug, so hopefully this fixes for you. Let me know if not and I can dig some more.

[NicolaGenesin]

@asolove-stripe having the same exact issue, but it happens all the time when working with a test key. Worked fine till yesterday evening.

[NicolaGenesin]

One thing that _wasn't showing yesterday_ is the "return to merchant" state. If you click it, the modal breaks.

[dweedon-stripe]

Hi @NicolaGenesin, thats definitely not good. Can you tell me a bit more about your integration and how to reproduce this? Do you see any errors in the console?

[NicolaGenesin]

@dwee-stripe The console errors are the same ones as reported in this issue report.

We're using and we followed this https://stripe.com/docs/payments/payment-intents/migration integration to the letter.
When using a test card requiring auth, the modal shows up, but when you click on confirm, the "return to merchant" state appears instead of making the stripe test modal dismiss (this was the behaviour until yesterday evening). After clicking on "return to merchant", the modal breaks.

[dweedon-stripe]

Sorry, for clarification:

Yesterday this was working and you were not seeing "return to merchant" at all, today you are seeing this, and it doesn't work.

Is that correct?

I just tested the flow outlined in the migration guide there and I am having trouble reproducing. Which testcard number are you using?

[NicolaGenesin]

Yes that's what I meant. The card I used is 4000 0027 6000 3184

[dweedon-stripe]

Hi @NicolaGenesin still having some trouble reproducing. I'd like to get some more information is possible. Can you send me an email at [email protected]?

[NicolaGenesin]

@dweedon-stripe good news, there was a subtle but fundamental change overnight that I did not notice (and I am sorry I wasn't able to provide you more details):

return_url='someUrl' has been added to the payment intent creation on our backend.

By removing that param, the stripe modal works as expected. The following is a test intent after a transaction has been confirmed. So my question is, should we use/support return_url at all on web?

{
"id":"pi_1F5FckLu48Aj7sQoUNIxDO11",
"object":"payment_intent",
"allowed_source_types":[
    "card"
],
"amount":200,
"amount_capturable":0,
"amount_received":200,
"application":null,
"application_fee_amount":null,
"canceled_at":null,
"cancellation_reason":null,
"capture_method":"automatic",
"charges":{
    "object":"list",
    "data":[
        {
            "id":"ch_1F5FcqLu48Aj7sQoknqKt13p",
            "object":"charge",
            "amount":200,
            "amount_refunded":0,
            "application":null,
            "application_fee":null,
            "application_fee_amount":null,
            "balance_transaction":"txn_1F5FcrLu48Aj7sQonBn5CXOO",
            "billing_details":{
            "address":{
                "city":null,
                "country":null,
                "line1":null,
                "line2":null,
                "postal_code":null,
                "state":null
            },
            "email":null,
            "name":null,
            "phone":null
            },
            "captured":true,
            "created":1565286128,
            "currency":"gbp",
            "customer":"cus_FaQTfAFAr277S0",
            "description":null,
            "destination":null,
            "dispute":null,
            "failure_code":null,
            "failure_message":null,
            "fraud_details":{

            },
            "invoice":null,
            "livemode":false,
            "metadata":{
            },
            "on_behalf_of":null,
            "order":null,
            "outcome":{
            "network_status":"approved_by_network",
            "reason":null,
            "risk_level":"normal",
            "risk_score":39,
            "rule":{
                "id":"allow_if_3ds_authenticated_liability_shift",
                "action":"allow",
                "predicate":":is_3d_secure_authenticated: and :has_liability_shift:"
            },
            "seller_message":"Payment complete.",
            "type":"authorized"
            },
            "paid":true,
            "payment_intent":"pi_1F5FckLu48Aj7sQoUNIxDO11",
            "payment_method":"pm_1F5FciLu48Aj7sQowD7goIgS",
            "payment_method_details":{
            "card":{
                "brand":"visa",
                "checks":{
                    "address_line1_check":null,
                    "address_postal_code_check":null,
                    "cvc_check":"pass"
                },
                "country":"DE",
                "exp_month":4,
                "exp_year":2024,
                "fingerprint":"ViOdhoOWfCBtMq9y",
                "funding":"credit",
                "last4":"3184",
                "three_d_secure":{
                    "authenticated":true,
                    "succeeded":true,
                    "version":"1.0"
                },
                "wallet":null
            },
            "type":"card"
            },
            "receipt_email":null,
            "receipt_number":null,
            "receipt_url":"https://pay.stripe.com/receipts/acct_19o9T7Lu48Aj7sQo/ch_1F5FcqLu48Aj7sQoknqKt13p/rcpt_FaQTyvFCcla6XFx6ZahyMZPgCE6WCLh",
            "refunded":false,
            "refunds":{
            "object":"list",
            "data":[

            ],
            "has_more":false,
            "total_count":0,
            "url":"/v1/charges/ch_1F5FcqLu48Aj7sQoknqKt13p/refunds"
            },
            "review":null,
            "shipping":null,
            "source":null,
            "source_transfer":null,
            "statement_descriptor":null,
            "statement_descriptor_suffix":null,
            "status":"succeeded",
            "transfer_data":null,
            "transfer_group":null
        }
    ],
    "has_more":false,
    "total_count":1,
    "url":"/v1/charges?payment_intent=pi_1F5FckLu48Aj7sQoUNIxDO11"
},
"client_secret":"pi_1F5FckLu48Aj7sQoUNIxDO11_secret_qlPxebeSeZDJf1OmYfALSM3e4",
"confirmation_method":"manual",
"created":1565286122,
"currency":"gbp",
"customer":"cus_FaQTfAFAr277S0",
"description":null,
"invoice":null,
"last_payment_error":null,
"livemode":false,
"metadata":{
},
"next_action":null,
"next_source_action":null,
"on_behalf_of":null,
"payment_method":"pm_1F5FciLu48Aj7sQowD7goIgS",
"payment_method_options":{
    "card":{
        "request_three_d_secure":"automatic"
    }
},
"payment_method_types":[
    "card"
],
"receipt_email":null,
"review":null,
"setup_future_usage":"off_session",
"shipping":null,
"source":null,
"statement_descriptor":null,
"statement_descriptor_suffix":null,
"status":"succeeded",
"transfer_data":null,
"transfer_group":null
}

[dweedon-stripe]

So my question is, should we use/support return_url at all on web?

Yes, there is a use case for return_url on the web, but it should not be used in conjunction with handleCardAction or handleCardPayment. If you are planning on passing the PaymentIntent into one of those methods and letting Stripe.js handle requires_action, then you should not set return_url.

On the web, return_url is used to support the custom iframe integration outlined here: https://stripe.com/docs/payments/3d-secure-iframe

Let me know if you have any other questions. Hopefully this helps clear things up!