Mark widget config "styles" property as required

[rossparachute]

Hey there,

Creating a new instance of Dojo.Payment() will throw an error if you don't pass styles.

Specifically, it was looking for a "form" prop on the config.styles object.
https://docs.dojo.tech/payments/accept-payments/components/configuration#config

Due to the server.js script being minified it's less clear what's missing and throwing the exception.

Could be worth making it clearer in the docs the styles prop is required.

Nabbing the default styles from the sample got things working again:
https://github.com/dojo-engineering/dojo-samples/tree/main/samples/accept-a-payment/prebuilt-checkout

Ross

---

Expected Behaviour
A fully functional Card Component widget is initialized.

Actual Behaviour
The Card Component widget is only partially setup and will fail when executePayment() is fired due to the exception throwing an error in the constructor.

Error thrown in:
https://web.e.connect.paymentsense.cloud/assets/js/server.js

(minified but it was about here in the Payment constructor)

...
**(i = O.call(this, e, r, "paymentDetails", t.form)).styles = t,**
i.textConfig = n,
i.billingAddressRequired = o,
i.cardNameValidator = new y.InputValidator(c.ErrorType.CardNameRequired,c.ErrorType.CardNameInvalid),
...

Exception thrown

server.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'form')
    at new T (server.js:1:22605)
    at e.value (server.js:1:134569)
    at e.value (server.js:1:133937)
    at server.js:1:133006
T @ server.js:1
value @ server.js:1
value @ server.js:1
(anonymous) @ server.js:1

Leading to:

server.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'executePayment')
    at e.value (server.js:1:135618)
    at e.value (server.js:1:134168)
    at server.js:1:133006
value @ server.js:1
value @ server.js:1
(anonymous) @ server.js:1

Reproducible Example
This fails (stripped down):

new window.Dojo.Payment({
    ...config,
    containerId: DOJO_CARD_CONTAINER_HTML_ID,
})

This succeeds:

new window.Dojo.Payment({
    ...config,
    containerId: DOJO_CARD_CONTAINER_HTML_ID,
    fontCss: ['https://fonts.googleapis.com/css?family=Do+Hyeon'],
    styles: { ...DefaultStyles }
})

Where DefaultStyles is shaped something like:
https://github.com/dojo-engineering/dojo-samples/blob/main/samples/accept-a-payment/prebuilt-checkout/client/react-cra/src/styles/DefaultStyles.js

[martinhay1]

Hi Ross,
Thank you for bringing this to our attention, and for your detailed and constructive feedback. We appreciate your help in improving the Dojo Payment user experience. I will liaise with the Docs team now and come back with some updates.
Thanks,
Martin

[RomanKondratyev]

Hey @rossparachute ,

Thank you for the feedback - we will address the issue.

@monica-m-ps please create a bug for this.

[rossparachute]

@martinhay1 @RomanKondratyev

Easy one to overlook if styles were always being passed.

Enjoyed working with the API and components besides that!

Cheers for the help,
Ross