{"title":"Japanese convenience stores Component","category":"default","creationDate":1567783140,"content":"<p>This page explains how to add Japanese convenience stores to your existing  Components integration.<\/p>\n<h2>Requirements<\/h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Requirement<\/th>\n<th style=\"text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Integration type<\/strong><\/td>\n<td style=\"text-align: left;\">Make sure that you have built your <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Components%2F%3Ftarget%3D_blank\">Components integration<\/a>.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Setup steps<\/strong><\/td>\n<td style=\"text-align: left;\">Before you begin:<ul><li markdown=\"1\"><a href=\"\/pt\/payment-methods\/add-payment-methods\">Add <strong>eContext Convenience Stores<\/strong> in your Customer Area<\/a> to support payments made through Lawson, Mini Stop, Family Mart, and Seicomart.<\/li><li markdown=\"1\"><a href=\"\/pt\/payment-methods\/add-payment-methods\">Add <strong>eContext PayEasy ATM<\/strong> in your Customer Area<\/a> to support ATM payments made through Pay-easy.<\/li><li markdown=\"1\"><a href=\"\/pt\/payment-methods\/add-payment-methods\">Add <strong>eContext PayEasy Online Banking<\/strong> in your Customer Area<\/a> to support online payments made through Pay-easy.<\/li><li markdown=\"1\"><a href=\"\/pt\/payment-methods\/add-payment-methods\">Add <strong>eContext 7Eleven<\/strong> in your Customer Area<\/a> to support payments made through 7-Eleven.<\/li><\/ul><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\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 Japanese convenience stores:<\/p>\n<pre><code class=\"language-js\">import { AdyenCheckout, Econtext } from '@adyen\/adyen-web'<\/code><\/pre>\n<h2>API reference<\/h2>\n<p>You do not need to send additional fields for Japanese convenience stores. 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<p>When creating an instance of the Component, specify which payment method type you want to use:<\/p>\n<ul>\n<li><span translate=\"no\"><strong>econtext_seven_eleven<\/strong><\/span> for 7-Eleven. The shopper is redirected to 7-Eleven's page where they see the voucher.<\/li>\n<li><span translate=\"no\"><strong>econtext_stores<\/strong><\/span> for Lawson, Mini Stop, Family Mart, and Seicomart. The shopper sees the voucher natively within your website.<\/li>\n<\/ul>\n<p>In the examples below, we show how to present an instance of the Component for <span translate=\"no\"><strong>econtext_stores<\/strong><\/span>.<\/p>\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=\"econtext_stores-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 konbini = new Econtext(checkout).mount('#econtext_stores-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 konbiniComponent = checkout.create('econtext_stores').mount('#econtext_stores-container');<\/code><\/pre>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<h3>Optional configuration<\/h3>\n<p>You can add the following optional configuration:<\/p>\n<table>\n<thead>\n<tr>\n<th>Parameter name<\/th>\n<th>Description<\/th>\n<th>Default<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>personalDetailsRequired<\/code><\/td>\n<td>Set to <strong>false<\/strong> to hide the input fields for shopper name, email, and telephone number. Added in <a href=\"\/pt\/online-payments\/release-notes?integration_type=web&amp;version=5.2.0\">v5.2.0<\/a><\/td>\n<td><strong>true<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>If you want to add optional configuration, include this in a configuration object. The following example shows how to configure the Component to hide the input fields for shopper name, email, and telephone number:<\/p>\n<pre><code class=\"language-js\">const konbiniConfiguration = {\n  personalDetailsRequired: false \/\/ Optional. Set to **false** to hide the input fields for shopper name, email, and telephone number.\n};<\/code><\/pre>\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<li>The  payment method-specific configuration.<\/li>\n<\/ul>\n<pre><code class=\"language-js\">const konbiniComponent = new Econtext(checkout, konbiniConfiguration).mount('#econtext_stores-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 an instance of the Component. Add the configuration object if you created one.<\/p>\n<pre><code class=\"language-js\">const konbiniComponent = checkout.create('econtext_stores', konbiniConfiguration).mount('#econtext_stores-container');<\/code><\/pre>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<h2 id=\"test-and-go-live\">Test and go live<\/h2>\n<div class=\"notices yellow\">\n<p>7-Eleven voucher payments can only be tested in the live environment. Contact our <a href=\"https:\/\/ca-test.adyen.com\/ca\/ca\/contactUs\/support.shtml?form=other\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Support Team<\/a> to set up 7-Eleven on the live environment for penny testing.<\/p>\n<\/div>\n<p>To test your integration, use the econtext simulator to complete voucher payments in Japanese convenience stores:<\/p>\n<ol>\n<li>Log in to the <a href=\"https:\/\/form.int.econ.ne.jp\/paynotice\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">econtext Simulator<\/a> using the following credentials:\n<ul>\n<li>Username: <code>ectest<\/code><\/li>\n<li>Password: <code>#Gwecn25<\/code><\/li>\n<\/ul><\/li>\n<li>In the first box, provide <strong>742001<\/strong> as the shopID.<\/li>\n<li>In the second box, provide the acquirer reference following the format below:\n<ul>\n<li><strong>&lt;pspReference>-262320-econtext_stores<\/strong><br \/>\nFor example, <strong>DZ4DPSHB4WD2WN82-262320-econtext_stores<\/strong><br \/>\nGet the <code>pspReference<\/code> from the webhook message with <code>eventType<\/code>: <strong>AUTHORISATION<\/strong>.<\/li>\n<\/ul><\/li>\n<li>In the third box you select what you want to test.\n<ul>\n<li>Leave as default for Convenience Stores.<\/li>\n<li>Select <strong>\u30bb\u30d6\u30f3\u30a4\u30ec\u30d6\u30f3<\/strong> for 7-Eleven.<\/li>\n<li>Select <strong>Pay-easy(Bank Name)<\/strong> for Pay-easy ATM and Pay-easy Online Banking.<\/li>\n<\/ul><\/li>\n<li>Leave the fourth box (\u5165\u91d1\u65e5\u6642, the time of payment) empty.<\/li>\n<li>Click <strong>\u9001\u4fe1<\/strong> (Submit).<\/li>\n<li>Wait for 15 minutes for the webhook.<\/li>\n<\/ol>\n<p>Check the status of voucher payments in the test environment in your <a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>:<\/p>\n<ul>\n<li>Vouchers that are pending or that have expired are under <strong>Transactions<\/strong> &gt; <strong>Offers<\/strong>.<\/li>\n<li>Vouchers that have been paid are under <strong>Transactions<\/strong> &gt; <strong>Payments<\/strong>.<\/li>\n<\/ul>\n<p>Before you can accept payments through Japanese convenience stores in live environment, you need to <a href=\"\/pt\/payment-methods\/add-payment-methods\">submit a request to add 7-Eleven or other Japanese convenience stores<\/a> 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\/econtext-konbini\/web-component","articleFields":{"description":"Accept payments through Japanese convenience stores using your existing Components integration.","parameters":{"integration":"Components","plaform":"Web","integration_guide_url":"build-your-integration\/sessions-flow?platform=Web&integration=Components","component_name":"the Component","component_name_capitalized":"The Component","payment_method":"Japanese convenience stores","payment_method_type":"econtext_stores","payment_class":"Econtext","component_class":"Econtext","component_js_const":"konbini","payment_method_type_711":"econtext_seven_eleven","return_url":"https:\/\/your-company.example.com\/checkout?shopperOrder=12xy..","component_name_711":"jpseveneleven"},"last_edit_on":"12-06-2020 10:22"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/econtext-konbini\/web-component","title":"Japanese convenience stores Component","content":"This page explains how to add Japanese convenience stores to your existing  Components integration.\nRequirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have built your Components integration.\n\n\nSetup steps\nBefore you begin:Add eContext Convenience Stores in your Customer Area to support payments made through Lawson, Mini Stop, Family Mart, and Seicomart.Add eContext PayEasy ATM in your Customer Area to support ATM payments made through Pay-easy.Add eContext PayEasy Online Banking in your Customer Area to support online payments made through Pay-easy.Add eContext 7Eleven in your Customer Area to support payments made through 7-Eleven.\n\n\n\nImport resources for v6\nIf you are using Web Components v6, import the Component that you need for Japanese convenience stores:\nimport { AdyenCheckout, Econtext } from '@adyen\/adyen-web'\nAPI reference\nYou do not need to send additional fields for Japanese convenience stores. 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\nWhen creating an instance of the Component, specify which payment method type you want to use:\n\necontext_seven_eleven for 7-Eleven. The shopper is redirected to 7-Eleven's page where they see the voucher.\necontext_stores for Lawson, Mini Stop, Family Mart, and Seicomart. The shopper sees the voucher natively within your website.\n\nIn the examples below, we show how to present an instance of the Component for econtext_stores.\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=\"econtext_stores-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 konbini = new Econtext(checkout).mount('#econtext_stores-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 konbiniComponent = checkout.create('econtext_stores').mount('#econtext_stores-container');\n\n        \n    \n\n\nOptional configuration\nYou can add the following optional configuration:\n\n\n\nParameter name\nDescription\nDefault\n\n\n\n\npersonalDetailsRequired\nSet to false to hide the input fields for shopper name, email, and telephone number. Added in v5.2.0\ntrue\n\n\n\nIf you want to add optional configuration, include this in a configuration object. The following example shows how to configure the Component to hide the input fields for shopper name, email, and telephone number:\nconst konbiniConfiguration = {\n  personalDetailsRequired: false \/\/ Optional. Set to **false** to hide the input fields for shopper name, email, and telephone number.\n};\nv6.0.0 or later\nCreate an instance of the Component, passing:\n\nYour instance of AdyenCheckout.\nThe  payment method-specific configuration.\n\nconst konbiniComponent = new Econtext(checkout, konbiniConfiguration).mount('#econtext_stores-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 an instance of the Component. Add the configuration object if you created one.\nconst konbiniComponent = checkout.create('econtext_stores', konbiniConfiguration).mount('#econtext_stores-container');\n\n        \n    \n\n\nTest and go live\n\n7-Eleven voucher payments can only be tested in the live environment. Contact our Support Team to set up 7-Eleven on the live environment for penny testing.\n\nTo test your integration, use the econtext simulator to complete voucher payments in Japanese convenience stores:\n\nLog in to the econtext Simulator using the following credentials:\n\nUsername: ectest\nPassword: #Gwecn25\n\nIn the first box, provide 742001 as the shopID.\nIn the second box, provide the acquirer reference following the format below:\n\n&lt;pspReference>-262320-econtext_stores\nFor example, DZ4DPSHB4WD2WN82-262320-econtext_stores\nGet the pspReference from the webhook message with eventType: AUTHORISATION.\n\nIn the third box you select what you want to test.\n\nLeave as default for Convenience Stores.\nSelect \u30bb\u30d6\u30f3\u30a4\u30ec\u30d6\u30f3 for 7-Eleven.\nSelect Pay-easy(Bank Name) for Pay-easy ATM and Pay-easy Online Banking.\n\nLeave the fourth box (\u5165\u91d1\u65e5\u6642, the time of payment) empty.\nClick \u9001\u4fe1 (Submit).\nWait for 15 minutes for the webhook.\n\nCheck the status of voucher payments in the test environment in your Customer Area:\n\nVouchers that are pending or that have expired are under Transactions &gt; Offers.\nVouchers that have been paid are under Transactions &gt; Payments.\n\nBefore you can accept payments through Japanese convenience stores in live environment, you need to submit a request to add 7-Eleven or other Japanese convenience stores 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":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Japanese convenience stores","lvl3":"Japanese convenience stores 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\/econtext-konbini","lvl3":"\/pt\/payment-methods\/econtext-konbini\/web-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Japanese","convenience","stores","Component"]}}