How to disable or hide email in checkout.js in Stripe Payment
onStripeUpdate(e) {
this.stripehandler.open({
name: "",
description: "",
panelLabel: "Pay {{amount}}",
allowRememberMe: false,
email: "", //--->how to hide this email?
});
e.preventDefault();
}
It is not possible to disable the email field entirely. You can pass a value for the email configuration option, but it must be a valid email address. If it's a valid address, the field will be replaced by a static label with the value you provided.
If you don't provide the email option, or if you provide an invalid value (such as an empty string in your example code), then the email field will still be displayed.
Related
I have a problem with the email field, I want to block the user if his inputs include Exclamation mark in the email field. For example, if the user input consists of the Exclamation mark, the email field will show Email address cannot use exclamation mark
Below is my current code for email yup validation, currently just can to normally validate email format, but I am not sure how to block the exclamation mark in the below coding:
const validationSchema = Yup.object().shape({
email: Yup.string()
.email(
intl.formatMessage({
id: "10003",
})
)
.min(
3,
intl.formatMessage({
id: "AUTH.VALIDATION.MIN_LENGTH_FIELD",
}) + " 3"
)
.max(
50,
intl.formatMessage({
id: "AUTH.VALIDATION.MAX_LENGTH_FIELD",
}) + " 50"
)
.required(
intl.formatMessage({
id: "AUTH.VALIDATION.REQUIRED_FIELD",
})
),
});
Below is what I've tried, I tried to add the matches in the yup object, but it can not work:
.matches(
/^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})|([0-9]{10})+$/,
intl.formatMessage({
id: "AUTH.NOT_ALLOW_EXCLAMATION_MARK",
})
)
Sample result:
Another question: May I know still have which symbols not allowed user input in the email field except exclamation mark?
I hope someone can guide me on how to solve this problem. Thank you.
You can use /^[^not-allowed-characters-here]+$/ regex in yup to validating invalid characters. Add below code to your schema chain.
.matches(/^[^!]+$/, intl.formatMessage({
id: "AUTH.NOT_ALLOW_EXCLAMATION_MARK",
}))
If you want to prevent + in future for example, just include it there:
.matches(/^[^!+]+$/, intl.formatMessage({
id: "AUTH.NOT_ALLOW_EXCLAMATION_MARK",
}))
I've some question about PayPal merchant
If I understand correctly the payee inside PayPalButton is where you actually hand over the money to the merchant. So where for is the merchant-id in the PayPalScriptProvider options?
What would happen if I leave PayPalScriptProvider options merchant-id and only use the payee
I can use payee with email_address: 'MERCHANT_EMAIL' due to the paypal documentation. What is the equivalent for the PayPalScriptProvider options merchant-id.
Can every PayPal Account private / business use only email address as merchant-id (email_address) inside the payee object?
const initialOptions = {
'client-id': 'MY_CLIENT_ID'
'merchant-id': 'MERCHANT_ID',
// EMAIL only possible?
components: 'buttons',
'data-namespace': 'PayPalSDK',
currency: 'EUR',
intent: 'capture',
'enable-funding': ['sofort', 'giropay'],
'disable-funding': ['card', 'sepa'],
};
PayPalScriptProvider options={initialOptions}
Inside my PayPalButton:
payee: {
merchant_id: 'MERCHANT_ID'
//email_address: 'MERCHANT_EMAIL',
},
Set payee.email_address in the PayPalButton. Do not set merchant-id in the script options.
I have a text field and a check box field. I want to validate the check box only when the text field is blank.
My Specific Case: Check box field should be unchecked if the text box field is blank. In Other words: If user checks the check box field when the text box is blank the form should show an error.
How should I write the validation schema Yup Rule for the above issue. I tried conditional validation as shown in my code below, but it does not work.
The name of the text field is OtherEmail.
The name of the check box field is OtherBillem.
Here is my Code:
let initialValuesStepTwo = {
OtherEmail: '',
OtherBillem: false}
Validation Schema Code:
const validationSchemaStepTwo = Yup.object({
OtherEmail: Yup.string()
.email('Invalid email format')
.max(40, "Must be less than 40 characters"),
// Below Does not Work
OtherBillem: Yup.boolean().when('OtherEmail',{
is:(OtherEmail) => OtherEmail.length === 0,
then: Yup.boolean().oneOf([false], "Enter the email to check the box")})
//Also Below does not work
OtherBillem: Yup.string()
.when('OtherEmail', {
is: '',
then: (OtherBillem) => Yup.boolean().oneOf([false], "Enter Email to Check the box")
})
I'm having some issues with react-hook-form where after unregistering a field and keeping its current value, my form won't submit since all fields are validated when attempting to submit it.
My simplified user case is that my form has two field firstname and lastname with a buttom that will unregister/register lastname and another to submit the form. Please check the following codesanbox.
To reproduce the issue, click 'unregister lastName' than 'submit'.
Current result: Even thought lastName was unregistered, form isn't submitted since lastName has invalid values (was registered previously with required: true).
Expected resut: Form should be submited with: { firstName: "", lastName: "" }
My project has the following packages/versions: react (~16.13.1), react-dom (~16.13.1), react-hook-form (^7.2.2), react-scripts (~3.4.1)
with v7 you need to set
shouldUnregister: true //<== NEW
const { register, unregister, handleSubmit, formState, getValues } = useForm({
mode: "onChange",
defaultValues: {
firstName: "Random",
lastName: "Name"
},
shouldUnregister: true
});
See documentation: https://react-hook-form.com/api/useform
I'm having issues with Cypress loading the response body when I utilize the cy.request() command.
In our application, when a form is filled out and submitted, it POSTs, and the response body is the new page.
When I'm trying to do in Cypress is programmatically fill out the form. So I set up a cy.request() command, with the body filled with the form fields, which is the same as what happens when you fill it out manually. When I run the command, I can view the console and see that the correct body is being returned, but the new document page doesn't load. So I'm left just sitting on the old empty form page.
cy.request({
url: "company-webpage-form-url.com",
method: "POST",
form: true,
body: {
first_name: "first_name",
last_name: "last_name",
company_name: "company_name",
address1: "address1",
address2: "address2",
city: "city",
state: "NY",
zip: "13903",
country: "US",
phone_number: "607-555-5555",
phone_ext: "555",
fax_number: "fax_number",
fax_ext: "fax_ext",
email: "developer#company.com",
email_2: "developer#company.com",
user_data: "Continue"
}
});
All of the data is correct, and I get the correct response body, but I can only see it in the console. I have no idea how to get it to load, like it would when I submit the form. All I get right now is a 200 response, and the test ends.
I've tried visiting the next URL right after, but I get an error that the page for that URL doesn't exist. I've tried clicking the submit button after the POST, but that just results in an empty form being submitted, which causes a validation error.
I'm at a loss for how to get cypress to load the response body, which is in the form of a document (the new page). Anyone have any tips?
Edit: I should add that - the reason I am looking to fill the form from a POST is because the form is necessary to fill out for me to test whether certain options work or not. I have a single test that ensures the form fields and submission work as required, but for the 30+ options that need to be checked on the other side of this form, I wanted to follow Cypress' best practice of not manually filling the form every single time (they show an example with login on the website).
If you'd like to simulate a form POST navigating to a new page, you can use cy.visit() to do this! Just change your request to visit and it should work:
cy.visit({
url: "company-webpage-form-url.com",
method: "POST",
body: {
first_name: "first_name",
last_name: "last_name",
company_name: "company_name",
address1: "address1",
address2: "address2",
city: "city",
state: "NY",
zip: "13903",
country: "US",
phone_number: "607-555-5555",
phone_ext: "555",
fax_number: "fax_number",
fax_ext: "fax_ext",
email: "developer#company.com",
email_2: "developer#company.com",
user_data: "Continue"
}
});
cy.request() is intended to be used for accessing APIs to set up your tests, it does not interact with the application under test or the DOM at all.
If you want to test form submission, use cy.get(), cy.type(), and cy.click() to interact with the form like a real user would:
// fill out a form field
cy.get('input[name="first_name"]')
.type('first name here')
.get('input[name="last_name"]')
.type('last name here')
/** fill out more form fields **/
// simulate clicking submit
cy.get('input[type=submit]')
.click()