No update hooks are triggered (react)

[skyjur]

I'm trying to use TapPay within React, and it seems to me that TPDirect.card.onUpdate((update) => { is never being triggered. Any idea why?

Any idea?

export class CreditCardPayment extends React.Component {
    number: HTMLInputElement
    expiration: HTMLInputElement
    ccv: HTMLInputElement

    handleSubmit = () => {
        getTPDirect().then((TPDirect) => {
            const tappayStatus = TPDirect.card.getTappayFieldsStatus()

            console.log('status', tappayStatus)

         // ====================================
         // logs:
         // canGetPrime: false
         // cardType: "unknown"
         // hasError: false
         // status: {number: 1, expiry: 1, ccv: 1}
        // ====================================

            if (tappayStatus.canGetPrime === false) {
                alert('can not get prime')
                return
            }

            TPDirect.card.getPrime(function (result) {
                if (result.status !== 0) {
                    alert('get prime error ' + result.msg)
                    return
                }
                alert('get prime 成功，prime: ' + result.card.prime)
            })
        })
    }

    componentDidMount() {
        getTPDirect().then((TPDirect) => {
            TPDirect.setupSDK(
                13951,
                'app_oyLcnRbOPBJ2fqZvzaQ5d6Ueh1wK9nDN8dp3TmhvP7qQv72xS8CZMnw0TooY',
                'sandbox'
            )
            // ===============  setup() IS SEEMS TO BE WORKING OK
            //       when debugging I can see 'element' refs correcty configured in TPDirect.card
            TPDirect.card.setup({
                fields: {
                    number: {
                        element: this.number,
                        placeholder: '**** **** **** ****'
                    },
                    expirationDate: {
                        element: this.expiration,
                        placeholder: 'MM / YY'
                    },
                    ccv: {
                        element: this.ccv,
                        placeholder: "***"
                    }
                }
            })
            TPDirect.card.onUpdate((update) => {
               // ===============  NEVER LOGS ANYTHING HERE !!! WHY?
                console.log('update', update)
 
            })
        })
    }

    render() {
        return <>
            <div className="form">                

                <div className="form-group">
                    <label htmlFor="cc-name">Card number</label>

                    <div className="input-group custom-input">
                        <input
                            autoComplete="cc-number"
                            className="form-control rounded-0 text-monospace"
                            placeholder="**** **** **** ****"
                            ref={(e) => this.number = e!}
                            />
                        <div className="input-group-append">
                            <span className="input-group-text text-muted">
                                {rawIcon(ccVisaSvg)}
                                &nbsp;
                                {rawIcon(ccMasterCardSvg)}
                            </span>
                        </div>
                    </div>
                </div>

                <div className="row">
                    <div className="col-sm-8">
                        <div className="form-group">
                            <label><span className="hidden-xs">Expiration</span> </label>
                            <div className="input-group">
                                <input
                                    ref={(e) => this.expiration = e!}
                                    className="form-control text-monospace rounded-0"
                                    placeholder="MM / YY" />
                            </div>
                        </div>
                    </div>
                    <div className="col-sm-4">
                        <div className="form-group">
                            <label data-toggle="tooltip" title="" data-original-title="3 digits code on back side of the card">CVV <i className="fa fa-question-circle"></i></label>
                            <input
                                className="form-control text-monospace rounded-0"
                                ref={(e) => this.ccv = e!}
                                />
                        </div>
                    </div>
                </div>
            </div>

            <div className="row py-3">
                <Button
                    className="col-12 rounded-0"
                    color="secondary"
                    onClick={this.handleSubmit}>Reserve Now</Button>
            </div>
        </>
    }
}


export function getTPDirect(): Promise<any> {
    return new Promise((resolve, reject) => {
        if (typeof window.TPDirect !== 'undefined') {
            return resolve(window.TPDirect)
        } else {
            const script = window.document.createElement('script')
            script.src = "https://js.tappaysdk.com/tpdirect/v5.1.0"
            script.async = true
            script.onload = () => {
                if(typeof window.TPDirect !== 'undefined') {
                       resolve(window.TPDirect)
                } else {
                       reject(new Error('failed to load TapPay sdk')
                }
            }
            script.onerror = reject
            window.document.body.appendChild(script);
        }
    })
}

[Yu-Jack]

Hi @skyjur

Is there error log in develop console?

[skyjur]

I have figured this out.

It turns out my input elements need to be <div> not <input>.

[benben994]

I think it should be onUpdate instead of onUpdated?
But the official documentation says onUpdated.

[emil0519]

My solution is to place script tag of Tap pay to the head of DOM, rather than at the end of body.