search

thinhvo0108 / react-paypal-express-checkout

React component that renders Paypal's express check out button
MIT License
107 stars 71 forks source link

Can't style the button #24

Open pwhipp opened 6 years ago

pwhipp commented 6 years ago

If style parameter is used e.g:

<PaypalExpressBtn
                env={env}
                client={client}
                currency={'USD'}
                total={2.99}
                onError={onError}
                onSuccess={onSuccess}
                onCancel={onCancel}
                style={{
                  size: 'small',
                  color: 'gold',
                  shape: 'pill',
                  label: 'checkout: Just $2.99!'}}
                shipping="1"/>

An error occurs during rendering:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at validateButtonStyle (validate.js:64)
    at Object.validate (component.jsx:675)
    at callOriginal (util.js:312)
    at hacks.js:158
    at Object.obj.(:3000/anonymous function) [as validate] (https://www.paypalobjects.com/api/checkout.js:15586:28)
    at validateProp (validate.js:52)
    at validateProps (validate.js:113)
    at ParentComponent.setProps (index.js:422)
    at new ParentComponent (index.js:91)
    at Component.init (index.js:437)
    at _class.componentDidMount (react.js:78)
    at commitLifeCycles (react-dom.development.js:8770)
    at commitAllLifeCycles (react-dom.development.js:9946)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at commitRoot (react-dom.development.js:10050)
    at performWorkOnRoot (react-dom.development.js:11017)
    at performWork (react-dom.development.js:10967)
    at requestWork (react-dom.development.js:10878)
    at scheduleWorkImpl (react-dom.development.js:10732)
    at scheduleWork (react-dom.development.js:10689)
    at Object.enqueueSetState (react-dom.development.js:6212)
    at ScriptLoader../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:237)
    at index.js:132
    at index.js:78
    at utils.js:123
    at index.js:54
    at Array.forEach (<anonymous>)
    at index.js:53
    at HTMLScriptElement.<anonymous> (utils.js:19)
validateButtonStyle @ validate.js:64
validate @ component.jsx:675
callOriginal @ util.js:312
(anonymous) @ hacks.js:158
obj.(anonymous function) @ util.js:308
validateProp @ validate.js:52
validateProps @ validate.js:113
ParentComponent.setProps @ index.js:422
ParentComponent @ index.js:91
Component.init @ index.js:437
_class.componentDidMount @ react.js:78
commitLifeCycles @ react-dom.development.js:8770
commitAllLifeCycles @ react-dom.development.js:9946
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10050
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:237
(anonymous) @ index.js:132
(anonymous) @ index.js:78
(anonymous) @ utils.js:123
(anonymous) @ index.js:54
(anonymous) @ index.js:53
(anonymous) @ utils.js:19
load (async)
(anonymous) @ utils.js:18
(anonymous) @ index.js:52
iterator @ utils.js:108
(anonymous) @ utils.js:128
startLoadingScripts @ index.js:76
componentDidMount @ index.js:130
commitLifeCycles @ react-dom.development.js:8770
commitAllLifeCycles @ react-dom.development.js:9946
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10050
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:237
gameUpdate @ GameComponent.js:26
(anonymous) @ GameComponent.js:13
(anonymous) @ api.js:14
(anonymous) @ api.js:14
./node_modules/component-emitter/index.js.Emitter.emit @ index.js:133
./node_modules/socket.io-client/lib/socket.js.Socket.onevent @ socket.js:270
./node_modules/socket.io-client/lib/socket.js.Socket.onpacket @ socket.js:228
(anonymous) @ index.js:21
./node_modules/component-emitter/index.js.Emitter.emit @ index.js:133
./node_modules/socket.io-client/lib/manager.js.Manager.ondecoded @ manager.js:345
(anonymous) @ index.js:21
./node_modules/component-emitter/index.js.Emitter.emit @ index.js:133
./node_modules/socket.io-parser/index.js.Decoder.add @ index.js:242
./node_modules/socket.io-client/lib/manager.js.Manager.ondata @ manager.js:335
(anonymous) @ index.js:21
./node_modules/component-emitter/index.js.Emitter.emit @ index.js:133
./node_modules/engine.io-client/lib/socket.js.Socket.onPacket @ socket.js:456
(anonymous) @ socket.js:273
./node_modules/component-emitter/index.js.Emitter.emit @ index.js:133
./node_modules/engine.io-client/lib/transport.js.Transport.onPacket @ transport.js:145
./node_modules/engine.io-client/lib/transport.js.Transport.onData @ transport.js:137
ws.onmessage @ websocket.js:147
index.js:2178 The above error occurred in the <_class> component:
    in _class (created by PaypalButton)
    in div (created by PaypalButton)
    in PaypalButton (created by ScriptLoader)
    in ScriptLoader (at Home.js:41)
    in div (created by Col)
    in Col (at Home.js:38)
    in div (created by Row)
    in Row (at Home.js:37)
    in Donate (at Home.js:84)
    in div (created by Grid)
    in Grid (at Home.js:69)
    in Home (created by Route)
    in Route (at App.js:18)
    in Switch (at App.js:17)
    in div (at App.js:16)
    in Router (at App.js:15)
    in App (at index.js:7)
thinhvo0108 commented 6 years ago

Have you tried using 

               style={
                  size: 'small',
                  color: 'gold',
                  shape: 'pill',
                  label: 'checkout: Just $2.99!'}

Because this style props is an object with keys defined by Paypal Please check the docs: https://developer.paypal.com/docs/checkout/quick-start/ (the style part as their old docs link was kind of removed..)

ercgrat commented 4 years ago

The issue is the value of the label property in your example. That property doesn't accept free text, it's actually a predefined enum (e.g. paypal, checkout). See docs.

This works fine:

<PaypalExpressBtn
            env={env}
            client={client}
            currency={currency}
            total={props.total}
            onError={onError}
            onSuccess={onSuccess}
            onCancel={onCancel}
            style={{
                size: 'large',
                color: 'gold',
                label: 'paypal',
                shape: 'rect'
            }} />