Apple Pay does not work with xcomponent due to insecure parent frame

Hi,

I’m using Stripe API to open Apple Pay within an xcomponent lightbox. However, it throws an error “Trying to call an ApplePaySession API from a document with an insecure parent frame” when it detects the outermost iframe is not secure (not starting with https) as below: <iframe name="__lightbox_container__ec6827b044__" scrolling="no" frameborder="0" style="display: block; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2147483647;"></iframe>

Can you please look into?

Here is how I implement the Apply Pay:

<style>
  #apple-pay-button {
    display: none;
    background-color: black;
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-size: 100% 100%;
    background-origin: content-box;
    background-repeat: no-repeat;
    width: 100%;
    height: 44px;
    padding: 10px 0;
    border-radius: 10px;
  }
</style>

<button id="apple-pay-button"></button>

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script>
    Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

    Stripe.applePay.checkAvailability(function(available) {
        if (available) {
            document.getElementById('apple-pay-button').style.display = 'block';
        }
    });

    document.getElementById('apple-pay-button').addEventListener('click', beginApplePay);


    function beginApplePay() {
        var paymentRequest = {
            countryCode: 'US',
            currencyCode: 'USD',
            total: {
                label: 'Stripe.com',
                amount: '19.99'
            }
        };
        var session = Stripe.applePay.buildSession(paymentRequest,
            function(result, completion) {

            $.post('/charges', { token: result.token.id }).done(function() {
                completion(ApplePaySession.STATUS_SUCCESS);
                //window.xchild.props.onComplete('Apple Pay succeeded!');

            }).fail(function() {
                completion(ApplePaySession.STATUS_FAILURE);
                //window.xchild.props.onComplete('Apple Pay error!');
                
            });

        }, function(error) {
            console.log(error.message);
        });

        session.oncancel = function() {
            console.log("User hit the cancel button in the payment window");
            //window.xchild.props.onComplete('Apple Pay canceled!');
        };

        session.begin();
    }
</script>

Thanks, Ky

[bluepnume]

OK, I’ve added an option for this: sandboxContainer: false

xcomponent.create({
    sandboxContainer: false
});

I tried this with your code and I now see the apple pay button. Can you give it a try on your side? Thanks!

[ghost]

It works now. Much thanks for your effort.

– Ky