{"id":6313,"date":"2024-04-14T14:59:35","date_gmt":"2024-04-14T06:59:35","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6313"},"modified":"2024-04-14T14:59:35","modified_gmt":"2024-04-14T06:59:35","slug":"activate-online-payments","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/activate-online-payments\/","title":{"rendered":"Activate Online Payments"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Online Payments, like Apple Pay and Google Pay, enable your clients to evade the default checkout process and swiftly purchase from your shop using their digital wallets.<\/p>\n<p>If you have turned on Online Payments for your website, the appropriate Web Payment button will automatically appear on the cart and checkout page for supported browsers. You can also manually insert the Web payments feature into your cart or checkout page from the Add panel.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b9483d65a683fd39bf670b_5e613115dcb1b66359e3dd91_5c6e852533e4334937d145d9_web-payments.jpeg\" title=\"64b9483d65a683fd39bf670b_5e613115dcb1b66359e3dd91_5c6e852533e4334937d145d9_web-payments\"><\/div>\n<\/figure>\n<h5>Information in this guide<\/h5>\n<ol>\n<li>Activate Online Payments<\/li>\n<li>Customize online payment buttons<\/li>\n<li>Comprehend how customers make payments via Online Payments<\/li>\n<\/ol>\n<h2>Activate Online Payments<\/h2>\n<p>Online Payments are enabled by default on all checkout pages. You can deactivate this payment method by removing the Online Payments element from your page.<\/p>\n<h6>To validate your domain for Apple pay, you may need to publish your site to your custom domain.<\/h6>\n<p>You can also manually activate or deactivate Online Payments in your Ecommerce payment settings (Settings \u2192 Ecommerce \u2192 Payment \u2192 \u00a0Stripe \u2192 Web Payments) but first, you must:<\/p>\n<ol>\n<li>Link your Stripe account<\/li>\n<li>Incorporate an ecommerce site plan and activate checkout<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1668px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9483d65a683fd39bf6713_5e613115e37ec368cfde20c8_5d542dfa6e569a7a67b61155_web252520payments.gif\" title=\"64b9483d65a683fd39bf6713_5e613115e37ec368cfde20c8_5d542dfa6e569a7a67b61155_web252520payments\"><\/div>\n<\/figure>\n<h2>Customize online payment buttons<\/h2>\n<p>Upon activating Online Payments, you will notice the default \u201cApple pay\u201d button in your cart. Once you click the button, you can explore different payment buttons in the \u201c<strong>Online payment settings<\/strong>\u201d section within the <strong>Elements settings panel<\/strong>.<\/p>\n<p>You can also include an Online Payments element in your checkout form or cart from the Add panel.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9483d65a683fd39bf6717_5e6131152ea57bf3764de7e7_5c6bb6ba4126efc5ad388e95_image2525202019-02-18252520at2525209-30-30252520pm.png\" alt=\"Preview the Web Payment options and customize them.\" title=\"64b9483d65a683fd39bf6717_5e6131152ea57bf3764de7e7_5c6bb6ba4126efc5ad388e95_image2525202019-02-18252520at2525209-30-30252520pm\"><\/div>\n<\/figure>\n<p>You can preview and modify each button in the Online Payments Settings before activating <strong>Online Payments<\/strong> on your live site. To access the payment buttons, you need to click the \u201cWeb Payments&#8221; container in the Navigator. Then, you can access the \u201c<strong>Online payment settings<\/strong>\u201d section in the <strong>Elements settings panel<\/strong>.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b9483d65a683fd39bf670f_5e6131155d6b0e84db887b52_5c6bb8bce0130d1126059e4e_web-payment-settings.jpeg\" alt=\"Access the Web Payments Settings in the cart\" title=\"64b9483d65a683fd39bf670f_5e6131155d6b0e84db887b52_5c6bb8bce0130d1126059e4e_web-payment-settings\"><\/div><figcaption>Click the\u00a0&#8220;Continue to checkout&#8221; button on the canvas, then it will be easier to spot <em>the &#8220;<\/em><strong><em>Web Payments<\/em><\/strong><em>&#8221;\u00a0container in the Navigator, it&#8217;s a sibling of the &#8220;<\/em><strong><em>checkout button&#8221;<\/em><\/strong><em>.<\/em><\/figcaption><\/figure>\n<h4>Online Payments in the checkout page<\/h4>\n<p>Online Payments are also integrated into the <strong>checkout page<\/strong>. Therefore, remember to tailor them there as well. If you removed the Online Payments component from the checkout page, you can reintegrate it from the Add panel.<\/p>\n<p><strong>Explore further:<\/strong> Personalizing the checkout experience<\/p>\n<h2>Comprehend how customers make payments via Online Payments<\/h2>\n<p>Online Payment choices are visible only to customers visiting your store on browsers where they have stored payment methods. Thus, the available payment methods for customers vary based on the browser and device they are using.<\/p>\n<p>Shoppers who can view Online Payments can skip your site\u2019s usual checkout process by selecting the Web Payment button and confirming the transaction via Touch ID, a PIN, or a passcode. With pre-stored billing and shipping details, Online Payments help streamline checkout, especially on mobile devices.<\/p>\n<h5><strong>Apple pay<\/strong><\/h5>\n<p>Customers can utilize Apple Pay if they have saved payment details (credit or debit cards) on their iPhone, iPad, or Apple Watch. Apple Pay also facilitates Online Payments on Safari on iPhone, iPad, or Mac OS.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"319px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9483d65a683fd39bf6703_5e6131155d6b0e6844887b51_5c6e83ed76d895e394de5efe_apple252520pay.png\" title=\"64b9483d65a683fd39bf6703_5e6131155d6b0e6844887b51_5c6e83ed76d895e394de5efe_apple252520pay\"><\/div>\n<\/figure>\n<p><strong>References:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.apple.com\/apple-pay\/\">Apple pay [\u2197]<\/a><\/li>\n<li><a href=\"https:\/\/support.apple.com\/en-us\/HT208531\">Apple Pay device compatibility [\u2197]<\/a><\/li>\n<li><a href=\"https:\/\/developer.apple.com\/apple-pay\/acceptable-use-guidelines-for-websites\/\">Guidelines for businesses that wish to incorporate Apple Pay into their websites [\u2197]<\/a><\/li>\n<\/ul>\n<h5><strong>Pay with browser<\/strong><\/h5>\n<p>Google Pay and Microsoft Pay cater to users who have stored their payment and shipping details on Android and Windows devices. Google Pay serves Chrome desktop and Android users, while Microsoft Pay is available to websites accessed via Microsoft Edge.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"318px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b9483d65a683fd39bf6707_5e613115d2151307f6bb1a02_5c6e83fe88b2212d3031be4f_pay252520with252520browser.png\" title=\"64b9483d65a683fd39bf6707_5e613115d2151307f6bb1a02_5c6e83fe88b2212d3031be4f_pay252520with252520browser\"><\/div>\n<\/figure>\n<p><strong>References:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/pay.google.com\/about\/\">Google pay [\u2197]<\/a><\/li>\n<li><a href=\"https:\/\/www.microsoft.com\/en-us\/payments\/merchants\">Microsoft pay \u00a0[\u2197]<\/a><\/li>\n<\/ul>\n<h6><strong>Key information<\/strong><br \/>Presently, Firefox and other mobile browsers do not support Online Payments. As these browsers embrace Online Payments, additional payment methods will become accessible.<\/h6>\n<h3>The Online Payments checkout process<\/h3>\n<p>Opting to pay for an order using a web payment method circumvents your store\u2019s standard checkout process. Instead, a browser-native checkout process is initiated to complete the transaction. This window displays an order summary along with applicable shipping rates. Customers may have to pick a payment method if multiple cards are stored in their account. The same applies to billing and shipping details. Subsequently, they can validate the payment, place the order, and be directed to your store&#8217;s &#8220;order confirmation page&#8221; while also receiving an order confirmation email.<\/p>\n<p><strong>Reminder: Since web payments avoid your store&#8217;s standard checkout process, you may not collect extra information during checkout<\/strong><\/p>\n<blockquote><p>Important: You cannot modify the web payment checkout process that uses the browser&#8217;s default UI.<\/p><\/blockquote>\n<h3><strong>Web Payments and SCA compliance<\/strong><\/h3>\n<p>If your online store operates in the <a href=\"https:\/\/en.wikipedia.org\/wiki\/European_Economic_Area\">European Economic Area (EEA) [\u2197]<\/a>, customers from EEA countries will need to undergo an additional authentication layer to validate payment for their purchase. Card-based payment methods like <a href=\"https:\/\/stripe.com\/docs\/apple-pay\">Apple Pay [\u2197]<\/a> and <a href=\"https:\/\/stripe.com\/docs\/google-pay\">Google Pay [\u2197]<\/a> are already equipped with an authentication layer that ensures a smooth checkout process for online buyers while meeting the new <a href=\"https:\/\/stripe.com\/gb\/guides\/strong-customer-authentication\">PSD2 SCA regulations [\u2197]<\/a>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Enable Web Payments on your ecommerce store and customize Web Payment buttons.","protected":false},"author":2,"featured_media":5321,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[297],"tags":[],"class_list":{"0":"post-6313","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-ecommerce-user-accounts","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6313"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6313\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5173"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}