{"id":4073,"date":"2017-08-30T08:58:14","date_gmt":"2017-08-30T06:58:14","guid":{"rendered":"https:\/\/demos.welaunch.io\/wordpress-cf7-stripe\/?post_type=faq&#038;p=179"},"modified":"2020-07-28T08:10:08","modified_gmt":"2020-07-28T06:10:08","slug":"cf7-stripe-setup","status":"publish","type":"faq","link":"https:\/\/www.welaunch.io\/en\/knowledge-base\/faq\/cf7-stripe-setup\/","title":{"rendered":"CF7 Stripe Setup"},"content":{"rendered":"<h2>Setup a Stripe Account &amp; get the API Key<\/h2>\n<p>To get a stripe account simply go to <a href=\"https:\/\/dashboard.stripe.com\/register\" target=\"_blank\" rel=\"noopener noreferrer\">stripe.com and register for a new account here<\/a>. Then login and go to Dashboard &gt; <a href=\"https:\/\/dashboard.stripe.com\/account\/apikeys\" target=\"_blank\" rel=\"noopener noreferrer\">API or follow this link<\/a>. Here you will see a publishable &amp; a secret API key. We will need both, so copy both of them, or leave the tab open.<\/p>\n<h2>Settings Panel<\/h2>\n<p>First you should make sure you can see the stripe settings panel. If you can not see the menu on the right image please make sure you have installed the Redux Framework &amp; Contact Form 7 plugin.<\/p>\n<h2>General Stripe Settings<\/h2>\n<p>In the General stripe settings you should first set your Company name and a logo in square image format.<\/p>\n<p>Then you need to paste the before created Stripe API Keys. First the Publishable Key, and then the secret Key.<\/p>\n<figure id=\"attachment_5265\" aria-describedby=\"caption-attachment-5265\" style=\"width: 1020px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-5265\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-general-settings-1024x821.png\" alt=\"cf7 stripe general settings\" width=\"1020\" height=\"818\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-general-settings-1024x821.png 1024w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-general-settings-247x198.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-general-settings-510x409.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-general-settings-300x241.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-general-settings-768x616.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-general-settings.png 1226w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><figcaption id=\"caption-attachment-5265\" class=\"wp-caption-text\">cf7 stripe general settings<\/figcaption><\/figure>\n<h2>Stripe Payment Options<\/h2>\n<p>Globally you can set different Stripe payment options.<\/p>\n<ol>\n<li><strong>Validate Postal Code (ZIP)<\/strong><br \/>\nSpecify whether Checkout should validate the billing postal code.<br \/>\nWe highly recommend setting to true.<\/li>\n<li><strong>Collect Billing Address<\/strong><br \/>\nSpecify whether Checkout should collect the user&#8217;s billing address.<\/li>\n<li><strong>Collect Shipping Address<\/strong><br \/>\nSpecify whether Checkout should collect the user&#8217;s shipping address.<\/li>\n<li><strong>Allow Remember me<\/strong><br \/>\nSpecify whether to include the option to &#8220;Remember Me&#8221; for future purchases.<\/li>\n<li><strong>Accept Bitcoins<\/strong><br \/>\nSpecify whether to accept Bitcoin.<\/li>\n<li><strong>Send Mail<\/strong><br \/>\nCheck how you want the CF7 mail to be sent out.<\/li>\n<li><strong>Payment Successful<\/strong><br \/>\nWhat should happen when a successful payment has been made.<\/li>\n<li><strong>Currency*<\/strong><br \/>\nSee: <a href=\"https:\/\/stripe.com\/docs\/currencies\" target=\"_blank\" rel=\"noopener noreferrer\">Stripe Currency Reference<\/a><\/li>\n<li>Return (success) URL<\/li>\n<li>Cancel (error) URL<\/li>\n<\/ol>\n<figure id=\"attachment_5264\" aria-describedby=\"caption-attachment-5264\" style=\"width: 1020px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-5264\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/stripe-payment-options-1024x933.png\" alt=\"stripe payment options\" width=\"1020\" height=\"929\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/stripe-payment-options-1024x933.png 1024w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/stripe-payment-options-247x225.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/stripe-payment-options-510x465.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/stripe-payment-options-300x273.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/stripe-payment-options-768x700.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/stripe-payment-options.png 1110w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><figcaption id=\"caption-attachment-5264\" class=\"wp-caption-text\">stripe payment options<\/figcaption><\/figure>\n<h2>Advanced Settings<\/h2>\n<p>In the advanced settings you can add custom CSS or JS.<\/p>\n<h2>Create your Form<\/h2>\n<p>Go into your Admin panel &gt; Contact &gt; Add new to add a new contact form.<\/p>\n<p>Then you will see a new button on the top called &#8220;Stripe Button&#8221;. Click this button create a stripe button inside the form.<\/p>\n<figure id=\"attachment_5263\" aria-describedby=\"caption-attachment-5263\" style=\"width: 657px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5263\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-form-tag-handler.png\" alt=\"cf7 stripe form tag handler\" width=\"657\" height=\"584\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-form-tag-handler.png 657w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-form-tag-handler-247x220.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-form-tag-handler-510x453.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/cf7-stripe-form-tag-handler-300x267.png 300w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><figcaption id=\"caption-attachment-5263\" class=\"wp-caption-text\">cf7 stripe form tag handler<\/figcaption><\/figure>\n<p>When you want to insert the stripe button you have to set some values:<\/p>\n<ol>\n<li><strong>Label<br \/>\n<\/strong>Or: Button text<br \/>\nExample: Pay with Stripe<\/li>\n<li>Item Description<br \/>\nOr: Button text<br \/>\nExample: Pay with Stripe<\/li>\n<li><strong>Amount<\/strong><br \/>\nOr: Costs of the product in cents!<br \/>\nExample: 1000 =&gt; 10 \u20ac<\/li>\n<li><strong>Item currency (3 digit ISO code)<\/strong><br \/>\nExample: eur<br \/>\nSee: https:\/\/stripe.com\/docs\/currencies<\/li>\n<li><strong>Class attribute<\/strong><br \/>\nExample: full-width<\/li>\n<\/ol>\n<p>After filled out just click on insert tag e voila: You have a button on the contact form called &#8220;Pay with Stripe&#8221;.<\/p>\n<figure id=\"attachment_5262\" aria-describedby=\"caption-attachment-5262\" style=\"width: 823px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5262\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/example-stripe-button-tag-in-contact-form-7.png\" alt=\"example stripe button tag in contact form 7\" width=\"823\" height=\"282\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/example-stripe-button-tag-in-contact-form-7.png 823w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/example-stripe-button-tag-in-contact-form-7-247x85.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/example-stripe-button-tag-in-contact-form-7-510x175.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/example-stripe-button-tag-in-contact-form-7-300x103.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2017\/08\/example-stripe-button-tag-in-contact-form-7-768x263.png 768w\" sizes=\"auto, (max-width: 823px) 100vw, 823px\" \/><figcaption id=\"caption-attachment-5262\" class=\"wp-caption-text\">example stripe button tag in contact form 7<\/figcaption><\/figure>\n","protected":false},"author":1,"featured_media":0,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","product_cat":[],"class_list":["post-4073","faq","type-faq","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/4073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/types\/faq"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/comments?post=4073"}],"version-history":[{"count":3,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/4073\/revisions"}],"predecessor-version":[{"id":5266,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/4073\/revisions\/5266"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media?parent=4073"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/product_cat?post=4073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}