Stripe.js ElementsがCordovaでロードされない時

はじめに

Webで動いてるStripe.jsとStripe ElementsがCordovaのビルド後に動かなかった時のメモ。
※Cordova iosでのみ動作確認済み

• Cordova 10.0.0
• Stripe JS SDK v3

目次

1. 何がおかしかったか
2. 追加したコード
3. 参考文献

#1. 何がおかしかったか

この画面でStripe Elementsを使っていて、Cordovaでビルドした後Elementsがロードされていない感じでCard Number、Expiration、CVCが入力できなかった。

#2. 追加したコード
Cordovaの設定ファイルconfig.xmlの<platform name="ios">内に以下のコードを追加したらWebと同様に動くようになった。

config.xml

<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

Stripe ElementsのURLを読むのにパーミションが問題だったみたい。。

#3. 参考文献

• Stripe in wkwebview open a browser page loading script
• Stripe.js と Stripe Elements