Although the same-origin policy may stop an attacker from accessing the legitimate iFrame content, the problem is that the user has no way to verify that they're actually interacting with the legitimate iFrame (short of going to the source which most users won't do). An attacker could just as easily replace the iFrame source with a phishing page and gain the users credit card details that way.
Both iFrame and JS based gateways are vulnerable to approximately the same issues, so I would argue that they're both equally insecure compared hosted gateways. The benefits of hosted gateways are that:
- The user can verify the URL to be sure who they're interacting with
- The user can validate the SSL/TLS certificate and encryption to be even more sure about who they're interacting with
- A payment gateway operated by a bank is most likely better tested for vulnerabilities than some arbitrary site.
- Users can be reasonably confident in the integrity of their payment details if the totals, etc. are displayed by the external gateway. Compared to onsite where the site may say they'll charge you one thing then charge you another.
On the other hand, transferring users to an external payment gateway is considered a bad user experience and interfacing with a payment processor securely on the server side is complicated, so compromises are made and these JS based gateways are becoming popular.