CODEWITHSUNDEEP
flutteriframeapplepayapplepayjs
Sandeep
Sandeep

Reputation: 65

Apple pay button not loading on iframe loaded on flutter

I trying to load url via iframe. Url has apple pay option which works when we just click on url directly. But loading the same url on iframe makes apple pay button invisible. Im posting screenshot of the webpage loaded via iframe and opened directly. screenshot of the webpage loaded via iframe and opened directly

Below is the code which im using

@override
  Widget build(BuildContext context) {

    ui.platformViewRegistry.registerViewFactory(
        'test-view-type',
            (int viewId) {
            IFrameElement iframe = IFrameElement()
            ..width = '640'
            ..height = '660'
            ..allow = "payment"
            ..src = <WEB URL GOES HERE>
            ..style.border = 'none';

    return iframe;
    });

    return Scaffold(
        body: Column(
          children: [
            Text('Testing Iframe with Flutter'),
            HtmlElementView(viewType: 'test-view-type'),
          ],
        ));
  }

Upvotes: 0

Views: 149

Answers (1)

Adeel Nazim
Adeel Nazim

Reputation: 724

You need to set button like you set height and width look at the official apple_pay_doc

button_configs: {
    accountId: accountId, 
    cssVariables: {
        borderRadius: "3px",
        ApplePayButtonType: "continue",            
        ApplePayButtonStyle: "white-outline"
    },

also look at this Using HtmlElementView With PayPal

This may help you. He's facing the same issue with PayPal button as you are facing with Apple pay button

Add these codes to your file like this

@override
  Widget build(BuildContext context) {

    ui.platformViewRegistry.registerViewFactory(
        'test-view-type',
            (int viewId) {
            IFrameElement iframe = IFrameElement()
            ..width = '640'
            ..height = '660'
            ..allow = "payment"
            ..style.border = 'none'
 ..srcdoc = """
    <!DOCTYPE html>
    <html>
      <body>
        <script src="<WEB URL GOES HERE>"></script>
        <script>
button_configs: {
    accountId: accountId, <-- This is the merchant account id passed as a variable
    cssVariables: {
        borderRadius: "3px",
        ApplePayButtonType: "continue",            
        ApplePayButtonStyle: "white-outline"
    },.render('body');
        </script>
      </body>
    </html>
    """;
;

    return iframe;
    });

    return Scaffold(
        body: Column(
          children: [
            Text('Testing Iframe with Flutter'),
            HtmlElementView(viewType: 'test-view-type'),
          ],
        ));
  }

Also check you are using dart:ui_web not dart:ui

Upvotes: 0

Related Questions