I’m facing this issue, trying to use the React-square-web-payments-sdk in a Chrome WebExtension,
square.js:1 Uncaught (in promise) PaymentMethodNotAttachedError: Card has not been attached to the page. It must be attached before a payment method can be tokenized
at md (square.js:1:243054)
at Object.deserialize (square.js:1:249016)
at listener (square.js:1:248088)
at square.js:1:246884
at Array.forEach ()
at square.js:1:246871
at Array.forEach ()
at vd.handleMessage (square.js:1:246856)
at square.js:1:245038
at Array.forEach ()
at Object.handleMessage (square.js:1:245025)
at MessagePort.receiveMessage (square.js:1:243591)
My Code
// Dependencies
import * as React from ‘react’
import ‘./Payments.css’
import {SquarePaymentsForm, CreditCardInput, AchPay, GooglePay, ApplePay,} from ‘react-square-web-payments-sdk’
const Payments = () => (
<SquarePaymentsForm
applicationId=“{AID}”
locationId= “{LID}”
cardTokenizeResponseReceived={ async (token, buyer) => {
alert(JSON.stringify(token,null,2));
}}
At this time we highly recommend not to bundle Web Payment SDK in a Chrome extension. The SDK isn’t intended to be used in this way. 