https://www.ractoon.com/_next/static/chunks/pages/articles/gravity…net-addon-custom-fields-b89e6633676521f5.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[82],{4760:function(e,n,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/articles/gravity-forms-authorize-net-addon-custom-fields",function(){return s(2480)}])},2480:function(e,n,s){"use strict";s.r(n),s.d(n,{default:function(){return o},meta:function(){return c}});var a=s(5893),t=s(1151),i=s(312);let c={author:"ractoon",date:"2020-05-27",title:"Gravity Forms Authorize.Net Add-On Custom Transaction Data",tags:["WordPress","Gravity Forms"],description:"How to send additional fields to Authorize.Net with a transaction from the Gravity Forms Authorize.Net add-on."},r=e=>(0,a.jsx)(i.B,{meta:c,...e});function l(e){let n={a:"a",code:"code",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,t.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:["Out of the box the ",(0,a.jsx)(n.a,{href:"https://www.gravityforms.com/add-ons/authorize-net/",children:"Authorize.Net add-on for Gravity Forms"})," does quite a bit. However, if you needed to pass custom data to Authorize.Net you'll need to modify the transaction before it is sent to the Authorize.Net API."]}),"\n",(0,a.jsx)(n.p,{children:"By default the Authorize.Net add-on allows you to match these fields to those in your form:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Email"}),"\n",(0,a.jsx)(n.li,{children:"Address"}),"\n",(0,a.jsx)(n.li,{children:"Address 2"}),"\n",(0,a.jsx)(n.li,{children:"City"}),"\n",(0,a.jsx)(n.li,{children:"State"}),"\n",(0,a.jsx)(n.li,{children:"Zip"}),"\n",(0,a.jsx)(n.li,{children:"Country"}),"\n",(0,a.jsx)(n.li,{children:"Phone"}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"This will automatically tie the values from your form with the specified fields in Authorize.Net."}),"\n",(0,a.jsx)(n.p,{children:"But there are more fields available on Authorize.Net that can be tied with a transaction. These fields include:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"address"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"allow_partial_auth"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"amount"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"auth_code"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"authentication_indicator"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"bank_aba_code"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"bank_acct_name"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"bank_acct_num"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"bank_acct_type"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"bank_check_number"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"bank_name"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"card_code"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"card_num"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"cardholder_authentication_value"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"city"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"company"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"country"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"cust_id"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"customer_ip"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"delim_char"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"delim_data"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"description"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"duplicate_window"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"duty"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"echeck_type"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"email"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"email_customer"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"encap_char"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"exp_date"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"fax"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"first_name"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"footer_email_receipt"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"freight"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"header_email_receipt"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"invoice_num"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"last_name"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"line_item"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"login"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"method"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"phone"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"po_num"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"recurring_billing"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"relay_response"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"ship_to_address"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"ship_to_city"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"ship_to_company"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"ship_to_country"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"ship_to_first_name"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"ship_to_last_name"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"ship_to_state"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"ship_to_zip"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"split_tender_id"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"state"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"tax"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"tax_exempt"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"test_request"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"tran_key"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"trans_id"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"type"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"version"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"zip"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"solution_id"})}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["You can append data to these fields using the ",(0,a.jsx)(n.code,{children:"gform_authorizenet_before_single_payment"})," hook. In the example below the customer ID and company information is being added to the transaction based on labels set up in the form."]}),"\n",(0,a.jsxs)(n.p,{children:['First, a check is made if the field label is one of "customerid", "customer_id", or "customer id" (converted to lowercase). If so, the field value provided is set as the ',(0,a.jsx)(n.code,{children:"cust_id"})," parameter on the transaction. A similar check is made for the company, and its value is set as the ",(0,a.jsx)(n.code,{children:"company"})," parameter."]}),"\n",(0,a.jsx)(n.p,{children:"You can set any of the field names listed above with the transaction."}),"\n",(0,a.jsx)(n.pre,{className:"language-php",children:(0,a.jsxs)(n.code,{className:"language-php",children:[(0,a.jsx)(n.span,{className:"token function",children:"add_filter"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'gform_authorizenet_before_single_payment'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'set_additional_transaction_fields'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"10"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"4"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function-definition function",children:"set_additional_transaction_fields"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$transaction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$form_data"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$config"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$form"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(n.span,{className:"token keyword",children:"foreach"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token variable",children:"$form"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'fields'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$field"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n    ",(0,a.jsx)(n.span,{className:"token keyword",children:"switch"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token function",children:"strtolower"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token variable",children:"$field"}),(0,a.jsx)(n.span,{className:"token operator",children:"->"}),(0,a.jsx)(n.span,{className:"token property",children:"label"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n      ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'customerid'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:":"}),"\n      ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'customer_id'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:":"}),"\n      ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'customer id'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:":"}),"\n        ",(0,a.jsx)(n.span,{className:"token variable",children:"$transaction"}),(0,a.jsx)(n.span,{className:"token operator",children:"->"}),(0,a.jsx)(n.span,{className:"token property",children:"cust_id"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"rgpost"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'input_'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"."})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$field"}),(0,a.jsx)(n.span,{className:"token operator",children:"->"}),(0,a.jsx)(n.span,{className:"token property",children:"id"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n        ",(0,a.jsx)(n.span,{className:"token keyword",children:"break"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n      ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'company'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:":"}),"\n        ",(0,a.jsx)(n.span,{className:"token variable",children:"$transaction"}),(0,a.jsx)(n.span,{className:"token operator",children:"->"}),(0,a.jsx)(n.span,{className:"token property",children:"company"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"rgpost"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'input_'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"."})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$field"}),(0,a.jsx)(n.span,{className:"token operator",children:"->"}),(0,a.jsx)(n.span,{className:"token property",children:"id"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n        ",(0,a.jsx)(n.span,{className:"token keyword",children:"break"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n    ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),"\n  ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),"\n\n  ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$transaction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),"\n"]})}),"\n",(0,a.jsxs)(n.p,{children:["If you'd like to add a field that is not on the list, e.g. a comments or instructions field, you would need to set a custom field using the ",(0,a.jsx)(n.code,{children:"setCustomField()"})," method."]}),"\n",(0,a.jsxs)(n.p,{children:['In the example below this is being done with a field called "comment" or "comments" from the form, and being set to a custom fieled named ',(0,a.jsx)(n.code,{children:"Comments"})," before being sent to Authorize.Net."]}),"\n",(0,a.jsx)(n.pre,{className:"language-php",children:(0,a.jsxs)(n.code,{className:"language-php",children:[(0,a.jsx)(n.span,{className:"token function",children:"add_filter"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'gform_authorizenet_before_single_payment'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'add_custom_transaction_data'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"10"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"4"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function-definition function",children:"add_custom_transaction_data"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token variable",children:"$transaction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$form_data"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$config"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$form"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(n.span,{className:"token keyword",children:"foreach"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token variable",children:"$form"}),(0,a.jsx)(n.span,{className:"t

