Add a complete example of the styles object schema that can be passed to the Card component constructor

[rossparachute]

Hey @JoshTQ @taurelius-dojo,

Hope you're both well!

Do you have any example styles for the billing address fields?

Expected Behaviour
Docs with a more complete representation of the accepted styles schema for the Card component.

Actual Behaviour
Example styles in the repo only partially represent the accepted shape of the styles object. The additional billing/shipping address fields don't appear to be covered. The stylesConfig anchor link on the configuration doc doesn't appear to navigate to a complete example styles object.

https://docs.dojo.tech/payments/accept-payments/components/configuration#styles-config

Proposed Solution
A more complete use-case in the examples repo showing the full expected shape of the styles object. Typescript interfaces for this object is a nice-to-have.

---

Additional Info
By address fields we mean, the input fields added when the Card component config has the billingAddressRequired and shippingAddressRequired flags set to true.

Think there's meant to be a description of it in the docs:
https://docs.dojo.tech/payments/accept-payments/components/configuration#styles-config

Currently we base the DefaultStyles object that gets passed to the new Dojo.Payment() constructor args off of:
https://github.com/dojo-engineering/dojo-samples/tree/main/samples/accept-a-payment/prebuilt-checkout/client/react-cra/src/styles

Adding in the following lets us style the billing address title but targeting the inner fields doesn't seem to follow the container/default shape the other styles use. Just need the expected object shape and we'll style the rest.

billingAddress: {
    title: {
           fontFamily: "Roboto, sans-serif"
    }
}

Thanks for your efforts,
Ross

---

Full styles and example usage:

const styles = {
    base: {
        default: {
            '-webkit-appearance': 'none',
            '-moz-appearance': 'none',
            appearance: 'none',
            color: 'black',
            backgroundColor: '#fff',
            textDecoration: 'none',
            fontFamily: 'Roboto, sans-serif',
            boxSizing: 'border-box',
            boxShadow: 'none',
            fontSize: '16px',
            height: '48px',
            padding: '12px 16px',
            borderRadius: '4px',
            borderColor: 'black',
            lineHeight: '1.5',
            margin: '0',
            borderWidth: '1px',
            transition: 'border-color 0.5s cubic-bezier(0.35, 0, 0.25, 1)'
        },
        focus: {
            borderColor: 'black',
            borderWidth: '2px',
            outline: '0',
            boxShadow: 0
        },
        error: {
            borderColor: '#b0151f',
            borderWidth: '2px',
        },
        valid: {},
        label: {
            display: 'block',
            fontSize: '16px',
            lineHeight: '24px',
            marginBottom: '4px',
            color: 'rgba(0, 0, 0, 0.87)',
            fontFamily: 'Roboto, sans-serif'
        },
        validationText: {
            fontSize: '14px',
            lineHeight: '20px',
            fontWeight: '400',
            marginTop: '4px',
            fontFamily: 'Roboto, sans-serif'
        },
        validationIcon: {
            width: '16px',
            height: '18px',
            marginTop: '1px',
            marginRight: '8px',
            verticalAlign: 'top'
        }
    },
    form: {
        display: 'grid',
        'grid-template-rows': '108px 108px 108px',
        'grid-template-columns': '1fr 24px 1fr'
    },
    cardName: {
        container: {
            'grid-row': '1',
            'grid-column': '1/4'
        }
    },
    cv2: {
        container: {
            'grid-row': '3',
            'grid-column': '3'
        },
        default: {
            borderRadius: '4px'
        }
    },
    expiryDate: {
        container: {
            'grid-row': '3',
            'grid-column': '1'
        },

        default: {
            borderRadius: '4px'
        }
    },
    cardNumber: {
        container: {
            'grid-row': '2',
            'grid-column': '1/4'
        },
        default: {
            borderRadius: '4px'
        }
    },
    cardIcon: {
        bottom: '45px',
        height: '20px'
    },
    billingAddress: {
        'grid-row': '2',
        'grid-column': '1/4',
        
        container: {
            'grid-row': '2',
            'grid-column': '1/4'
        },
        default: {
            'grid-row': '2',
            'grid-column': '1/4'
        },
        title: {
            fontFamily: 'Roboto, sans-serif',
        },
    }
};

new Dojo.Payment({
    containerId: DOJO_CARD_CONTAINER_HTML_ID,
    paymentDetails: {
        paymentToken: clientSessionSecret,
    },
    buttonConfig: {
        color: 'black',
        type: 'plain'
    },
    emailRequired: true,
    billingAddressRequired: true,
    shippingAddressRequired: true,
    containerId: DOJO_CARD_CONTAINER_HTML_ID,
    fontCss: ['https://fonts.googleapis.com/css?family=Do+Hyeon'],
    styles: { ...DefaultStyles },
}, handleDisplayErrors, handleCardPaymentComplete)

[RomanKondratyev]

@rossparachute a small update, we are still looking at this.

[RomanKondratyev]

@rossparachute - if you could look at the documenation for the card component: https://docs.dojo.tech/payments/accept-payments/components/configuration. You could see that these config settings are not supported:

So in order to submit billing or shipping address, you would need to render the fields yourself and submit the data it via the https://docs.dojo.tech/payments/accept-payments/components/configuration#additional-information.

Now, the billingAddressRequired unofficially works, but we do not support it for Dojo components.
However, to style the title, you can do the following:

 billingAddress: {
    title: {
      display: "none",
    },