[{"data":1,"prerenderedAt":1792},["ShallowReactive",2],{"header:help":3,"footer:default":63,"story:navigation\u002Fsearch:help":243,"story:help\u002Fcategories":281,"story:help\u002Fcategories\u002Fcustom-checkout-fields":307,"help:guides:3cb122dc-4180-4f38-bd81-4597e4c7dd46":334,"help:categories:3cb122dc-4180-4f38-bd81-4597e4c7dd46":335,"help:tree:3cb122dc-4180-4f38-bd81-4597e4c7dd46:default":336,"help:articles:3cb122dc-4180-4f38-bd81-4597e4c7dd46":364,"story:contact":1604,"_apollo:default":1791},{"name":4,"created_at":5,"published_at":6,"updated_at":7,"id":8,"uuid":9,"content":10,"slug":53,"full_slug":54,"sort_by_date":55,"position":56,"tag_list":57,"is_startpage":24,"parent_id":58,"meta_data":55,"group_id":59,"first_published_at":60,"release_id":55,"lang":61,"path":55,"alternates":62,"default_full_slug":55,"translated_slugs":55},"Help Center Header","2024-08-09T18:06:34.939Z","2026-07-30T21:52:27.962Z","2026-07-30T21:52:27.975Z",10082752,"3e9b88f7-c163-4657-a2f2-62532d600fad",{"_uid":11,"link":12,"badge":16,"items":17,"title":13,"buttons":45,"new_tab":24,"submenu":46,"subitems":47,"alignment":13,"component":48,"badge_link":49,"top_menu_items":52},"e5645a1a-f991-40e8-8d67-e40ebc082b5a",{"id":13,"url":13,"linktype":14,"fieldtype":15,"cached_url":13},"","story","multilink","Help Center",[18,27,34,39],{"_uid":19,"link":20,"title":23,"new_tab":24,"submenu":25,"component":26},"5cbe2861-1f49-4166-97da-a4dddd8105e3",{"id":21,"url":13,"linktype":14,"fieldtype":15,"cached_url":22},"4c0a2d99-ec30-4579-8ef1-6bf5564d4839","help\u002Fcategories\u002F","Articles",false,[],"header___item",{"_uid":28,"link":29,"title":32,"new_tab":33,"component":26},"8d7df70e-f087-4da0-b616-6f0e9a5af35c",{"id":13,"url":30,"linktype":31,"fieldtype":15,"cached_url":30},"https:\u002F\u002Fapi.foxycart.com\u002F","url","API Documentation",true,{"_uid":35,"link":36,"title":38,"new_tab":33,"component":26},"f76e7944-23d5-4652-87e4-cdae79272762",{"id":13,"url":37,"linktype":31,"fieldtype":15,"cached_url":37},"https:\u002F\u002Fstatus.foxy.io\u002F","System Status",{"_uid":40,"link":41,"title":44,"new_tab":24,"component":26},"0de16771-4c84-466c-a1da-d8568113c71f",{"id":42,"url":13,"linktype":14,"fieldtype":15,"cached_url":43},"01e4e370-f9b9-45af-8fa9-f15540699b0d","contact","Contact Us",[],[],[],"header",{"id":50,"url":13,"linktype":14,"fieldtype":15,"cached_url":51},"4a679eb7-662d-4ea4-a976-5a2acbf0b663","help\u002F",[],"help-header","navigation\u002Fhelp-header",null,20,[],10082747,"71b81c2e-5e09-48a1-a397-a3c72fcd344a","2022-09-21T14:50:25.655Z","default",[],{"name":64,"created_at":65,"published_at":66,"updated_at":67,"id":68,"uuid":69,"content":70,"slug":236,"full_slug":237,"sort_by_date":55,"position":238,"tag_list":239,"is_startpage":24,"parent_id":58,"meta_data":55,"group_id":240,"first_published_at":241,"release_id":55,"lang":61,"path":55,"alternates":242,"default_full_slug":55,"translated_slugs":55},"Default Footer","2024-08-09T18:06:59.024Z","2026-07-30T21:52:27.802Z","2026-07-30T21:52:27.816Z",10082753,"e59e67ac-248a-482f-84a1-53d4f318186a",{"_uid":71,"about":72,"logos":73,"socials":78,"sections":104,"component":218,"cta_title":219,"bottom_links":220,"cta_subtitle":234,"cta_button_link":235,"cta_button_text":179},"830983f5-c4c4-43c8-b150-86a5e3fa6dc8","Foxy’s hosted cart & payment page allow you to sell anything, using your existing website or platform.",[74],{"id":75,"alt":13,"name":13,"focus":13,"title":13,"filename":76,"copyright":13,"fieldtype":77},14760,"https:\u002F\u002Fa-us.storyblok.com\u002Ff\u002F1001040\u002Fx\u002F3b030847ec\u002Fb-corp.svg","asset",[79,86,92,98],{"_uid":80,"icon":81,"link":82,"name":84,"component":85},"faf0a618-ea94-42ea-9182-03be18c43216","fa-facebook",{"id":13,"url":83,"linktype":31,"fieldtype":15,"cached_url":83},"https:\u002F\u002Fwww.facebook.com\u002Ffoxycart","Facebook","footer___social",{"_uid":87,"icon":88,"link":89,"name":91,"component":85},"14309c18-7e79-423e-b375-34555bac0811","fa-instagram",{"id":13,"url":90,"linktype":31,"fieldtype":15,"cached_url":90},"https:\u002F\u002Fwww.instagram.com\u002Ffoxy_io","Instagram",{"_uid":93,"icon":94,"link":95,"name":97,"component":85},"8f7fe7cf-0dd3-4596-8334-226ea466716a","fa-linkedin",{"id":13,"url":96,"linktype":31,"fieldtype":15,"cached_url":96},"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Ffoxycart.com","LinkedIn",{"_uid":99,"icon":100,"link":101,"name":103,"component":85},"90a675b4-dd97-40b5-be09-00a87223d4c5","fa-youtube",{"id":13,"url":102,"linktype":31,"fieldtype":15,"cached_url":102},"https:\u002F\u002Fwww.youtube.com\u002Fuser\u002Ffoxycart","Youtube",[105,135,180,202],{"_uid":106,"name":107,"items":108,"component":134},"82849945-282f-488c-b18d-a8d2252f514a","Company",[109,116,122,128],{"_uid":110,"link":111,"title":114,"new_tab":24,"component":115},"1f699ab1-938b-4d9d-9825-aabcbe6f57fe",{"id":112,"url":13,"linktype":14,"fieldtype":15,"cached_url":113},"63634293-a749-4226-9439-9f38ee6dcda0","about-us","About Us","footer___menu_items",{"_uid":117,"link":118,"title":121,"new_tab":24,"component":115},"b26b00f1-a0e7-4be2-8ab3-428b8cc841f8",{"id":119,"url":13,"linktype":14,"fieldtype":15,"cached_url":120},"26cb7c55-faed-4a77-a291-1552d4111b3e","how-foxy-works","How Foxy Works",{"_uid":123,"link":124,"title":127,"new_tab":24,"component":115},"b40c68a0-1ceb-4226-9515-6176534f61fe",{"id":125,"url":13,"linktype":14,"fieldtype":15,"cached_url":126},"dc6657d7-7f4f-4c0d-b781-e971b038ee26","for-good","Foxy For Good",{"_uid":129,"link":130,"title":133,"new_tab":24,"component":115},"3ad0c134-bef9-4fff-b891-e09f16109036",{"id":131,"url":13,"linktype":14,"fieldtype":15,"cached_url":132},"23cae210-baf4-4588-9862-d09f4f52ccd2","brand-assets","Brand Assets","footer___section",{"_uid":136,"name":137,"items":138,"component":134},"a6805fa8-ac60-47f1-b8f0-f27aded0afbe","Product",[139,145,151,157,163,169,175],{"_uid":140,"link":141,"title":144,"new_tab":24,"component":115},"b39c8a4e-2383-486f-b76a-11fbb15d8134",{"id":142,"url":13,"linktype":14,"fieldtype":15,"cached_url":143},"bb04690f-fe98-4ce6-80be-05b950f2364f","features\u002F","Features",{"_uid":146,"link":147,"title":150,"new_tab":24,"component":115},"64f8a41f-c181-433d-bc0a-fc94e71ecbf6",{"id":148,"url":13,"linktype":14,"fieldtype":15,"cached_url":149},"c450c58d-761d-48c0-a9af-0b064611689b","pricing","Pricing",{"_uid":152,"link":153,"title":156,"new_tab":24,"component":115},"6e0b287f-fd8c-4146-9e0e-0ab0b5c9ce3c",{"id":154,"url":13,"linktype":14,"fieldtype":15,"cached_url":155},"fab20ad9-e76a-4947-b709-3a6fdfa88028","blog\u002Fcategories\u002Fproduct-updates","Product Updates",{"_uid":158,"link":159,"title":162,"new_tab":24,"component":115},"47e5a074-a6b5-4f1c-8c2f-89a2ae9f83eb",{"id":160,"url":13,"linktype":14,"fieldtype":15,"cached_url":161},"d2c83612-d611-47f3-a3b4-ca7fe08540b8","changelogs\u002F","Changelogs",{"_uid":164,"link":165,"title":168,"new_tab":24,"component":115},"b5c08774-542f-4ffd-b357-c94d674488b9",{"id":166,"url":13,"linktype":14,"fieldtype":15,"cached_url":167},"08876121-0df3-4ed9-aa11-902b3e41cd02","whats-next","What's Next",{"_uid":170,"link":171,"title":174,"new_tab":24,"component":115},"9c2704ed-6d9f-43e1-9e67-c8d91c083288",{"id":172,"url":13,"linktype":14,"fieldtype":15,"cached_url":173},"056a7857-b18f-4025-8f97-91a38fc19bc8","compare\u002F","Compare",{"_uid":176,"link":177,"title":179,"new_tab":24,"component":115},"5f2db35b-674b-406a-8fa7-d246633af9fe",{"id":13,"url":178,"linktype":31,"fieldtype":15,"cached_url":178},"https:\u002F\u002Fadmin.foxy.io\u002Fsign-up","Try Foxy Free",{"_uid":181,"name":182,"items":183,"component":134},"63fa1f29-4252-4640-9922-fe310e69e54a","Security",[184,190,196],{"_uid":185,"link":186,"title":189,"new_tab":24,"component":115},"1158ddb6-9eb0-466f-8eb6-7ca2ae66c8b8",{"id":187,"url":13,"linktype":14,"fieldtype":15,"cached_url":188},"1f58fb2c-8681-4742-b6e8-09999beae9f6","security-contact","Security Contact",{"_uid":191,"link":192,"title":195,"new_tab":24,"component":115},"9a79c54a-6022-4dfd-854b-766f5e4703ba",{"id":193,"url":13,"linktype":14,"fieldtype":15,"cached_url":194},"55cbfcc3-425a-4261-8037-54e919851d2d","pci","PCI Compliance",{"_uid":197,"link":198,"title":201,"new_tab":24,"component":115},"0b85f5b6-9534-4071-b323-b39d053dd4d7",{"id":199,"url":13,"linktype":14,"fieldtype":15,"cached_url":200},"c3ac0fe3-83e2-4879-afbd-d4c83e1590df","help\u002Farticles\u002Four-official-domains-public-code","Domains & Codebases",{"_uid":203,"name":204,"items":205,"component":134},"998ded67-d107-49f4-8154-ca6be51671ec","Support",[206,209,212,215],{"_uid":207,"link":208,"title":16,"new_tab":24,"component":115},"594ffd35-3049-4004-bb08-0db568ebd819",{"id":50,"url":13,"linktype":14,"fieldtype":15,"cached_url":51},{"_uid":210,"link":211,"title":32,"new_tab":33,"component":115},"61e0b7c8-aadf-419b-a339-b3ccabc65bf4",{"id":13,"url":30,"linktype":31,"fieldtype":15,"cached_url":30},{"_uid":213,"link":214,"title":38,"new_tab":33,"component":115},"fd67a89e-1c54-4d31-94b5-64be999062d6",{"id":13,"url":37,"linktype":31,"fieldtype":15,"cached_url":37},{"_uid":216,"link":217,"title":44,"new_tab":24,"component":115},"231a6f71-e996-4ad4-b033-d4d5542f34f0",{"id":42,"url":13,"linktype":14,"fieldtype":15,"cached_url":43},"footer","Get started with our *unlimited free trial*.",[221,228],{"_uid":222,"link":223,"text":226,"component":227},"f0b77210-2632-45a2-8436-e57cad84d01a",{"id":224,"url":13,"linktype":14,"fieldtype":15,"cached_url":225},"60ba16a2-c1f4-485f-b978-8d2eeeafbf5a","terms-of-service","Terms of Service","footer___bottom_links",{"_uid":229,"link":230,"text":233,"component":227},"4bd497b0-993f-4b4d-a5b7-8a49c7c8fec9",{"id":231,"url":13,"linktype":14,"fieldtype":15,"cached_url":232},"332302b9-1d18-4016-b9c8-9b33c72d782b","privacy-policy","Privacy Policy","No credit card required.",{"id":13,"url":178,"linktype":31,"fieldtype":15,"cached_url":178},"default-footer","navigation\u002Fdefault-footer",50,[],"11006268-07f9-41e9-96f3-c51fb723399d","2022-09-21T20:39:02.357Z",[],{"name":244,"created_at":245,"published_at":246,"updated_at":247,"id":248,"uuid":249,"content":250,"slug":272,"full_slug":275,"sort_by_date":55,"position":276,"tag_list":277,"is_startpage":24,"parent_id":58,"meta_data":55,"group_id":278,"first_published_at":279,"release_id":55,"lang":61,"path":55,"alternates":280,"default_full_slug":55,"translated_slugs":55},"Search","2024-10-21T22:08:54.973Z","2025-05-26T09:17:25.790Z","2025-05-26T09:17:25.804Z",13592003,"14cbc359-9ac1-4a7a-a8de-ad4ac8ef26d4",{"_uid":251,"name":244,"indices":252,"summary":13,"component":272,"primary_image":273},"5e4a56e8-76f1-4790-b3a7-70f1be97d042",[253,258,262,267],{"key":254,"_uid":255,"icon":13,"name":256,"component":257},"all","c12a3210-7323-4273-8217-5215e52efe84","All","index",{"key":259,"_uid":260,"icon":261,"name":23,"component":257},"help_center_article","5acff080-95e4-44d3-8dcf-1b19720af382","fa-file-alt",{"key":263,"_uid":264,"icon":265,"name":266,"component":257},"help_center_guide","b8fbc206-c083-471e-a1f0-0ebeb90a669d","fa-book","Guides",{"key":268,"_uid":269,"icon":270,"name":271,"component":257},"blog_post","23419e83-2e56-4c4c-8a05-9fd1b3c9a9bd","fa-file-image","Blog Posts","search",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":274},{},"navigation\u002Fsearch",60,[],"11e1fd31-95cd-4fc9-b736-8b8910663e6c","2024-10-21T23:17:05.904Z",[],{"name":23,"created_at":282,"published_at":283,"updated_at":284,"id":285,"uuid":21,"content":286,"slug":300,"full_slug":22,"sort_by_date":55,"position":301,"tag_list":302,"is_startpage":33,"parent_id":303,"meta_data":55,"group_id":304,"first_published_at":305,"release_id":55,"lang":61,"path":55,"alternates":306,"default_full_slug":55,"translated_slugs":55},"2022-09-19T14:42:29.685Z","2024-07-30T18:17:22.506Z","2024-07-30T18:17:22.525Z",2660,{"_uid":287,"icon":13,"name":23,"guides":288,"pinned":24,"summary":289,"category":13,"component":290,"blog_posts":291,"content_hub":24,"icon_custom":292,"case_studies":293,"faq_sections":294,"help_articles":295,"featured_guides":296,"mailbox_category":13,"featured_articles":297,"featured_blog_posts":298,"featured_case_studies":299},"d6dae89a-907a-4bf7-82de-fe2ba875ee6e",[],"Get your questions answered with our browsable knowledge base.","help_center_category",[],{"id":55,"alt":55,"name":13,"focus":55,"title":55,"filename":13,"copyright":55,"fieldtype":77},[],[],[],[],[],[],[],"categories",530,[],2658,"19ebcdd2-027f-47f5-9a5b-a8992c959578","2022-09-19T16:24:39.219Z",[],{"name":308,"created_at":309,"published_at":310,"updated_at":311,"id":312,"uuid":313,"content":314,"slug":328,"full_slug":329,"sort_by_date":55,"position":330,"tag_list":331,"is_startpage":24,"parent_id":303,"meta_data":55,"group_id":332,"first_published_at":310,"release_id":55,"lang":61,"path":55,"alternates":333,"default_full_slug":55,"translated_slugs":55},"Custom Checkout Fields","2026-07-02T20:09:31.264Z","2026-07-02T20:10:29.634Z","2026-07-02T20:10:29.643Z",193877488751878,"3cb122dc-4180-4f38-bd81-4597e4c7dd46",{"_uid":315,"icon":13,"name":308,"type":316,"pinned":24,"summary":317,"category":318,"component":290,"blog_posts":319,"icon_custom":320,"case_studies":322,"faq_sections":323,"featured_guides":324,"mailbox_category":13,"featured_articles":325,"featured_blog_posts":326,"featured_case_studies":327},"ce0f4c6a-abc9-4e6e-bf6e-74a6e0c769e8","simple","Add, validate, and manage custom input fields on your checkout, from simple text inputs to multilingual and sensitive fields.","60b73dc2-7635-487c-bd1f-fd7fba18ab4d",[],{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":321},{},[],[],[],[],[],[],"custom-checkout-fields","help\u002Fcategories\u002Fcustom-checkout-fields",-570,[],"0254bc69-c069-4130-866c-ac97b8f25471",[],[],[],[281,337],{"name":338,"created_at":339,"published_at":340,"updated_at":341,"id":342,"uuid":318,"content":343,"slug":357,"full_slug":358,"sort_by_date":55,"position":359,"tag_list":360,"is_startpage":24,"parent_id":303,"meta_data":55,"group_id":361,"first_published_at":362,"release_id":55,"lang":61,"path":55,"alternates":363,"default_full_slug":55,"translated_slugs":55},"Checkout","2024-11-06T19:56:29.907Z","2026-07-02T22:04:34.438Z","2026-07-02T22:04:34.451Z",14898631,{"_uid":344,"icon":13,"name":338,"type":316,"guides":345,"pinned":24,"summary":346,"category":13,"component":290,"blog_posts":347,"content_hub":24,"icon_custom":348,"case_studies":350,"faq_sections":351,"help_articles":352,"featured_guides":353,"mailbox_category":13,"featured_articles":354,"featured_blog_posts":355,"featured_case_studies":356},"0a484217-201f-4f60-a813-d8d8bda736e4",[],"How the checkout works, configuration options, customizations, and advanced integrations.",[],{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":349},{},[],[],[],[],[],[],[],"checkout","help\u002Fcategories\u002Fcheckout",0,[],"b3bfcd1f-8386-4ed8-9218-2f4c2989a1b2","2024-11-06T19:56:44.870Z",[],[365,659,772,818,997,1054,1153,1227,1306,1404,1511],{"name":366,"created_at":367,"published_at":368,"updated_at":369,"id":370,"uuid":371,"content":372,"slug":652,"full_slug":653,"sort_by_date":55,"position":654,"tag_list":655,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":657,"first_published_at":368,"release_id":55,"lang":61,"path":55,"alternates":658,"default_full_slug":55,"translated_slugs":55},"Add a date picker field to the checkout","2026-07-21T15:35:11.034Z","2026-07-22T17:45:01.827Z","2026-07-22T17:45:01.845Z",200534061245020,"9dbd3527-1a60-49cd-8a69-e8e7155afc47",{"_uid":373,"body":374,"name":366,"image":648,"pinned":24,"summary":650,"category":313,"component":259,"related_articles":651},"1872f96d-754e-41cc-9c46-95c9d1f57432",{"type":375,"content":376},"doc",[377,384,414,421,426,439,444,449,454,459,465,503,508,513,519,524,529,534,539,549,580,584,594,599,604,612,617,622,638,643],{"type":378,"attrs":379,"content":380},"paragraph",{"textAlign":55},[381],{"text":382,"type":383},"Quite often - it's necessary to capture a date from the customer on the checkout. This could be to allow the customer to specify a preferred delivery date - but there are a number of other uses you might have.","text",{"type":378,"attrs":385,"content":386},{"textAlign":55},[387,389,396,398,404,406,412],{"text":388,"type":383},"There are a plenty of different javascript date pickers available online. We're going to use ",{"text":390,"type":383,"marks":391},"jQuery UI's",[392],{"type":393,"attrs":394},"link",{"href":395,"uuid":55,"anchor":55,"target":55,"linktype":31},"http:\u002F\u002Fjqueryui.com\u002Fdatepicker\u002F",{"text":397,"type":383}," solution here, ",{"text":399,"type":383,"marks":400},"pickadate.js",[401],{"type":393,"attrs":402},{"href":403,"uuid":55,"anchor":55,"target":55,"linktype":31},"http:\u002F\u002Famsul.ca\u002Fpickadate.js\u002Fdate\u002F",{"text":405,"type":383}," could also be a good choice, ",{"text":407,"type":383,"marks":408},"mobiscroll",[409],{"type":393,"attrs":410},{"href":411,"uuid":55,"anchor":55,"target":55,"linktype":31},"https:\u002F\u002Fmobiscroll.com\u002Fdate-time-picker-calendar",{"text":413,"type":383}," is a great but paid option. You can ultimately use whichever date picker you prefer for your needs.",{"type":415,"attrs":416,"content":418},"heading",{"level":417,"textAlign":55},2,[419],{"text":420,"type":383},"Step 1: Add date picker assets",{"type":378,"attrs":422,"content":423},{"textAlign":55},[424],{"text":425,"type":383},"You'll first need to include the necessary assets from your datepicker library.",{"type":378,"attrs":427,"content":428},{"textAlign":55},[429,431,437],{"text":430,"type":383},"For the default example using jQuery UI, that includes a javascript and CSS file. We'll be using Google's CDN versions of the jQuery UI files, ",{"text":432,"type":383,"marks":433},"accessible from here",[434],{"type":393,"attrs":435},{"href":436,"uuid":55,"anchor":55,"target":55,"linktype":31},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Flibraries\u002F#jquery-ui",{"text":438,"type":383},". If you're using a different option, get the required javascript and CSS from their documentation.",{"type":378,"attrs":440,"content":441},{"textAlign":55},[442],{"text":443,"type":383},"To include it on your store, head to the \"configuration\" section of your store's Foxy administration. Look for the \"Add custom header and footer code to your templates\" option there, and include the javascript in the \"custom footer\" and CSS in the \"custom header\" textareas.",{"type":378,"attrs":445,"content":446},{"textAlign":55},[447],{"text":448,"type":383},"If you're already specifying a custom checkout template for your store - you can also directly include these assets in your custom checkout template.",{"type":415,"attrs":450,"content":451},{"level":417,"textAlign":55},[452],{"text":453,"type":383},"Step 2: Add custom checkout field",{"type":378,"attrs":455,"content":456},{"textAlign":55},[457],{"text":458,"type":383},"You'll also need to add in your custom field, which can also be achieved from the \"configuration\" section of your store's Foxy administration. Look for the \"Add custom form fields to your checkout\" option and paste the following HTML there. If your store is enabled for multiship - and you need to capture the date for each different address, include it within the \"custom multiship checkout fields\" textarea. Otherwise include it in the \"custom checkout fields\" textarea.",{"type":460,"attrs":461,"content":462},"code_block",{"class":55},[463],{"text":464,"type":383},"\u003Cdiv class=\"fc-form-group\">\n\t\u003Cdiv class=\"col-md-8 col-md-offset-3\" data-fc-error-for=\"date-select\" data-fc-error-class=\"fc-alert-container--error\">\n\t\t\u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active\">\n\t\t\t\u003Clabel class=\"fc-input-group-container__title fc-input-group-container__title--forced fc-form-label\">Shipping date\u003C\u002Flabel>\n\t\t\t\u003Cdiv class=\"fc-form-group date-select\">\n\t\t\t\t\u003Cinput class=\"fc-form-control\" placeholder=\"Select a date\" type=\"text\" id=\"date-select\" value=\"\" name=\"ship_date\" aria-required=\"true\" data-fc-required>\n\t\t\t\u003C\u002Fdiv>\n\t\t\u003C\u002Fdiv>\n\t\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"type":466,"content":467},"blockquote",[468],{"type":378,"attrs":469,"content":470},{"textAlign":55},[471,476,478,483,485,489,491,495,497,501],{"text":472,"type":383,"marks":473},"Tip:",[474],{"type":475},"bold",{"text":477,"type":383}," If you update the name of the input (above as ",{"text":479,"type":383,"marks":480},"ship_date",[481],{"type":482},"code",{"text":484,"type":383},"), you'll also need to update the Twig placeholder within the value to match. Also, avoid having the name start as ",{"text":486,"type":383,"marks":487},"shipping_",[488],{"type":482},{"text":490,"type":383},", ",{"text":492,"type":383,"marks":493},"billing_",[494],{"type":482},{"text":496,"type":383}," or ",{"text":498,"type":383,"marks":499},"shipto_",[500],{"type":482},{"text":502,"type":383}," as it will interfere with storing the value clientside.",{"type":415,"attrs":504,"content":505},{"level":417,"textAlign":55},[506],{"text":507,"type":383},"Step 3: Add javascript",{"type":378,"attrs":509,"content":510},{"textAlign":55},[511],{"text":512,"type":383},"Finally - you need to add some javascript to initialise the date picker library. This will happen within the same \"Add custom header and footer code to your templates\" option on the configuration section - but this time within the \"footer\" textarea.",{"type":415,"attrs":514,"content":516},{"level":515,"textAlign":55},3,[517],{"text":518,"type":383},"jQuery UI",{"type":378,"attrs":520,"content":521},{"textAlign":55},[522],{"text":523,"type":383},"If you included the date picker field within the \"custom checkout fields\" textarea in step 2, you will use javascript like this:",{"type":460,"attrs":525,"content":526},{"class":55},[527],{"text":528,"type":383},"{% if context == \"checkout\" %}\n\u003Cscript>\nFC.client.on(\"render.done\", initDatePicker);\n\nfunction initDatePicker() {\n    var date_params = {\n        minDate: 0,\n        onSelect: function() {\n            $(this).trigger('focusout.fc', {validateNow: true});\n        }\n    };\n    \n    $(\"#date-select\").datepicker(date_params);\n};\n\u003C\u002Fscript>\n{% endif %}",{"type":378,"attrs":530,"content":531},{"textAlign":55},[532],{"text":533,"type":383},"If you're running a multiship store and you included the datepicker field in the \"custom multiship checkout fields\" textarea, you'll use this javascript instead:",{"type":460,"attrs":535,"content":536},{"class":55},[537],{"text":538,"type":383},"{% if context == \"checkout\" %}\n\u003Cscript>\nFC.client.on(\"render.done\", initDatePicker);\n\nfunction initDatePicker() {\n    var date_params = {\n        minDate: 0,\n        onSelect: function() {\n            $(this).trigger('focusout.fc', {validateNow: true});\n        }\n    };\n\n    if (FC.json.has_multiship) {\n        for (var i = 0; i \u003C FC.json.multiship_data.length; i++) {\n            $(\"#shipto_custom_\" + i + \"_date-select']\").datepicker(date_params);\n        }\n    } else {\n        $(\"#date-select\").datepicker(date_params);\n    }\n};\n\u003C\u002Fscript>\n{% endif %}",{"type":466,"content":540},[541],{"type":378,"attrs":542,"content":543},{"textAlign":55},[544,547],{"text":472,"type":383,"marks":545},[546],{"type":475},{"text":548,"type":383}," You'll only use one of the above javascript blocks - depending on which approach you took in step 2.",{"type":378,"attrs":550,"content":551},{"textAlign":55},[552,554,558,560,564,566,570,572,578],{"text":553,"type":383},"In both the blocks above, a ",{"text":555,"type":383,"marks":556},"date_params",[557],{"type":482},{"text":559,"type":383}," object is created to set any custom properties for the date picker. Included in the code is a ",{"text":561,"type":383,"marks":562},"minDate",[563],{"type":482},{"text":565,"type":383}," property to restrict the picker to only dates in the future, and an ",{"text":567,"type":383,"marks":568},"onSelect",[569],{"type":482},{"text":571,"type":383}," event callback to ensure the selected rate is validated on the checkout. You can expand on that object with ",{"text":573,"type":383,"marks":574},"whatever settings you like",[575],{"type":393,"attrs":576},{"href":577,"uuid":55,"anchor":55,"target":55,"linktype":31},"http:\u002F\u002Fapi.jqueryui.com\u002Fdatepicker\u002F",{"text":579,"type":383},".",{"type":415,"attrs":581,"content":582},{"level":515,"textAlign":55},[583],{"text":399,"type":383},{"type":378,"attrs":585,"content":586},{"textAlign":55},[587,589,592],{"text":588,"type":383},"If you're using ",{"text":399,"type":383,"marks":590},[591],{"type":482},{"text":593,"type":383}," for your datepicker, here's an example of the javascript needed to incorporate it into the checkout:",{"type":460,"attrs":595,"content":596},{"class":55},[597],{"text":598,"type":383},"{% if context == \"checkout\" %}\n\u003Cscript>\n    FC.client.on(\"render.done\", initDatePicker);\n     \n    function initDatePicker() {\n        $('#date-select').pickadate({\n            min: true,\n            formatSubmit: 'yyyy-mm-dd',\n            hiddenName: true,\n            onSet: function (context) {\n                var date_input = (this.$node.attr(\"name\")) ? this.$node[0] : this._hidden;\n                FC.json[date_input.name] = date_input.value;\n                this.$node.trigger('focusout.fc', { validateNow: true });\n            }\n        });\n    };\n\u003C\u002Fscript>\n{% endif %}",{"type":415,"attrs":600,"content":601},{"level":515,"textAlign":55},[602],{"text":603,"type":383},"Mobiscroll",{"type":378,"attrs":605,"content":606},{"textAlign":55},[607,608,611],{"text":588,"type":383},{"text":603,"type":383,"marks":609},[610],{"type":482},{"text":593,"type":383},{"type":460,"attrs":613,"content":614},{"class":55},[615],{"text":616,"type":383},"{% if context == \"checkout\" %}\n\u003Cscript>\n    FC.client.on(\"ready.done\", initDatePicker);\n    FC.client.on(\"render.done\", function(params) {\n        if (['checkout', 'additional_fields'].includes(params.block_id)) {\n            initDatePicker();\n        }\n    });\n \n    function initDatePicker() {\n        $('#date-select').mobiscroll().datepicker({ \n            controls: ['date'],\n            min: new Date(),\n            onChange: function (event, inst) {\n                $(inst.props.element).trigger('focusout.fc', { validateNow: true });\n            }\n        });\n    };\n\u003C\u002Fscript>\n{% endif %}",{"type":415,"attrs":618,"content":619},{"level":515,"textAlign":55},[620],{"text":621,"type":383},"A Different Date Picker",{"type":378,"attrs":623,"content":624},{"textAlign":55},[625,627,631,633,636],{"text":626,"type":383},"If you're not using jQuery UI's datepicker, or one of the other options noted above, it should be fairly straight-forward for how you'd customise the relevant javascript there, but it'll basically revolve around updating the ",{"text":628,"type":383,"marks":629},"datepicker()",[630],{"type":482},{"text":632,"type":383}," function call(s). The jQuery UI example code above also includes a callback function for jQuery UI's ",{"text":567,"type":383,"marks":634},[635],{"type":482},{"text":637,"type":383}," event - because the way it handles it, it doesn't trigger the checkout's native validations to clear the error. Depending on the datepicker you use - you may need to also use a callback like that using their respective event that is run on select.",{"type":415,"attrs":639,"content":640},{"level":417,"textAlign":55},[641],{"text":642,"type":383},"Step 4: Test!",{"type":378,"attrs":644,"content":645},{"textAlign":55},[646],{"text":647,"type":383},"At this point - everything should be set up and ready to go! You should be able to now load up your checkout and test out the new field - making sure that it's working as you expect.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":649},{},"How to add a date picker field to the checkout to collect a date such as a preferred delivery date.",[],"add-a-date-picker-field-to-the-checkout","help\u002Farticles\u002Fadd-a-date-picker-field-to-the-checkout",-4130,[],2659,"5d0bf55d-9afc-4eec-b5a3-9d8f720659a3",[],{"name":660,"created_at":661,"published_at":662,"updated_at":663,"id":664,"uuid":665,"content":666,"slug":766,"full_slug":767,"sort_by_date":55,"position":768,"tag_list":769,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":770,"first_published_at":662,"release_id":55,"lang":61,"path":55,"alternates":771,"default_full_slug":55,"translated_slugs":55},"Add a dropdown with an \"other\" text option","2026-07-21T15:38:00.328Z","2026-07-22T17:45:01.523Z","2026-07-22T17:45:01.540Z",200534754673245,"9e6248ef-9dd6-4ccd-a4ed-4a2b04802da9",{"_uid":667,"body":668,"name":660,"image":762,"pinned":24,"summary":764,"category":313,"component":259,"related_articles":765},"0f282fbb-ab59-414b-8e0c-6abacd6895cd",{"type":375,"content":669},[670,675,680,685,690,695,700,705,710,721,752],{"type":378,"attrs":671,"content":672},{"textAlign":55},[673],{"text":674,"type":383},"The following snippet will display a dropdown list in the checkout, and will display an extra text box for “Other” input if “Other” is selected.",{"type":415,"attrs":676,"content":677},{"level":515,"textAlign":55},[678],{"text":679,"type":383},"Add javascript",{"type":378,"attrs":681,"content":682},{"textAlign":55},[683],{"text":684,"type":383},"On the Templates configuration page of your store's Foxy administration, under \"Cart\" look for \"Add custom header or footer code to your website\", check the box if not checked, and add this code into the \"Footer\" text area.",{"type":460,"attrs":686,"content":687},{"class":55},[688],{"text":689,"type":383},"{% if context == \"checkout\" %}\n\u003Cscript>\n$(\"body\").on(\"change\", \"#referral_source\", function() {\n    setTimeout(FC.checkout.renderAdditionalFields, 500);\n});\n\u003C\u002Fscript>\n{% endif %}",{"type":415,"attrs":691,"content":692},{"level":515,"textAlign":55},[693],{"text":694,"type":383},"Add HTML",{"type":378,"attrs":696,"content":697},{"textAlign":55},[698],{"text":699,"type":383},"Next, and still on the configuration page, under \"Checkout\" look for \"Add custom form fields to your checkout\", enable it, and paste the following into the text box within:",{"type":460,"attrs":701,"content":702},{"class":55},[703],{"text":704,"type":383},"\u003Cdiv class=\"fc-form-group \">\n    \u003Cdiv class=\"col-md-8 col-md-offset-3\" data-fc-error-for=\"referral_source\" data-fc-error-class=\"fc-alert-container--error\">\n        \u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active\">\n            \u003Clabel class=\"fc-input-group-container__title fc-input-group-container__title--forced fc-form-label\">\n                How did you find Us?… (required)\n            \u003C\u002Flabel>\n            \u003Cdiv class=\"fc-form-group\">\n                \u003Cp>Referred by?\u003C\u002Fp>\n                    \u003Cselect name=\"referral_source\" id=\"referral_source\" class=\"fc-form-control\" aria-required=\"true\" data-fc-required >\n                    \u003Coption value=\"Google\" {% if referral_source == \"Google\" %}selected{% endif %}>Google\u003C\u002Foption>\n                    \u003Coption value=\"Yahoo\" {% if referral_source == \"Yahoo\" %}selected{% endif %}>Yahoo\u003C\u002Foption>\n                    \u003Coption value=\"Bing\" {% if referral_source == \"Bing\" %}selected{% endif %}>Bing\u003C\u002Foption>\n                    \u003Coption value=\"Facebook\" {% if referral_source == \"Facebook\" %}selected{% endif %}>Facebook\u003C\u002Foption>\n                    \u003Coption value=\"Instagram\" {% if referral_source == \" Instagram \" %}selected{% endif %}> Instagram \u003C\u002Foption>\n                    \u003Coption value=\"Twitter\" {% if referral_source == \" Twitter\" %}selected{% endif %}> Twitter\u003C\u002Foption>\n                    \u003Coption value=\"Friend\" {% if referral_source == \"Friend\" %}selected{% endif %}>Friend\u003C\u002Foption>\n                    \u003Coption value=\"Amazon\" {% if referral_source == \"Amazon\" %}selected{% endif %}>Amazon\u003C\u002Foption>\n                    \u003Coption value=\"Email\" {% if referral_source == \"Email\" %}selected{% endif %}>Email\u003C\u002Foption>\n                    \u003Coption value=\"Returning Customer\" {% if referral_source == \"Returning Customer\" %}selected{% endif %}>Returning Customer\u003C\u002Foption>\n                    \u003Coption value=\"Other\" {% if referral_source == \"Other\" %}selected{% endif %}>Other\u003C\u002Foption>\n                    \u003C\u002Fselect>\n            \u003C\u002Fdiv>\n            {% if referral_source == \"Other\" %}\n                \u003Cdiv class=\"fc-form-group\">\n                    \u003Cinput type=\"text\"\n                    id=\"other_text\"\n                    name=\"other_text\"\n                    placeholder=\"Please enter 'Other'\"\n                    class=\"fc-form-control fc-form-control--new-customer-password\"\n                    data-fc-required\n                    value=\"\"\n                    \u002F>\n                \u003C\u002Fdiv>\n            {% endif %}\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"type":415,"attrs":706,"content":707},{"level":515,"textAlign":55},[708],{"text":709,"type":383},"Customize",{"type":378,"attrs":711,"content":712},{"textAlign":55},[713,715,719],{"text":714,"type":383},"You can customize some information to fit your needs. You can change ",{"text":716,"type":383,"marks":717},"referral_source",[718],{"type":482},{"text":720,"type":383}," wherever you see it to something more appropriate for your needs. Make sure you change it everywhere, including on the Javascript above.",{"type":378,"attrs":722,"content":723},{"textAlign":55},[724,726,730,732,736,738,742,744,750],{"text":725,"type":383},"You can also change \"How did you find Us?… (required)\" and \"Referred by?\" to suit your needs. Option values can also be changed, but you'll need to make sure you change them to match in the following Twig \"if\" statement and within the ",{"text":727,"type":383,"marks":728},"\u003Coption>",[729],{"type":482},{"text":731,"type":383}," and ",{"text":733,"type":383,"marks":734},"\u003C\u002Foption>",[735],{"type":482},{"text":737,"type":383}," tags that displays the option to the customer. We don't recommend changing anything on the ",{"text":739,"type":383,"marks":740},"other",[741],{"type":482},{"text":743,"type":383}," option unless you fully understand the snippet. You can feel free to ",{"text":745,"type":383,"marks":746},"contact us",[747],{"type":393,"attrs":748},{"href":749,"uuid":55,"anchor":55,"target":55,"linktype":31},"https:\u002F\u002Ffoxy.io\u002Fcontact",{"text":751,"type":383}," for additional help.",{"type":378,"attrs":753,"content":754},{"textAlign":55},[755,757,761],{"text":756,"type":383},"This snippet sets the field to be required. If you don't want it to be required and need help changing that, please ",{"text":745,"type":383,"marks":758},[759],{"type":393,"attrs":760},{"href":749,"uuid":55,"anchor":55,"target":55,"linktype":31},{"text":579,"type":383},{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":763},{},"How to add a checkout dropdown that shows a text box when the customer selects Other.",[],"add-a-dropdown-with-an-other-text-option","help\u002Farticles\u002Fadd-a-dropdown-with-an-other-text-option",-4140,[],"525d9c17-3d37-4ad6-b826-48d731b8e6f5",[],{"name":773,"created_at":774,"published_at":775,"updated_at":776,"id":777,"uuid":778,"content":779,"slug":812,"full_slug":813,"sort_by_date":55,"position":814,"tag_list":815,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":816,"first_published_at":775,"release_id":55,"lang":61,"path":55,"alternates":817,"default_full_slug":55,"translated_slugs":55},"Add a gift wrapping checkbox to the checkout","2026-07-21T15:43:33.102Z","2026-07-22T17:45:01.272Z","2026-07-22T17:45:01.288Z",200536117723762,"379bc35f-15bc-41b0-8364-1afd3499d441",{"_uid":780,"body":781,"name":773,"image":808,"pinned":24,"summary":810,"category":313,"component":259,"related_articles":811},"23643b51-bb2d-4a97-965d-b22697af838f",{"type":375,"content":782},[783,788,793,798,803],{"type":378,"attrs":784,"content":785},{"textAlign":55},[786],{"text":787,"type":383},"Paste the chunk of code below into the Settings -> checkout  -> custom checkout fields.",{"type":460,"attrs":789,"content":790},{"class":55},[791],{"text":792,"type":383},"{% if gift_wrapping is not defined %}\n    {% set gift_wrapping = false %}\n    {% for item in items %}\n        {% if item.code == \"giftwrapping\" %}\n            {% set gift_wrapping = true %}\n        {% endif %}\n    {% endfor %}\n{% endif %}\n\u003Cdiv class=\"fc-form-group\">\n    \u003Cdiv class=\"fc-checkout__additional-field--tos fc-checkout__additional-field--gift-wrapping\" data-fc-error-for=\"gift_wrapping\" data-fc-error-class=\"fc-alert-container--error\">\n        \u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox\">\n            \u003Clabel class=\"fc-input-group-container__title fc-form-label fc-form-label--gift_wrapping\">\n                \u003Cinput type=\"checkbox\"\n                    id=\"gift_wrapping\"\n                    name=\"gift_wrapping\"\n                    value=\"Yes, please wrap my order\"\n                    class=\"fc-form-control fc-form-control--gift_wrapping\"\n                    {% if gift_wrapping %}checked{% endif %}\n                     \u002F>\n                Please gift wrap my order for $10.\n            \u003C\u002Flabel>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"type":378,"attrs":794,"content":795},{"textAlign":55},[796],{"text":797,"type":383},"Also on the configuration section of the administration, paste the following code into the \"footer\" textarea of the \"Add custom header and footer code to your templates\" option.",{"type":378,"attrs":799,"content":800},{"textAlign":55},[801],{"text":802,"type":383},"You'll just need to modify the \"MODIFY THE PRODUCT LINK BELOW\" section to set the gift wrapping \"product\" as desired. If your store is using link\u002Fform signing, you'll just need to create that link and sign it (using the tool in the \"sample code\" section of the admin, if you don't have another way) and paste it in there as needed. Make sure it's set to the appropriate category so it has the proper shipping and taxes applied to it.",{"type":460,"attrs":804,"content":805},{"class":55},[806],{"text":807,"type":383},"\u003Cstyle type=\"text\u002Fcss\">\n\t[data-item-code=\"giftwrapping\"] .fc-cart__item__quantity {\n\t\tdisplay:none;\n\t}\n\u003C\u002Fstyle>\n\u003Cscript type=\"text\u002Fjavascript\">\n$('body').on('change', '#gift_wrapping', function(){\n\t\u002F\u002F The FC.client.request() gets new JSON which clears out the shipping.\n\t\u002F\u002F TODO: This will be fixed by Foxy, but for now we have a shim.\n\tvar shipping_results = FC.json.shipping_address.shipping_results,\n\t\tshipping_service_description = FC.json.shipping_address.shipping_service_description,\n\t\tshipping_service_id = FC.json.shipping_address.shipping_service_id;\n\n\tvar giftwrapping_id;\n\tfor (i=0; i \u003C FC.json.items.length; i++) {\n\t\tif (FC.json.items[i].code == 'giftwrapping') {\n\t\t\tgiftwrapping_id = FC.json.items[i].id;\n\t\t}\n\t}\n\n\tif ($(this).is(':checked')) {\n\t\tFC.json.gift_wrapping = true;\n\t\tif (!giftwrapping_id) {\n\t\t\t\u002F\u002F MODIFY THE PRODUCT LINK BELOW\n\t\t\tFC.client.request('https:\u002F\u002F'+FC.settings.storedomain+'\u002Fcart?name=Gift+Wrapping&price=10&code=giftwrapping&quantity_max=1').done(function(dataJSON) {\n\t\t\t\tFC.json.gift_wrapping = true;\n\t\t\t\tFC.json.shipping_address.shipping_results = shipping_results;\n\t\t\t\tFC.json.shipping_address.shipping_service_description = shipping_service_description;\n\t\t\t\tFC.json.shipping_address.shipping_service_id = shipping_service_id;\n\t\t\t\tFC.checkout.render();\n\t\t\t\tFC.checkout.getShippingOptions({address: FC.json.shipping_address});\n\t\t\t});\n\t\t}\n\t} else {\n\t\tFC.json.gift_wrapping = false;\n\t\tif (giftwrapping_id) {\n\t\t\tFC.client.request('https:\u002F\u002F'+FC.settings.storedomain+'\u002Fcart?cart=update&quantity=0&id='+giftwrapping_id).done(function(){\n\t\t\t\tFC.json.gift_wrapping = false;\n\t\t\t\tFC.json.shipping_address.shipping_results = shipping_results;\n\t\t\t\tFC.json.shipping_address.shipping_service_description = shipping_service_description;\n\t\t\t\tFC.json.shipping_address.shipping_service_id = shipping_service_id;\n\t\t\t\tFC.checkout.render();\n\t\t\t\tFC.checkout.getShippingOptions({address: FC.json.shipping_address});\n\t\t\t});\n\t\t}\n\t}\n});\n\u003C\u002Fscript>",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":809},{},"How to add a gift wrapping checkbox or other add on item to the checkout.",[],"add-a-gift-wrapping-checkbox-to-the-checkout","help\u002Farticles\u002Fadd-a-gift-wrapping-checkbox-to-the-checkout",-4160,[],"b2d6aa00-a1a8-44e3-b2c8-2dcdd42f3498",[],{"name":819,"created_at":820,"published_at":821,"updated_at":822,"id":823,"uuid":824,"content":825,"slug":991,"full_slug":992,"sort_by_date":55,"position":993,"tag_list":994,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":995,"first_published_at":821,"release_id":55,"lang":61,"path":55,"alternates":996,"default_full_slug":55,"translated_slugs":55},"Add custom fields to your checkout","2026-07-03T01:39:31.177Z","2026-07-03T01:42:28.476Z","2026-07-03T01:42:28.491Z",193958589186990,"44d509a3-cd81-4a02-935e-21725cfcc6bb",{"_uid":826,"body":827,"name":819,"image":987,"pinned":24,"summary":989,"category":313,"component":259,"related_articles":990},"17159ddf-bf00-46ad-94fc-94ac1c251fd2",{"type":375,"content":828},[829,834,839,844,889,894,899,904,909,914,919,924,929,934,939,944],{"type":378,"attrs":830,"content":831},{"textAlign":55},[832],{"text":833,"type":383},"You can add extra input fields to the checkout — such as a terms of service checkbox, a referral source field, or an order notes box — using built-in configuration options or custom HTML.",{"type":415,"attrs":835,"content":836},{"level":417,"textAlign":55},[837],{"text":838,"type":383},"Steps",{"type":378,"attrs":840,"content":841},{"textAlign":55},[842],{"text":843,"type":383},"For common fields like a terms of service agreement or a newsletter opt-in, use the built-in options in your template configuration:",{"type":845,"attrs":846,"content":848},"ordered_list",{"order":847},1,[849,864,882],{"type":850,"content":851},"list_item",[852],{"type":378,"attrs":853,"content":854},{"textAlign":55},[855,857,863],{"text":856,"type":383},"Go to the ",{"text":858,"type":383,"marks":859},"Foxy admin",[860],{"type":393,"attrs":861},{"href":862,"uuid":55,"anchor":55,"target":55,"linktype":31},"https:\u002F\u002Fadmin.foxy.io",{"text":579,"type":383},{"type":850,"content":865},[866],{"type":378,"attrs":867,"content":868},{"textAlign":55},[869,871,875,877,881],{"text":870,"type":383},"Go to ",{"text":872,"type":383,"marks":873},"Templates",[874],{"type":475},{"text":876,"type":383}," > ",{"text":878,"type":383,"marks":879},"Configuration",[880],{"type":475},{"text":579,"type":383},{"type":850,"content":883},[884],{"type":378,"attrs":885,"content":886},{"textAlign":55},[887],{"text":888,"type":383},"Enable “Display a Terms of Service agreement to customers” or “Allow users to sign up for your newsletter,” depending on which field you need.",{"type":378,"attrs":890,"content":891},{"textAlign":55},[892],{"text":893,"type":383},"For any other custom field, use the “Add custom form fields to your checkout” option and paste your HTML into the custom checkout fields textarea.",{"type":415,"attrs":895,"content":896},{"level":515,"textAlign":55},[897],{"text":898,"type":383},"Text input example",{"type":460,"attrs":900,"content":901},{"class":55},[902],{"text":903,"type":383},"\u003Cdiv class=\"fc-form-group \">\n  \u003Cdiv class=\"col-sm-8 col-sm-offset-3\" data-fc-error-for=\"referral_source\" data-fc-error-class=\"fc-alert-container--error\">\n    \u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active\">\n      \u003Clabel class=\"fc-input-group-container__title fc-input-group-container__title--forced fc-form-label\">\n        Referred by… (required)\n      \u003C\u002Flabel>\n      \u003Cdiv class=\"fc-form-group\">\n        \u003Cp>Please let us know who referred you.\u003C\u002Fp>\n        \u003Cinput type=\"text\" id=\"referral_source\" name=\"referral_source\" placeholder=\"\" autocomplete=\"off\" class=\"fc-form-control\" formnovalidate=\"\" aria-required=\"true\" value=\"{{ referral_source }}\" data-fc-required>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",{"type":415,"attrs":905,"content":906},{"level":515,"textAlign":55},[907],{"text":908,"type":383},"Dropdown example",{"type":460,"attrs":910,"content":911},{"class":55},[912],{"text":913,"type":383},"{% set options = [\"Social Media\", \"Advertising\", \"Online Search\", \"Word Of Mouth\", \"Other\"] %}\n\u003Cdiv class=\"fc-form-group \">\n  \u003Cdiv class=\"col-sm-8 col-sm-offset-3\" data-fc-error-for=\"referral_source\" data-fc-error-class=\"fc-alert-container--error\">\n    \u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active\">\n      \u003Clabel class=\"fc-input-group-container__title fc-input-group-container__title--forced fc-form-label\">\n        Referred by… (required)\n      \u003C\u002Flabel>\n      \u003Cdiv class=\"fc-form-group\">\n        \u003Cp>How did you hear about us?\u003C\u002Fp>\n        \u003Cselect name=\"referral_source\" id=\"referral_source\" class=\"fc-form-control\" aria-required=\"true\" data-fc-required>\n          \u003Coption value=\"\">Please select\u003C\u002Foption>\n          {% for option in options %}\n          \u003Coption value=\"{{ option }}\" {% if referral_source == option %}selected{% endif %}>{{ option }}\u003C\u002Foption>\n          {% endfor %}\n        \u003C\u002Fselect>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",{"type":415,"attrs":915,"content":916},{"level":515,"textAlign":55},[917],{"text":918,"type":383},"Radio input example",{"type":460,"attrs":920,"content":921},{"class":55},[922],{"text":923,"type":383},"{% set options = {\"Monday\": \"Monday - First Delivery\", \"Wednesday\": \"Wednesday - Second Delivery\", \"Friday\": \"Friday - Third Delivery\"} %}\n\u003Cdiv class=\"fc-form-group \">\n  \u003Cdiv class=\"col-sm-8 col-sm-offset-3\" data-fc-error-for=\"{% for option in options %}Delivery_{{ loop.index }} {% endfor %}\" data-fc-error-class=\"fc-alert-container--error\">\n    \u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active\">\n      \u003Clabel class=\"fc-input-group-container__title fc-input-group-container__title--forced fc-form-label\">\n        Delivery Day (required)\n      \u003C\u002Flabel>\n      \u003Cdiv class=\"fc-form-group\">\n        \u003Cp>What day would you like to receive your delivery?\u003C\u002Fp>\n        {% for option, label in options %}\n        \u003Cdiv class=\"fc-input-group-container--radio\">\n          \u003Clabel class=\"fc-form-label\" for=\"Delivery_{{ loop.index }}\">\u003Cinput class=\"fc-form-control\" type=\"radio\" name=\"Delivery\" value=\"{{ option }}\" id=\"Delivery_{{ loop.index }}\" {% if Delivery == option %}checked{% endif %} aria-required=\"true\" data-fc-required \u002F> {{ label }}\u003C\u002Flabel>\n        \u003C\u002Fdiv>\n        {% endfor %}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",{"type":415,"attrs":925,"content":926},{"level":515,"textAlign":55},[927],{"text":928,"type":383},"Checkbox example",{"type":378,"attrs":930,"content":931},{"textAlign":55},[932],{"text":933,"type":383},"A standalone optional checkbox needs a hidden input with the same name, so a value is always passed with the transaction even if the box is left unchecked:",{"type":460,"attrs":935,"content":936},{"class":55},[937],{"text":938,"type":383},"\u003Cdiv class=\"fc-form-group\">\n  \u003Cdiv class=\"col-sm-8 col-sm-offset-3 fc-checkout__additional-field--custom-checkbox\">\n    \u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox\">\n      \u003Clabel class=\"fc-input-group-container__title fc-form-label fc-form-label--custom-checkbox\">\n        \u003Cinput type=\"hidden\" name=\"my_custom_checkbox\" value=\"0\" \u002F>\n        \u003Cinput type=\"checkbox\" id=\"my_custom_checkbox\" name=\"my_custom_checkbox\" value=\"1\" class=\"fc-form-control fc-form-control--custom-checkbox\" {{ checked(my_custom_checkbox == '1') }} \u002F>\n        My Checkbox Label\n      \u003C\u002Flabel>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",{"type":415,"attrs":940,"content":941},{"level":417,"textAlign":55},[942],{"text":943,"type":383},"Notes",{"type":945,"content":946},"bullet_list",[947,960,973,980],{"type":850,"content":948},[949],{"type":378,"attrs":950,"content":951},{"textAlign":55},[952,954,958],{"text":953,"type":383},"Name your fields using underscores instead of spaces, and capitalize them the way you want them displayed — for example, ",{"text":955,"type":383,"marks":956},"Update_List",[957],{"type":482},{"text":959,"type":383}," appears as “Update List” on receipts and in email receipts.",{"type":850,"content":961},[962],{"type":378,"attrs":963,"content":964},{"textAlign":55},[965,967,971],{"text":966,"type":383},"Add ",{"text":968,"type":383,"marks":969},"data-fc-required",[970],{"type":482},{"text":972,"type":383}," to any field’s input element to make it required on the checkout.",{"type":850,"content":974},[975],{"type":378,"attrs":976,"content":977},{"textAlign":55},[978],{"text":979,"type":383},"Custom fields appear at the bottom of the receipt, in emails that include the receipt placeholder, and in all API responses and the XML datafeed.",{"type":850,"content":981},[982],{"type":378,"attrs":983,"content":984},{"textAlign":55},[985],{"text":986,"type":383},"Checkboxes don’t post any value if left unchecked — this is standard HTML form behavior, but it matters if you’re relying on a custom field in your XML datafeed.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":988},{},"How to add custom text, dropdown, radio, and checkbox fields to your checkout using HTML.",[],"add-custom-fields-to-your-checkout","help\u002Farticles\u002Fadd-custom-fields-to-your-checkout",-2920,[],"7ab7a5b1-5cec-403f-a2b9-be1a6089b089",[],{"name":998,"created_at":999,"published_at":1000,"updated_at":1001,"id":1002,"uuid":1003,"content":1004,"slug":1047,"full_slug":1048,"sort_by_date":55,"position":1049,"tag_list":1050,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":1051,"first_published_at":1052,"release_id":55,"lang":61,"path":55,"alternates":1053,"default_full_slug":55,"translated_slugs":55},"Custom checkout fields overview","2026-07-02T20:59:58.130Z","2026-07-02T23:52:36.685Z","2026-07-02T23:52:36.699Z",193889886791323,"1a8b0e55-a579-4c16-aefe-0d28d77530a0",{"_uid":1005,"body":1006,"name":998,"image":1043,"pinned":33,"summary":1045,"category":313,"component":259,"related_articles":1046},"f398fd23-f5bb-487d-8598-e4f60447e1ee",{"type":375,"content":1007},[1008,1013,1018,1023,1027],{"type":378,"attrs":1009,"content":1010},{"textAlign":55},[1011],{"text":1012,"type":383},"Custom checkout fields let you collect information beyond Foxy’s standard billing and shipping fields — things like a terms of service agreement, a newsletter opt-in, a referral source, a gift note, or a date of birth.",{"type":415,"attrs":1014,"content":1015},{"level":417,"textAlign":55},[1016],{"text":1017,"type":383},"Two ways to add a field",{"type":378,"attrs":1019,"content":1020},{"textAlign":55},[1021],{"text":1022,"type":383},"Some common fields are built into your store’s configuration and can be turned on without writing any code — a terms of service checkbox and a newsletter opt-in both work this way. For anything else, you write the field’s HTML yourself and add it through the “Add custom form fields to your checkout” configuration option, or by editing the checkout template directly for more advanced cases.",{"type":415,"attrs":1024,"content":1025},{"level":417,"textAlign":55},[1026],{"text":943,"type":383},{"type":945,"content":1028},[1029,1036],{"type":850,"content":1030},[1031],{"type":378,"attrs":1032,"content":1033},{"textAlign":55},[1034],{"text":1035,"type":383},"Custom fields you write yourself support text inputs, dropdowns, radio buttons, and checkboxes.",{"type":850,"content":1037},[1038],{"type":378,"attrs":1039,"content":1040},{"textAlign":55},[1041],{"text":1042,"type":383},"Fields can be required, prepopulated, localized for multilingual stores, and hidden from receipts and emails when they contain sensitive information — each of those is covered in its own article in this section.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1044},{},"What custom checkout fields are and how to add them to your checkout.",[],"custom-checkout-fields-overview","help\u002Farticles\u002Fcustom-checkout-fields-overview",-2820,[],"cd58940a-09a1-46d0-8130-e0adf58a225e","2026-07-02T21:49:14.914Z",[],{"name":1055,"created_at":1056,"published_at":1057,"updated_at":1058,"id":1059,"uuid":1060,"content":1061,"slug":1147,"full_slug":1148,"sort_by_date":55,"position":1149,"tag_list":1150,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":1151,"first_published_at":1057,"release_id":55,"lang":61,"path":55,"alternates":1152,"default_full_slug":55,"translated_slugs":55},"Hide sensitive custom field data from receipts and emails","2026-07-02T21:17:52.572Z","2026-07-02T21:49:14.160Z","2026-07-02T21:49:14.174Z",193894287709860,"8bdb5d9e-4612-4227-9395-d60f3fa94e3f",{"_uid":1062,"body":1063,"name":1055,"image":1143,"pinned":24,"summary":1145,"category":313,"component":259,"related_articles":1146},"81898bde-02a3-42b1-a7d1-7dade6fc5d10",{"type":375,"content":1064},[1065,1076,1080,1113,1118,1122],{"type":378,"attrs":1066,"content":1067},{"textAlign":55},[1068,1070,1074],{"text":1069,"type":383},"By default, every custom checkout field is included in the email receipt sent to both the customer and your store. For information you don’t want emailed — like an account ID number — prefix the field’s name with ",{"text":1071,"type":383,"marks":1072},"h:",[1073],{"type":482},{"text":1075,"type":383}," to keep it out of emails.",{"type":415,"attrs":1077,"content":1078},{"level":417,"textAlign":55},[1079],{"text":838,"type":383},{"type":845,"attrs":1081,"content":1082},{"order":847},[1083,1100],{"type":850,"content":1084},[1085],{"type":378,"attrs":1086,"content":1087},{"textAlign":55},[1088,1089,1092,1094,1098],{"text":966,"type":383},{"text":1071,"type":383,"marks":1090},[1091],{"type":482},{"text":1093,"type":383}," to the front of your field’s ",{"text":1095,"type":383,"marks":1096},"name",[1097],{"type":482},{"text":1099,"type":383}," attribute.",{"type":850,"content":1101},[1102],{"type":378,"attrs":1103,"content":1104},{"textAlign":55},[1105,1107,1111],{"text":1106,"type":383},"Reference the field’s value through Twig’s ",{"text":1108,"type":383,"marks":1109},"_context",[1110],{"type":482},{"text":1112,"type":383}," object, since the colon in the name means it can’t be accessed as a plain variable:",{"type":460,"attrs":1114,"content":1115},{"class":55},[1116],{"text":1117,"type":383},"Please enter your Secret Account ID: \u003Cinput type=\"text\" name=\"h:secret_account_id\" value=\"{{ _context['h:secret_account_id'] }}\" \u002F>\n",{"type":415,"attrs":1119,"content":1120},{"level":417,"textAlign":55},[1121],{"text":943,"type":383},{"type":945,"content":1123},[1124,1136],{"type":850,"content":1125},[1126],{"type":378,"attrs":1127,"content":1128},{"textAlign":55},[1129,1131,1134],{"text":1130,"type":383},"Sensitive fields still appear in the admin’s transaction view and are included in the XML datafeed — the ",{"text":1071,"type":383,"marks":1132},[1133],{"type":482},{"text":1135,"type":383}," prefix only removes them from emails.",{"type":850,"content":1137},[1138],{"type":378,"attrs":1139,"content":1140},{"textAlign":55},[1141],{"text":1142,"type":383},"Don’t use custom fields to collect passwords. Foxy stores custom field values in cleartext, not hashed, so they should never hold sensitive credentials.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1144},{},"How to use the h: field name prefix to keep sensitive custom checkout field data out of emails.",[],"hide-sensitive-custom-field-data-from-receipts-and-emails","help\u002Farticles\u002Fhide-sensitive-custom-field-data-from-receipts-and-emails",-2860,[],"d7dc494f-840a-4e9d-b816-a292f57c80ef",[],{"name":1154,"created_at":1155,"published_at":1156,"updated_at":1157,"id":1158,"uuid":1159,"content":1160,"slug":1221,"full_slug":1222,"sort_by_date":55,"position":1223,"tag_list":1224,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":1225,"first_published_at":1156,"release_id":55,"lang":61,"path":55,"alternates":1226,"default_full_slug":55,"translated_slugs":55},"Keep custom field values when the checkout re-renders","2026-07-02T21:05:27.087Z","2026-07-02T21:49:14.716Z","2026-07-02T21:49:14.733Z",193891234191006,"4d320ece-d5af-464b-bccc-67cb7c5daa07",{"_uid":1161,"body":1162,"name":1154,"image":1217,"pinned":24,"summary":1219,"category":313,"component":259,"related_articles":1220},"3d14bd1a-0fd9-443d-847f-fa9ca58860c6",{"type":375,"content":1163},[1164,1169,1173,1178,1183,1187],{"type":378,"attrs":1165,"content":1166},{"textAlign":55},[1167],{"text":1168,"type":383},"Foxy’s checkout re-renders parts of the page as customers make changes, which removes and re-adds any custom fields in that section — along with whatever the customer had already entered. To keep that data in place, add Twig logic that puts the value back each time the field renders.",{"type":415,"attrs":1170,"content":1171},{"level":417,"textAlign":55},[1172],{"text":838,"type":383},{"type":378,"attrs":1174,"content":1175},{"textAlign":55},[1176],{"text":1177,"type":383},"Add the appropriate Twig value binding to each field type you’re using:",{"type":460,"attrs":1179,"content":1180},{"class":55},[1181],{"text":1182,"type":383},"\u003C!-- Text input -->\n\u003Cinput type=\"text\" name=\"Referral_Source\" value=\"{{ Referral_Source }}\" \u002F>\n\n\u003C!-- Textarea -->\n\u003Ctextarea name=\"Comments\">{{ Comments }}\u003C\u002Ftextarea>\n\n\u003C!-- Checkbox -->\n\u003Cinput type=\"checkbox\" name=\"Age_Approval\" value=\"1\" {% if Age_Approval == \"1\" %}checked{% endif %} \u002F>\n\n\u003C!-- Radio -->\n\u003Cinput type=\"radio\" name=\"Delivery\" value=\"Monday\" {% if Delivery == \"Monday\" %}checked{% endif %} \u002F>\n\u003Cinput type=\"radio\" name=\"Delivery\" value=\"Tuesday\" {% if Delivery == \"Tuesday\" %}checked{% endif %} \u002F>\n\n\u003C!-- Select dropdown -->\n{% set options = [\"Social Media\", \"Advertising\", \"Online Search\", \"Word Of Mouth\", \"Other\"] %}\n\u003Cselect name=\"referral_source\" id=\"referral_source\" class=\"fc-form-control\" aria-required=\"true\" data-fc-required>\n  \u003Coption value=\"\">Please select\u003C\u002Foption>\n  {% for option in options %}\n  \u003Coption value=\"{{ option }}\" {% if referral_source == option %}selected{% endif %}>{{ option }}\u003C\u002Foption>\n  {% endfor %}\n\u003C\u002Fselect>\n",{"type":415,"attrs":1184,"content":1185},{"level":417,"textAlign":55},[1186],{"text":943,"type":383},{"type":945,"content":1188},[1189],{"type":850,"content":1190},[1191],{"type":378,"attrs":1192,"content":1193},{"textAlign":55},[1194,1196,1199,1201,1204,1206,1210,1212,1216],{"text":1195,"type":383},"If your field’s name includes accented characters, or is prefixed with ",{"text":1071,"type":383,"marks":1197},[1198],{"type":482},{"text":1200,"type":383}," to mark it as a sensitive field, reference it through Twig’s ",{"text":1108,"type":383,"marks":1202},[1203],{"type":482},{"text":1205,"type":383}," object instead of as a plain variable — for example, a field named ",{"text":1207,"type":383,"marks":1208},"h:hidden_field",[1209],{"type":482},{"text":1211,"type":383}," is accessed as ",{"text":1213,"type":383,"marks":1214},"_context['h:hidden_field']",[1215],{"type":482},{"text":579,"type":383},{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1218},{},"How to to preserve custom checkout field values when the checkout page re-renders.",[],"keep-custom-field-values-when-the-checkout-re-renders","help\u002Farticles\u002Fkeep-custom-field-values-when-the-checkout-re-renders",-2830,[],"8db3aab2-0c15-40c6-973e-fc9be99fc5ad",[],{"name":1228,"created_at":1229,"published_at":1230,"updated_at":1231,"id":1232,"uuid":1233,"content":1234,"slug":1300,"full_slug":1301,"sort_by_date":55,"position":1302,"tag_list":1303,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":1304,"first_published_at":1230,"release_id":55,"lang":61,"path":55,"alternates":1305,"default_full_slug":55,"translated_slugs":55},"Pass custom field data to custom shipping code","2026-07-02T21:31:35.654Z","2026-07-02T21:49:13.923Z","2026-07-02T21:49:13.937Z",193897659045541,"c140cf93-fa8b-4399-8a9c-7459536ba5fb",{"_uid":1235,"body":1236,"name":1228,"image":1296,"pinned":24,"summary":1298,"category":313,"component":259,"related_articles":1299},"b74d04a9-aadf-461b-b0e4-1dcdcc302821",{"type":375,"content":1237},[1238,1243,1247,1276,1280],{"type":378,"attrs":1239,"content":1240},{"textAlign":55},[1241],{"text":1242,"type":383},"If your custom shipping code needs to react to something a customer enters on the checkout — like a delivery preference or a special instruction — you can pass a custom field’s value into the shipping rate request.",{"type":415,"attrs":1244,"content":1245},{"level":417,"textAlign":55},[1246],{"text":838,"type":383},{"type":845,"attrs":1248,"content":1249},{"order":847},[1250,1263],{"type":850,"content":1251},[1252],{"type":378,"attrs":1253,"content":1254},{"textAlign":55},[1255,1257,1261],{"text":1256,"type":383},"Add a ",{"text":1258,"type":383,"marks":1259},"data-fc-shipping-custom-field",[1260],{"type":482},{"text":1262,"type":383}," data attribute to your custom field’s form element.",{"type":850,"content":1264},[1265],{"type":378,"attrs":1266,"content":1267},{"textAlign":55},[1268,1270,1274],{"text":1269,"type":383},"When the customer changes that field, Foxy automatically refreshes the shipping rates and includes the field’s value in the payload sent to your custom shipping code, inside the ",{"text":1271,"type":383,"marks":1272},"fx:custom_fields",[1273],{"type":482},{"text":1275,"type":383}," object.",{"type":415,"attrs":1277,"content":1278},{"level":417,"textAlign":55},[1279],{"text":943,"type":383},{"type":945,"content":1281},[1282,1289],{"type":850,"content":1283},[1284],{"type":378,"attrs":1285,"content":1286},{"textAlign":55},[1287],{"text":1288,"type":383},"Any custom session attributes already in the customer’s session are included in the payload the same way, by default.",{"type":850,"content":1290},[1291],{"type":378,"attrs":1292,"content":1293},{"textAlign":55},[1294],{"text":1295,"type":383},"For the full details on writing custom shipping code itself, see the shipping documentation for the Custom Shipping Code option.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1297},{},"How to pass a custom checkout field's value into your custom shipping code using a data attribute.",[],"pass-custom-field-data-to-custom-shipping-code","help\u002Farticles\u002Fpass-custom-field-data-to-custom-shipping-code",-2870,[],"341f41c7-9f35-4232-a6f8-1a6529c35fe0",[],{"name":1307,"created_at":1308,"published_at":1309,"updated_at":1310,"id":1311,"uuid":1312,"content":1313,"slug":1398,"full_slug":1399,"sort_by_date":55,"position":1400,"tag_list":1401,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":1402,"first_published_at":1309,"release_id":55,"lang":61,"path":55,"alternates":1403,"default_full_slug":55,"translated_slugs":55},"Populate custom checkout field options from an endpoint","2026-07-21T15:48:11.099Z","2026-07-22T17:45:01.071Z","2026-07-22T17:45:01.087Z",200537256395411,"4a0e0d6c-0df1-4cd0-8755-74eace6bf033",{"_uid":1314,"body":1315,"name":1307,"image":1394,"pinned":24,"summary":1396,"category":313,"component":259,"related_articles":1397},"12395e6a-67bb-4db1-a1ff-3a3e745ca238",{"type":375,"content":1316},[1317,1322,1327,1332,1337,1342,1359,1364,1369,1374,1379,1384,1389],{"type":378,"attrs":1318,"content":1319},{"textAlign":55},[1320],{"text":1321,"type":383},"While Foxy provides the ability to define custom checkout fields to allow you to capture any details you need from the customer on the checkout - this requires that the options available are hard-coded on the page. Sometimes it may be easier to be able to populate the options for the customer to select dynamically from your own website.",{"type":378,"attrs":1323,"content":1324},{"textAlign":55},[1325],{"text":1326,"type":383},"To allow for that, you will need to add a little javascript to your checkout to perform the request dynamically, and also set up an endpoint on your website, \u003Cwrap hi>which is secured with an SSL certificate\u003C\u002Fwrap>, that can respond to the request.",{"type":415,"attrs":1328,"content":1329},{"level":417,"textAlign":55},[1330],{"text":1331,"type":383},"Set up your endpoint",{"type":378,"attrs":1333,"content":1334},{"textAlign":55},[1335],{"text":1336,"type":383},"This is an example in PHP - but the same process can be applied in other languages too. The key is that JSON is returned, and headers are present giving authority for your Foxy store checkout to communicate with your endpoint:",{"type":460,"attrs":1338,"content":1339},{"class":55},[1340],{"text":1341,"type":383},"\u003C?php\nheader('Content-Type:application\u002Fjson;charset=utf-8');\nheader('X-Content-Type-Options: nosniff');\nheader('Access-Control-Allow-Origin: https:\u002F\u002Fmy-store.foxycart.com');\n\n$resp = [\n\t\"options\" => [\n\t\t\"Option 1\",\n\t\t\"Option 2\",\n\t\t\"Option 3\"\n\t]\n];\n\necho json_encode($resp);",{"type":378,"attrs":1343,"content":1344},{"textAlign":55},[1345,1347,1351,1353,1357],{"text":1346,"type":383},"Note that you'll need to update the ",{"text":1348,"type":383,"marks":1349},"my-store.foxycart.com",[1350],{"type":482},{"text":1352,"type":383}," above to be your own store's subdomain, and also update the ",{"text":1354,"type":383,"marks":1355},"$resp",[1356],{"type":482},{"text":1358,"type":383}," object to return the results you're after. In practice, this would probably be from some sort of database on your side, or you would refactor this code into your own system.",{"type":415,"attrs":1360,"content":1361},{"level":417,"textAlign":55},[1362],{"text":1363,"type":383},"Add custom javascript to the checkout",{"type":378,"attrs":1365,"content":1366},{"textAlign":55},[1367],{"text":1368,"type":383},"To perform the dynamic request to your server, you'll need to add a little bit of javascript to the page. You'll add this on your stores \"configuration\" page in the administration, enable the option labelled \"Add custom header and footer code to your templates\", and paste the following into the \"footer\" textarea:",{"type":460,"attrs":1370,"content":1371},{"class":55},[1372],{"text":1373,"type":383},"{% if context == \"checkout\" %}\n\u003Cscript>\n$(function() {\n\t$.get(\"https:\u002F\u002Fwww.your-website.com\u002Foptions.php\", function(data) {\n\t\tFC.json.custom_options = data.options;\n\t\tFC.checkout.renderAdditionalFields();\n\t});\n});\n\u003C\u002Fscript>\n{% endif %}",{"type":378,"attrs":1375,"content":1376},{"textAlign":55},[1377],{"text":1378,"type":383},"You'll need to update the URL above to point to wherever your script is located from the first step.",{"type":415,"attrs":1380,"content":1381},{"level":417,"textAlign":55},[1382],{"text":1383,"type":383},"Update custom checkout fields",{"type":378,"attrs":1385,"content":1386},{"textAlign":55},[1387],{"text":1388,"type":383},"Finally, also on the configuration in the admin, enable the \"Add custom form fields to your checkout\" option present. Here you'll add in any custom fields you want to provide. As a quick example of utilising the example response above in a select object, it would look like this:",{"type":460,"attrs":1390,"content":1391},{"class":55},[1392],{"text":1393,"type":383},"{% if custom_options is defined %}\n\u003Cselect name=\"size\">\n\t{% for option in custom_options %}\n\t\t\u003Coption value=\"\" {% if size == option %}selected{% endif %}>\u003C\u002Foption>\n\t{% endfor %}\n\u003C\u002Fselect>\n{% endif %}",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1395},{},"How to fill select, radio, or checkbox options on the checkout from an endpoint on your site.",[],"populate-custom-checkout-field-options-from-an-endpoint","help\u002Farticles\u002Fpopulate-custom-checkout-field-options-from-an-endpoint",-4180,[],"9700995b-35fe-4132-a3b3-362e36578b56",[],{"name":1405,"created_at":1406,"published_at":1407,"updated_at":1408,"id":1409,"uuid":1410,"content":1411,"slug":1505,"full_slug":1506,"sort_by_date":55,"position":1507,"tag_list":1508,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":1509,"first_published_at":1407,"release_id":55,"lang":61,"path":55,"alternates":1510,"default_full_slug":55,"translated_slugs":55},"Pre-populate custom checkout fields","2026-07-02T21:06:19.258Z","2026-07-02T21:49:14.478Z","2026-07-02T21:49:14.498Z",193891447891615,"c930cc40-6ebb-4640-b8d9-150f7f638ee6",{"_uid":1412,"body":1413,"name":1405,"image":1501,"pinned":24,"summary":1503,"category":313,"component":259,"related_articles":1504},"afff056d-dc37-4f6a-bfff-04f5a959b175",{"type":375,"content":1414},[1415,1420,1424,1451,1456,1478,1483,1487],{"type":378,"attrs":1416,"content":1417},{"textAlign":55},[1418],{"text":1419,"type":383},"Unlike Foxy’s standard checkout fields, custom fields you create aren’t prepopulated automatically. You can add that behavior yourself using Twig, pulling the value from a hidden session attribute passed in through the cart.",{"type":415,"attrs":1421,"content":1422},{"level":417,"textAlign":55},[1423],{"text":838,"type":383},{"type":845,"attrs":1425,"content":1426},{"order":847},[1427,1444],{"type":850,"content":1428},[1429],{"type":378,"attrs":1430,"content":1431},{"textAlign":55},[1432,1434,1437,1439,1443],{"text":1433,"type":383},"Pass the field’s value into the cart as a hidden attribute, using the ",{"text":1071,"type":383,"marks":1435},[1436],{"type":482},{"text":1438,"type":383}," prefix plus your field’s name — for example, ",{"text":1440,"type":383,"marks":1441},"h:Referred_By",[1442],{"type":482},{"text":579,"type":383},{"type":850,"content":1445},[1446],{"type":378,"attrs":1447,"content":1448},{"textAlign":55},[1449],{"text":1450,"type":383},"In your custom field’s template code, add Twig logic to check for that value and set it before the field renders:",{"type":460,"attrs":1452,"content":1453},{"class":55},[1454],{"text":1455,"type":383},"{% if Referred_By is not defined %}\n  {% set Referred_By = \"\" %}\n  {% for key, custom_field in custom_fields %}\n    {% if key == \"Referred_By\" %}\n      {% set Referred_By = custom_field.value %}\n    {% endif %}\n  {% endfor %}\n{% endif %}\n",{"type":845,"attrs":1457,"content":1458},{"order":847},[1459],{"type":850,"content":1460},[1461],{"type":378,"attrs":1462,"content":1463},{"textAlign":55},[1464,1466,1470,1472,1476],{"text":1465,"type":383},"Reference the variable in your field’s ",{"text":1467,"type":383,"marks":1468},"value",[1469],{"type":482},{"text":1471,"type":383}," attribute, as shown in ",{"text":819,"type":383,"marks":1473},[1474],{"type":1475},"italic",{"text":1477,"type":383},":",{"type":460,"attrs":1479,"content":1480},{"class":55},[1481],{"text":1482,"type":383},"\u003Cinput type=\"text\" id=\"Referred_By\" name=\"Referred_By\" class=\"fc-form-control\" aria-required=\"true\" value=\"{{ Referred_By }}\" data-fc-required>\n",{"type":415,"attrs":1484,"content":1485},{"level":417,"textAlign":55},[1486],{"text":943,"type":383},{"type":945,"content":1488},[1489],{"type":850,"content":1490},[1491],{"type":378,"attrs":1492,"content":1493},{"textAlign":55},[1494,1496,1499],{"text":1495,"type":383},"This is a separate mechanism from keeping a field’s value in place when the checkout re-renders after the customer has already typed something in — see ",{"text":1154,"type":383,"marks":1497},[1498],{"type":1475},{"text":1500,"type":383}," for that.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1502},{},"How to prepopulate a custom checkout field's value using a hidden session attribute and Twig.",[],"pre-populate-custom-checkout-fields","help\u002Farticles\u002Fpre-populate-custom-checkout-fields",-2840,[],"1f261c9f-172a-4785-9b65-587c90a02550",[],{"name":1512,"created_at":1513,"published_at":1514,"updated_at":1515,"id":1516,"uuid":1517,"content":1518,"slug":1598,"full_slug":1599,"sort_by_date":55,"position":1600,"tag_list":1601,"is_startpage":24,"parent_id":656,"meta_data":55,"group_id":1602,"first_published_at":1514,"release_id":55,"lang":61,"path":55,"alternates":1603,"default_full_slug":55,"translated_slugs":55},"Set up multilingual custom checkout fields","2026-07-03T01:40:55.092Z","2026-07-03T01:42:28.305Z","2026-07-03T01:42:28.320Z",193958932902831,"c27872e1-c29e-4c50-bfd9-88023d74a384",{"_uid":1519,"body":1520,"name":1512,"image":1594,"pinned":24,"summary":1596,"category":313,"component":259,"related_articles":1597},"c40276e9-1e07-4418-8370-808f5df20f43",{"type":375,"content":1521},[1522,1527,1531,1554,1564,1569,1573],{"type":378,"attrs":1523,"content":1524},{"textAlign":55},[1525],{"text":1526,"type":383},"If your store uses Template Sets to offer multilingual checkout templates, your custom checkout fields need their own translations too — they don’t get localized automatically.",{"type":415,"attrs":1528,"content":1529},{"level":417,"textAlign":55},[1530],{"text":838,"type":383},{"type":845,"attrs":1532,"content":1533},{"order":847},[1534,1547],{"type":850,"content":1535},[1536],{"type":378,"attrs":1537,"content":1538},{"textAlign":55},[1539,1541,1545],{"text":1540,"type":383},"Set a variable for each language your store supports, using Twig conditionals based on the store’s ",{"text":1542,"type":383,"marks":1543},"language",[1544],{"type":482},{"text":1546,"type":383}," variable.",{"type":850,"content":1548},[1549],{"type":378,"attrs":1550,"content":1551},{"textAlign":55},[1552],{"text":1553,"type":383},"Reference those variables in your field’s label and description instead of hardcoding the text.",{"type":378,"attrs":1555,"content":1556},{"textAlign":55},[1557,1559,1562],{"text":1558,"type":383},"Here’s the referral field example from ",{"text":819,"type":383,"marks":1560},[1561],{"type":1475},{"text":1563,"type":383},", extended to support English, German, and French:",{"type":460,"attrs":1565,"content":1566},{"class":55},[1567],{"text":1568,"type":383},"{% set referral_label = \"Referred by... (required)\" %}\n{% set referral_description = \"Please let us know who referred you.\" %}\n{% if language == \"german\" %}\n  {% set referral_label = \"Empfohlen von... (erforderlich)\" %}\n  {% set referral_description = \"Bitte teilen Sie uns mit, wer Sie empfohlen hat.\" %}\n{% elseif language == \"french\" %}\n  {% set referral_label = \"Référencé par... (obligatoire)\" %}\n  {% set referral_description = \"Veuillez nous indiquer qui vous a référé.\" %}\n{% endif %}\n\u003Cdiv class=\"fc-form-group \">\n  \u003Cdiv class=\"col-sm-8 col-sm-offset-3\" data-fc-error-for=\"referral_source\" data-fc-error-class=\"fc-alert-container--error\">\n    \u003Cdiv class=\"fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active\">\n      \u003Clabel class=\"fc-input-group-container__title fc-input-group-container__title--forced fc-form-label\">\n        {{ referral_label }}\n      \u003C\u002Flabel>\n      \u003Cdiv class=\"fc-form-group\">\n        \u003Cp>{{ referral_description }}\u003C\u002Fp>\n        \u003Cinput type=\"text\" id=\"referral_source\" name=\"referral_source\" placeholder=\"\" autocomplete=\"off\" class=\"fc-form-control\" formnovalidate=\"\" aria-required=\"true\" value=\"{{ referral_source }}\" data-fc-required>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",{"type":415,"attrs":1570,"content":1571},{"level":417,"textAlign":55},[1572],{"text":943,"type":383},{"type":945,"content":1574},[1575],{"type":850,"content":1576},[1577],{"type":378,"attrs":1578,"content":1579},{"textAlign":55},[1580,1582,1586,1588,1592],{"text":1581,"type":383},"Expand the ",{"text":1583,"type":383,"marks":1584},"{% if %}",[1585],{"type":482},{"text":1587,"type":383}," \u002F ",{"text":1589,"type":383,"marks":1590},"{% elseif %}",[1591],{"type":482},{"text":1593,"type":383}," block to match every language your template sets actually use — this example assumes English as the default, with German and French as additional options.",{"id":55,"alt":55,"name":13,"focus":55,"title":55,"source":55,"filename":13,"copyright":55,"fieldtype":77,"meta_data":1595},{},"How to translate custom checkout field labels and descriptions for stores using multiple template set languages.",[],"set-up-multilingual-custom-checkout-fields","help\u002Farticles\u002Fset-up-multilingual-custom-checkout-fields",-2930,[],"dac1b40f-dc36-4ec8-8bb2-6c7c3b2baed8",[],{"name":1605,"created_at":1606,"published_at":1607,"updated_at":1608,"id":1609,"uuid":42,"content":1610,"slug":43,"full_slug":43,"sort_by_date":55,"position":1786,"tag_list":1787,"is_startpage":24,"parent_id":55,"meta_data":55,"group_id":1788,"first_published_at":1789,"release_id":55,"lang":61,"path":55,"alternates":1790,"default_full_slug":55,"translated_slugs":55},"Contact","2022-09-23T19:56:58.957Z","2025-05-08T18:24:40.382Z","2025-05-08T18:24:40.392Z",3138,{"seo":1611,"_uid":1614,"title":1615,"action":1616,"fields":1617,"method":1762,"columns":1763,"subtitle":1777,"component":43,"button_text":1783,"submit_title":1784,"submit_subtitle":1785},{"_uid":1612,"title":1605,"plugin":1613,"description":13},"24ff7574-3bcc-48d2-85b5-e529dfea1cc4","meta-fields","8f54f1da-9d8f-49b2-89e7-840e886491cb","We're here to help.","https:\u002F\u002Fusebasin.com\u002Ff\u002F029f48d65402",[1618,1622,1626,1733,1736,1741,1756],{"_uid":1619,"name":1095,"type":383,"label":1620,"options":13,"required":33,"component":1621,"placeholder":13},"9a70b226-2036-4f90-a052-b3efa61c5896","Name","form___field",{"_uid":1623,"name":1624,"type":1624,"label":1625,"options":13,"required":33,"component":1621,"placeholder":13},"86ba35be-ff43-4a28-8633-14052a8f6622","email","Email Address",{"_uid":1627,"name":1628,"type":1629,"label":1630,"options":1631,"required":33,"component":1621,"conditions":1632,"placeholder":13},"3f827475-492c-4f97-aa1e-2386ac263b6c","topic","select","Topic","Presales, Support, Billing, Partnerships, Order Enquiry, Other",[1633,1687,1697,1704,1712,1720,1726],{"_uid":1634,"equals":1635,"fields":1636,"component":1686},"e21d97dd-e68e-4fa6-ba97-bc40f3041dde","Order Enquiry",[1637],{"_uid":1638,"body":1639,"type":1684,"title":13,"component":1685},"b64992bc-6d53-48b8-b7a0-d81e5a062e50",{"type":375,"content":1640},[1641],{"type":378,"content":1642},[1643,1645,1652,1654,1656,1657,1661,1663,1667,1675,1677,1682],{"text":1644,"type":383},"We are ",{"text":1646,"type":383,"marks":1647},"Foxy.io",[1648],{"type":393,"attrs":1649},{"href":1650,"uuid":55,"anchor":55,"custom":1651,"target":55,"linktype":31},"http:\u002F\u002FFoxy.io",{},{"text":1653,"type":383},", an ecommerce platform powering ecommerce for other merchants. We do not sell products, and are unable to assist with questions about order statuses or refunds for any merchants using our platform. Please contact the merchant you ordered from for assistance. If you’d like to report a store using Foxy for fraudulent practices, please select ‘other’ in the subject.",{"type":1655},"hard_break",{"type":1655},{"text":1658,"type":383,"marks":1659},"NOTE:",[1660],{"type":475},{"text":1662,"type":383}," We are ",{"text":1664,"type":383,"marks":1665},"not ",[1666],{"type":1475},{"text":1668,"type":383,"marks":1669},"Foxy.in",[1670,1674],{"type":393,"attrs":1671},{"href":1672,"uuid":55,"anchor":55,"custom":1673,"target":55,"linktype":31},"http:\u002F\u002FFoxy.in",{},{"type":1475},{"text":1676,"type":383},". We are not in any way affiliated with ",{"text":1668,"type":383,"marks":1678},[1679],{"type":393,"attrs":1680},{"href":1672,"uuid":55,"anchor":55,"custom":1681,"target":55,"linktype":31},{},{"text":1683,"type":383},", and cannot help in any way with your order from that website.","danger","global___alert","form___condition",{"_uid":1688,"equals":1689,"fields":1690,"component":1686},"8765c3e1-25cf-44aa-b8ea-fc6094acf9c3","Presales",[1691],{"_uid":1692,"name":1693,"type":1694,"label":13,"options":13,"required":24,"component":1621,"conditions":1695,"placeholder":13,"default_value":1696},"cf464f8e-d643-4f6e-af29-d3abffaf7380","department_email_address","hidden",[],"hello@foxy.io",{"_uid":1698,"equals":204,"fields":1699,"component":1686},"4007b6d8-77e5-421d-bd1e-6f336dd853fb",[1700],{"_uid":1701,"name":1693,"type":1694,"label":13,"options":13,"required":24,"component":1621,"conditions":1702,"placeholder":13,"default_value":1703},"7b4c6aa5-a68c-45e0-9ce1-0a36af10c0c2",[],"help@foxy.io",{"_uid":1705,"equals":1706,"fields":1707,"component":1686},"1dbb8f11-613d-43cd-9e09-1b94f6e19219","Billing",[1708],{"_uid":1709,"name":1693,"type":1694,"label":13,"options":13,"required":24,"component":1621,"conditions":1710,"placeholder":13,"default_value":1711},"a0ac0d1b-bc4f-4a6c-a682-581d450b0b73",[],"help+billing@foxy.io",{"_uid":1713,"equals":1714,"fields":1715,"component":1686},"a0a53a50-7172-4a29-ba58-181e38874e12","Partnerships",[1716],{"_uid":1717,"name":1693,"type":1694,"label":13,"options":13,"required":24,"component":1621,"conditions":1718,"placeholder":13,"default_value":1719},"7aa011d9-f374-4aed-b5a5-929b54aaf152",[],"partners@foxy.io",{"_uid":1721,"equals":1635,"fields":1722,"component":1686},"a4cd431f-25d5-41c7-bfdc-02c908c8fb47",[1723],{"_uid":1724,"name":1693,"type":1694,"label":13,"options":13,"required":24,"component":1621,"conditions":1725,"placeholder":13,"default_value":1696},"f5d52168-d6ae-451b-94ee-2ced1cbd28ad",[],{"_uid":1727,"equals":1728,"fields":1729,"component":1686},"25aba1ed-eb41-4bbc-aa89-f7a7167ea86e","Other",[1730],{"_uid":1731,"name":1693,"type":1694,"label":13,"options":13,"required":24,"component":1621,"conditions":1732,"placeholder":13,"default_value":1696},"f40dfaef-c203-4b71-bf4e-e1b43cef192b",[],{"_uid":1734,"component":1735},"e9c53a05-f40a-4510-aaf8-bc072a235a0c","form___subject",{"_uid":1737,"name":1738,"type":1739,"label":1740,"options":13,"required":33,"component":1621,"placeholder":13},"a4c4d385-fff4-4978-99fb-b68cfea623d6","message","textarea","Message",{"_uid":1742,"name":1743,"type":1629,"label":1744,"options":1745,"required":33,"component":1621,"conditions":1746,"placeholder":13},"8a3c9f85-f438-427d-9c7a-d7b295a14b5b","existing_user","Are you an existing user?","No, Yes",[1747],{"_uid":1748,"equals":1749,"fields":1750,"component":1686},"115933d6-262a-4b59-8fa8-579c5ad73de1","Yes",[1751],{"_uid":1752,"name":1753,"type":383,"label":1754,"options":13,"required":33,"component":1621,"conditions":1755,"placeholder":13},"44b6ff23-98f0-4e95-b7f5-c23e06415c2d","subdomain","Store Subdomain",[],{"_uid":1757,"name":1758,"type":1629,"label":1759,"options":1760,"required":33,"component":1621,"conditions":1761,"placeholder":13},"922a5cef-3af2-4113-8855-36c7910e3ee3","user_type","What type of user are you?","Developer, Designer, Merchant",[],"POST",[1764],{"_uid":1765,"text":1766,"title":1775,"component":1776},"7323b90d-a93a-4bf1-baa9-20d0b7ead61b",{"type":375,"content":1767},[1768],{"type":378,"content":1769},[1770,1772,1773],{"text":1771,"type":383},"855.369.9227",{"type":1655},{"text":1774,"type":383},"9:30am-6pm Central M-F","Pre-sales, Sales, & Partnerships","contact___footer_column",{"type":375,"content":1778},[1779],{"type":378,"content":1780},[1781],{"text":1782,"type":383},"Get in touch to get help from our friendly support team.","Submit","Success!","Your email has been received. We'll get back to you as soon as we can, but it might take a business day. If you don't hear back from us in a timely manner, please check your spam folder to ensure our reply didn't go there.",-80,[],"2fd9fb7d-a48a-4184-acfd-30022d8d6f08","2022-09-23T20:10:45.360Z",[],{},1785861255204]