Shopify Checkout UI Extension Required Checkbox Validation

[musfiq11]

Greetings, Can anybody help me modify this code to make this checkout UI extension checkbox required and the checkout process is blocked until the checkbox is checked?

import {render, Checkbox} from '@shopify/checkout-ui-extensions-react';
render('Checkout::Dynamic::Render', () => <App />);
function App() {
  return (
    <Checkbox id="checkbox" name="checkbox">
      Save this information for next time
    </Checkbox>
  );
}

[BSS-Commerce]

Hi @musfiq11 

You can refer to similar issue here: https://community.shopify.com/c/shopify-design/custom-field-at-checkout/td-p/446610

I hope that this is useful for you.

[alexlopez127]

The link you provided is not for a similar question. this relates to the new extensions and the link provide the answer using the .liquid

It will be helpful if you could provide any proper link or accurate answer about how to do that. After reviewing the documentation I found that textFields have a required property while checkbox does not.

[a_zelinsky]

Hey @musfiq11, did you ever figure this out? I’m running into this issue now. 

[vhr333]

This should work

import {

reactExtension,

Checkbox,

Link,

useExtensionCapability,

useBuyerJourneyIntercept,

useApplyAttributeChange

} from "@shopify/ui-extensions-react/checkout";

import React, { useState } from "react";

// Set the entry point for the extension

export default reactExtension("purchase.checkout.payment-method-list.render-after", () => <App />);

function App() {

// Set up the app state

const [isChecked, setIsChecked] = useState(false);

const [validationError, setValidationError] = useState("");

const canBlockProgress = useExtensionCapability("block_progress");

const applyAttributeChange =

useApplyAttributeChange();

const handleCheckboxChange = () => {

setIsChecked(!isChecked);

applyAttributeChange({

key: 'requestedFreeGift',

type: 'updateAttribute',

value: isChecked ? true : false,

});

setValidationError("");

};

useBuyerJourneyIntercept(({ canBlockProgress }) => {

if (canBlockProgress && !isChecked) {

return {

behavior: "block",

reason: "Please indicate that you accept the Terms and Conditions",

perform: (result) => {

if (result.behavior === "block") {

setValidationError("Please indicate that you accept the Terms and Conditions");

}

},

};

}

return {

behavior: "allow",

perform: () => {

clearValidationErrors();

},

};

});

function clearValidationErrors() {

setValidationError("");

}

return (

<Checkbox value={isChecked}

onChange={handleCheckboxChange}

onInput={clearValidationErrors}

required={canBlockProgress}

error={validationError}>

I agree Terms and Conditions.

</Checkbox>

);

}




Note: In shopify.extension.toml file set 

[extensions.capabilities]

block_progress = true

[mudasir07]

thank you bor..
I am missing this thing 
[extensions.capabilities]

block_progress = true

[sowndharya]

 useBuyerJourneyIntercept hook is working on hover of the submit button. Problem is all other fields validations are working on click of the button.  Is there any fix for this?