I followed an article from Snipcart’s documentation on adding custom fields to the billing page (Order custom fields – Snipcart Documentation) to include a checkbox for users to accept the terms and conditions before placing an order. However, I encountered an issue where the HTML did not recognize certain Snipcart tags like billing, snipcart-label, and other related Snipcart tags.
Since I have been loading the Snipcart scripts and dynamically creating the Snipcart div programmatically (which has worked fine so far), I decided to also create the custom field for the terms and conditions checkbox programmatically.
private async InitializeSnipcart(): Promise {
//***************** Create Snipcart div if it doesn’t exist *******/
let snipcartDiv = this.document.getElementById(‘snipcart’);
if (!snipcartDiv) {
console.log("snipcartDiv: ", snipcartDiv);
snipcartDiv = this.renderer.createElement('div');
this.renderer.setProperty(snipcartDiv, 'id', 'snipcart');
this.renderer.setAttribute(snipcartDiv, 'hidden', 'true');
this.renderer.setAttribute(snipcartDiv, 'data-api-key', 'my API Key');
this.renderer.appendChild(this.document.body, snipcartDiv);
console.log("snipcartDiv: ", snipcartDiv);
//*************** Programmatically Insert Custom Fields ************/
if (snipcartDiv) {
console.log("now adding the custom fields");
this.addTermsCheckboxToCheckout(snipcartDiv!);
}
}
//*****************vinitializeSnipcartEvents ***************** */
this.initializeSnipcartEvents();
console.log(“snipcart loaded successfully”);
}
private addTermsCheckboxToCheckout(snipcartDiv: HTMLElement): void {
// Create the billing section container
const billingSection = this.renderer.createElement(‘billing’);
this.renderer.setAttribute(billingSection, ‘section’, ‘top’);
// Create a fieldset element to group the checkbox
const fieldset = this.renderer.createElement(‘fieldset’);
this.renderer.setAttribute(fieldset, ‘class’, ‘snipcart-form__set’);
// Create the terms and conditions checkbox container
const termsCheckboxDiv = this.renderer.createElement(‘div’);
this.renderer.setAttribute(termsCheckboxDiv, ‘class’, ‘snipcart-form__field’);
// Create the checkbox element for accepting terms
const termsCheckbox = this.renderer.createElement(‘snipcart-checkbox’);
this.renderer.setAttribute(termsCheckbox, ‘name’, ‘acceptTerms’);
// Create the label for the checkbox
const termsLabel = this.renderer.createElement(‘snipcart-label’);
this.renderer.setAttribute(termsLabel, ‘class’, ‘snipcart__font–tiny’);
this.renderer.setAttribute(termsLabel, ‘for’, ‘acceptTerms’);
this.renderer.setProperty(termsLabel, ‘innerHTML’, ‘I accept the Terms and Conditions.’);
// Append the checkbox and label to the terms checkbox div
this.renderer.appendChild(termsCheckboxDiv, termsCheckbox);
// this.renderer.appendChild(termsCheckboxDiv, termsLabel);
// Append the terms checkbox div to the fieldset
this.renderer.appendChild(fieldset, termsCheckboxDiv);
// Append the fieldset to the billing section
this.renderer.appendChild(billingSection, fieldset);
// Append the billing section to the snipcart div
this.renderer.appendChild(snipcartDiv, billingSection);
}
here is the created html element as per the console log:
Yet when I go to the checkout page I dont see the custom field
Any idea how to overcome this