{"title":"WeChat Pay Component","category":"default","creationDate":1776961628,"content":"<p>This page explains how to add WeChat Pay to your existing Web Components integration.<\/p>\n<h2>Requirements<\/h2>\n\n<div id=\"tabDbHSj\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;&lt;code&gt;\\\/sessions&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Make sure that you have built a Sessions flow &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow?platform=Web&amp;amp;integration=Components\\&quot;&gt;Web Components integration&lt;\\\/a&gt;. &lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;To use the desktop QR code flow, &lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\&quot;&gt;add WeChat Pay in your Customer Area&lt;\\\/a&gt;.&lt;\\\/li&gt; &lt;li&gt;To use the mobile browser flow, contact our &lt;a href=\\&quot;https:\\\/\\\/ca-test.adyen.com\\\/ca\\\/ca\\\/contactUs\\\/support.shtml?form=other\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Support Team&lt;\\\/a&gt; with your web shop URL for enrolment with WeChat Pay.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&quot;,&quot;altTitle&quot;:&quot;sessions&quot;,&quot;oldTabId&quot;:&quot;sessions-requirements_1&quot;,&quot;relation&quot;:&quot;sessions&quot;},{&quot;title&quot;:&quot;&lt;code&gt;\\\/payments&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Make sure that you have built an Advanced flow &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/advanced-flow?platform=Web&amp;amp;integration=Components\\&quot;&gt;Web Components integration&lt;\\\/a&gt;. &lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin: &lt;ul&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;To use the desktop QR code flow, &lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\&quot;&gt;add WeChat Pay in your Customer Area&lt;\\\/a&gt;.&lt;\\\/li&gt; &lt;li&gt;To use the mobile browser flow, contact our &lt;a href=\\&quot;https:\\\/\\\/ca-test.adyen.com\\\/ca\\\/ca\\\/contactUs\\\/support.shtml?form=other\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Support Team&lt;\\\/a&gt; with your web shop URL for enrolment with WeChat Pay.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&quot;,&quot;altTitle&quot;:&quot;advanced&quot;,&quot;oldTabId&quot;:&quot;advanced-requirements_2&quot;,&quot;relation&quot;:&quot;advanced&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2>Import resources for v6<\/h2>\n<p>If you are using Web Components v6, <a href=\"\/pt\/online-payments\/build-your-integration\/?platform=Web&amp;integration=Drop-in&amp;version=6.0.0\">import the Component<\/a> that you need for WeChat Pay:<\/p>\n<pre><code class=\"language-js\">import { AdyenCheckout, WeChat } from '@adyen\/adyen-web'<\/code><\/pre>\n<h2>API reference<\/h2>\n<p>You do not need to send additional fields for WeChat Pay. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:<\/p>\n<ul>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/sessions\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/sessions<\/a>&#58; This is the default with <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Components\">Components v5.0.0<\/a> or later.<\/li>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a>&#58; If you implemented an <a href=\"\/pt\/online-payments\/build-your-integration\">additional use case<\/a>.<\/li>\n<\/ul>\n<h2>Component configuration<\/h2>\n<h3>Step 1: Create a DOM element<\/h3>\n<p>Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:<\/p>\n<pre><code class=\"language-html\"> &lt;div id=\"wechatpayWeb-container\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<h3>Step 2: Create an instance of the Component<\/h3>\n<h4>v6.0.0 or later<\/h4>\n<p>Create an instance of the Component, passing:<\/p>\n<ul>\n<li>Your instance of <code>AdyenCheckout<\/code>.<\/li>\n<\/ul>\n<pre><code class=\"language-js\">const wechatpayWeb = new WeChat(checkout).mount('#wechatpayWeb-container');<\/code><\/pre>\n<div class=\"accordion-shortcode adl-accordion adl-accordion--max-height-transition\" data-expand=\"true\" data-ignore=\"anchorjs-link\">\n    \n    <div class=\"adl-accordion__item\" style=\"\">\n        <div tabindex=\"0\" role=\"item\" aria-expanded=\"false\" class=\"adl-accordion__header\">\n            <i class=\"adl-accordion__toggle adl-icon-chevron-down\"><\/i>\n            <div class=\"adl-accordion__title-wrapper\" data-accordion=\"#v5-x-x-or-earlier\">\n                                    <h4 class=\"adl-accordion__title\">v5.x.x or earlier<\/h4>\n                            <\/div>\n        <\/div>\n        <div role=\"region\" class=\"adl-accordion__content\">\n            \n<p>Use the <code>create<\/code> method of your <code>AdyenCheckout<\/code> instance, in this case <code>checkout<\/code>, to create the Component:<\/p>\n<pre><code class=\"language-js\">const wechatpayWebComponent = checkout.create('wechatpayWeb').mount('#wechatpayWeb-container');<\/code><\/pre>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<h2 id=\"test-and-go-live\">Test and go live<\/h2>\n<\/li>\n<\/ul>\n<p>You can check the status of a WeChat Pay payment in your\u00a0<a href=\"https:\/\/ca-live.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>\u00a0&gt;\u00a0<strong>Transactions<\/strong>\u00a0&gt;\u00a0<strong>Payments<\/strong>.<\/p>\n<p><\/p>\n<p>Before you can accept live WeChat Pay payments, you need to submit a request for WeChat Pay in your <a href=\"https:\/\/ca-live.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">live Customer Area<\/a>.<\/p>\n<h2 id=\"see-also\">See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/online-payments\/components-web\"\n                        target=\"_self\"\n                        >\n                    Web Components integration guide\n                <\/a><\/li><li><a href=\"\/development-resources\/webhooks\"\n                        target=\"_self\"\n                        >\n                    Webhooks\n                <\/a><\/li><li><a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/overview\"\n                        target=\"_blank\"\n                         class=\"external\">\n                    API Explorer\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/wechat-pay\/wechat-pay-desktop-qr-payments\/web-component","articleFields":{"description":"Add WeChat Pay to an existing Components integration.","id":"47481283","type":"page","_expandable":{"operations":""},"status":"current","last_edit_on":"04-07-2019 10:57","parameters":{"integration":"Components","platform":"Web","integration_guide_url":"build-your-integration\/sessions-flow?platform=Web&integration=Components","component_name":"the Component","component_name_capitalized":"The Component","payment_method":"WeChat Pay","component_class":"WeChat","payment_method_type":"wechatpayWeb","component_js_const":"wechatpayWeb"}},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/wechat-pay\/wechat-pay-desktop-qr-payments\/web-component","title":"WeChat Pay Component","content":"This page explains how to add WeChat Pay to your existing Web Components integration.\nRequirements\n\n\n    \n        \n        \n    \n\n\nImport resources for v6\nIf you are using Web Components v6, import the Component that you need for WeChat Pay:\nimport { AdyenCheckout, WeChat } from '@adyen\/adyen-web'\nAPI reference\nYou do not need to send additional fields for WeChat Pay. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:\n\n \/sessions&#58; This is the default with Components v5.0.0 or later.\n \/payments&#58; If you implemented an additional use case.\n\nComponent configuration\nStep 1: Create a DOM element\nCreate a DOM element on your checkout page, placing it where you want the payment method form to be rendered:\n &lt;div id=\"wechatpayWeb-container\"&gt;&lt;\/div&gt;\nStep 2: Create an instance of the Component\nv6.0.0 or later\nCreate an instance of the Component, passing:\n\nYour instance of AdyenCheckout.\n\nconst wechatpayWeb = new WeChat(checkout).mount('#wechatpayWeb-container');\n\n    \n    \n        \n            \n            \n                                    v5.x.x or earlier\n                            \n        \n        \n            \nUse the create method of your AdyenCheckout instance, in this case checkout, to create the Component:\nconst wechatpayWebComponent = checkout.create('wechatpayWeb').mount('#wechatpayWeb-container');\n\n        \n    \n\n\nTest and go live\n\n\nYou can check the status of a WeChat Pay payment in your\u00a0Customer Area\u00a0&gt;\u00a0Transactions\u00a0&gt;\u00a0Payments.\n\nBefore you can accept live WeChat Pay payments, you need to submit a request for WeChat Pay in your live Customer Area.\nSee also\n\n\n                    Web Components integration guide\n                \n                    Webhooks\n                \n                    API Explorer\n                \n","type":"page","locale":"pt","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"WeChat Pay","lvl3":"WeChat Pay QR for desktop browser and H5 for mobile browser.","lvl4":"WeChat Pay Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/wechat-pay","lvl3":"https:\/\/docs.adyen.com\/pt\/payment-methods\/wechat-pay\/wechat-pay-desktop-qr-payments","lvl4":"\/pt\/payment-methods\/wechat-pay\/wechat-pay-desktop-qr-payments\/web-component"},"levels":5,"category":"Payment method","category_color":"green","tags":["WeChat","Component"]}}