1oken punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'fields'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$field"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n    ",(0,a.jsx)(n.span,{className:"token keyword",children:"switch"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token function",children:"strtolower"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token variable",children:"$field"}),(0,a.jsx)(n.span,{className:"token operator",children:"->"}),(0,a.jsx)(n.span,{className:"token property",children:"label"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n      ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'comment'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:":"}),"\n      ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'comments'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:":"}),"\n        ",(0,a.jsx)(n.span,{className:"token variable",children:"$transaction"}),(0,a.jsx)(n.span,{className:"token operator",children:"->"}),(0,a.jsx)(n.span,{className:"token function",children:"setCustomField"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'Comments'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token function",children:"rgpost"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string single-quoted-string",children:"'input_'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"."})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$field"}),(0,a.jsx)(n.span,{className:"token operator",children:"->"}),(0,a.jsx)(n.span,{className:"token property",children:"id"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n        ",(0,a.jsx)(n.span,{className:"token keyword",children:"break"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n    ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),"\n  ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),"\n\n  ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token variable",children:"$transaction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),"\n"]})})]})}function o(e={}){return(0,a.jsx)(r,{...e,children:(0,a.jsx)(l,{...e})})}},312:function(e,n,s){"use strict";s.d(n,{B:function(){return m}});var a=s(5893),t=s(9008),i=s.n(t),c=s(1664),r=s.n(c),l=s(1163),o=s(3223),d=s(6434),h=s(512);function x({children:e,className:n}){return(0,a.jsx)("div",{className:(0,h.Z)(n,"prose dark:prose-invert"),children:e})}var p=s(7330);function u(e){return(0,a.jsx)("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",...e,children:(0,a.jsx)("path",{d:"M7.25 11.25 3.75 8m0 0 3.5-3.25M3.75 8h8.5",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function m({children:e,meta:n,isRssFeed:s=!1,previousPathname:t}){if(s)return e;let c=(0,l.useRouter)();return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(i(),{children:[(0,a.jsx)("title",{children:`${n.title} | ractoon`}),(0,a.jsx)("meta",{name:"description",content:n.description})]}),(0,a.jsx)(o.W,{className:"mt-16 lg:mt-32",children:(0,a.jsx)("div",{className:"xl:relative",children:(0,a.jsxs)("div",{className:"mx-auto max-w-2xl",children:[t&&(0,a.jsx)("button",{type:"button",onClick:()=>c.back(),"aria-label":"Go back to articles",className:"group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20 lg:absolute lg:-left-5 lg:mb-0 lg:-mt-2 xl:-top-1.5 xl:left-0 xl:mt-0",children:(0,a.jsx)(u,{className:"h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-400"})}),(0,a.jsxs)("article",{children:[(0,a.jsxs)("header",{className:"flex flex-col",children:[(0,a.jsx)("h1",{className:"bg-gradient-to-br from-ractoon-blue-light to-ractoon-blue-dark text-transparent bg-clip-text mt-6 text-4xl font-bold tracking-tight sm:leading-[4rem] sm:text-5xl",children:n.title}),(0,a.jsxs)("time",{dateTime:n.date,className:"order-first flex items-center text-base text-zinc-400 dark:text-zinc-500",children:[(0,a.jsx)("span",{className:"h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"}),(0,a.jsx)("span",{className:"ml-3",children:(0,p.p)(n.date)})]})]}),(0,a.jsx)(x,{className:"mt-8",children:e})]}),(0,a.jsx)("aside",{children:(0,a.jsx)(d.m,{className:"mt-24"})}),(0,a.jsx)("footer",{children:(0,a.jsx)(x,{children:(0,a.jsxs)("p",{className:"text-center",children:["Questions or comments? Hit me up on Twitter ",(0,a.jsx)(r(),{href:"https://twitter.com/ractoon",target:"_blank",children:"@ractoon"})]})})})]})})})]})}},5534:function(e,n,s){"use strict";s.d(n,{z:function(){return l}});var a=s(5893),t=s(1664),i=s.n(t),c=s(512);let r={primary:"bg-zinc-600 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70",secondary:"bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70",brand:"border border-ractoon-blue-dark/50 font-semibold text-ractoon-blue-dark dark:text-ractoon-blue hover:border-ractoon-blue hover:text-ractoon-blue active:border-ractoon-blue/60 dark:border-ractoon-blue/50 dark:hover:border-ractoon-blue-light dark:hover:text-ractoon-blue-light dark:active:border-ractoon-blue-light/70"};function l({variant:e="primary",className:n,href:s,...t}){return n=(0,c.Z)("inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none",r[e],n),s?(0,a.jsx)(i(),{href:s,className:n,...t}):(0,a.jsx)("button",{className:n,...t})}},6434:function(e,n,s){"use strict";s.d(n,{m:function(){return r}});var a=s(5893),t=s(512),i=s(5534);function c(e){return(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",...e,children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75",className:"fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"})})}function r({className:e}){return e=(0,t.Z)("bg-white/90 backdrop-blur-sm rounded-2xl border border-zinc-100 p-6 dark:bg-zinc-900/90 dark:border-zinc-700/40",e),(0,a.jsxs)("form",{action:"https://app.convertkit.com/forms/3928602/subscriptions",method:"post",target:"_blank",className:e,children:[(0,a.jsxs)("h2",{className:"flex text-sm font-semibold text-zinc-900 dark:text-zinc-100",children:[(0,a.jsx)(c,{className:"h-6 w-6 flex-none"}),(0,a.jsx)("span",{className:"ml-2",children:"Stay up to date"})]}),(0,a.jsx)("p",{className:"mt-2 text-sm text-zinc-600 dark:text-zinc-400",children:"Get notified when I publish something new, and unsubscribe at any time."}),(0,a.jsxs)("div",{className:"mt-6 flex",children:[(0,a.jsx)("input",{type:"email",placeholder:"Email address","aria-label":"Email address",name:"email_address",required:!0,className:"min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(sp

1acing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-ractoon-blue focus:outline-none focus:ring-4 focus:ring-ractoon-blue/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-ractoon-blue-light dark:focus:ring-ractoon-blue-light/10 sm:text-sm"}),(0,a.jsx)(i.z,{type:"submit",className:"ml-4 flex-none",children:"Join"})]})]})}},7330:function(e,n,s){"use strict";function a(e){return new Date(`${e}T00:00:00Z`).toLocaleDateString("en-US",{day:"numeric",month:"long",year:"numeric",timeZone:"UTC"})}s.d(n,{p:function(){return a}})},9008:function(e,n,s){e.exports=s(7828)},1151:function(e,n,s){"use strict";s.d(n,{a:function(){return i}});var a=s(7294);let t=a.createContext({});function i(e){let n=a.useContext(t);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}}},function(e){e.O(0,[888,774,179],function(){return e(e.s=4760)}),_N_E=e.O()}]);