Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: show style options #5

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: show style options #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 39 additions & 1 deletion client/public/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,45 @@ paypal
paypal
.PaymentFields({
fundingSource: paypal.FUNDING.SOFORT,
style,
// style object is optional
style: {
// customize field attributes (optional)
variables: {
fontFamily: "'Helvetica Neue', Arial, sans-serif", // applies to all payment fields text
fontSizeBase: "0.9375rem", // applies to input, placeholder, and dropdown text values
fontSizeM: "0.93rem", // the payment fields title description
textColor: "#2c2e2f", // applies payment fields title description, input, and dropdown text
colorTextPlaceholder: "#2c2e2f", // applies to the placeholder text
colorBackground: "#fff", // background color of the input and dropdown fields
colorDanger: "#d20000", // applies to the invalid field border and validation text
borderRadius: "0.2rem", // for the input and dropdown fields
borderColor: "#dfe1e5", // for the input and dropdown fields
borderWidth: "1px", // for the input and dropdown fields
borderFocusColor: "black", // color for the invalid field border and validation text
spacingUnit: "10px", // spacing between multiple input fields
},

// set custom rules to apply to fields classes (optional)
// see https://www.w3schools.com/css/css_syntax.asp fore more on selectors and declarations
rules: {
".Input": {}, // overwrite properties for the input fields
".Input:hover": {}, // applies to the input field on mouse hover
".Input:focus": { // applies to the focused input field
color: 'blue',
boxShadow: '0px 2px 4px rgb(0 0 0 / 50%), 0px 1px 6px rgb(0 0 0 / 25%)',
},
".Input:active": {}, // applies when input fields are clicked
".Input--invalid": {}, // applies to input fields when invalid input is entered
".Label": {}, // overwrite properties for the input field labels
},
},

fields: {
// fields prefill info (optional)
name: {
value: "",
},
},
})
.render('#sofort-container')

Expand Down