---
title: "Japanese convenience stores Component"
description: "Accept payments through Japanese convenience stores using your existing Components integration."
url: "https://docs.adyen.com/payment-methods/econtext-konbini/web-component"
source_url: "https://docs.adyen.com/payment-methods/econtext-konbini/web-component.md"
canonical: "https://docs.adyen.com/payment-methods/econtext-konbini/web-component"
last_modified: "2020-06-12T10:22:00+02:00"
language: "en"
---
# Japanese convenience stores Component
Accept payments through Japanese convenience stores using your existing Components integration.
[View source](/payment-methods/econtext-konbini/web-component.md)
This page explains how to add Japanese convenience stores to your existing Components integration.
## Requirements
| Requirement | Description |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Integration type** | Make sure that you have built your [Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components%2F%3Ftarget%3D_blank). |
| **Setup steps** | Before you begin:- [Add **eContext Convenience Stores** in your Customer Area](/payment-methods/add-payment-methods) to support payments made through Lawson, Mini Stop, Family Mart, and Seicomart.
- [Add **eContext PayEasy ATM** in your Customer Area](/payment-methods/add-payment-methods) to support ATM payments made through Pay-easy.
- [Add **eContext PayEasy Online Banking** in your Customer Area](/payment-methods/add-payment-methods) to support online payments made through Pay-easy.
- [Add **eContext 7Eleven** in your Customer Area](/payment-methods/add-payment-methods) to support payments made through 7-Eleven. |
## Import resources for v6
If you are using Web Components v6, [import the Component](/online-payments/build-your-integration/?platform=Web\&integration=Drop-in\&version=6.0.0) that you need for Japanese convenience stores:
```js
import { AdyenCheckout, Econtext } from '@adyen/adyen-web'
```
## API reference
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:
* [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions): This is the default with [Components v5.0.0](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components) or later.
* [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments): If you implemented an [additional use case](/online-payments/build-your-integration).
## Component configuration
When creating an instance of the Component, specify which payment method type you want to use:
* **econtext\_seven\_eleven** for 7-Eleven. The shopper is redirected to 7-Eleven's page where they see the voucher.
* **econtext\_stores** for Lawson, Mini Stop, Family Mart, and Seicomart. The shopper sees the voucher natively within your website.
In the examples below, we show how to present an instance of the Component for **econtext\_stores**.
### Step 1: Create a DOM element
Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:
```html
```
### Step 2: Create an instance of the Component
#### v6.0.0 or later
Create an instance of the Component, passing:
* Your instance of `AdyenCheckout`.
```js
const konbini = new Econtext(checkout).mount('#econtext_stores-container');
```
**
#### v5.x.x or earlier
Use the `create` method of your `AdyenCheckout` instance, in this case `checkout`, to create the Component:
```js
const konbiniComponent = checkout.create('econtext_stores').mount('#econtext_stores-container');
```
### Optional configuration
You can add the following optional configuration:
| Parameter name | Description | Default |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| `personalDetailsRequired` | Set to **false** to hide the input fields for shopper name, email, and telephone number. Added in [v5.2.0](/online-payments/release-notes?integration_type=web\&version=5.2.0) | **true** |
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:
```js
const konbiniConfiguration = {
personalDetailsRequired: false // Optional. Set to **false** to hide the input fields for shopper name, email, and telephone number.
};
```
#### v6.0.0 or later
Create an instance of the Component, passing:
* Your instance of `AdyenCheckout`.
* The payment method-specific configuration.
```js
const konbiniComponent = new Econtext(checkout, konbiniConfiguration).mount('#econtext_stores-container');
```
**
#### v5.x.x or earlier
Use 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.
```js
const konbiniComponent = checkout.create('econtext_stores', konbiniConfiguration).mount('#econtext_stores-container');
```
## Test and go live
7-Eleven voucher payments can only be tested in the live environment. Contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) to set up 7-Eleven on the live environment for penny testing.
To test your integration, use the econtext simulator to complete voucher payments in Japanese convenience stores:
1. Log in to the [econtext Simulator](https://form.int.econ.ne.jp/paynotice) using the following credentials:
* Username: `ectest`
* Password: `#Gwecn25`
2. In the first box, provide **742001** as the shopID.
3. In the second box, provide the acquirer reference following the format below:
* **\-262320-econtext\_stores**\
For example, **DZ4DPSHB4WD2WN82-262320-econtext\_stores**\
Get the `pspReference` from the webhook message with `eventType`: **AUTHORISATION**.
4. In the third box you select what you want to test.
* Leave as default for Convenience Stores.
* Select **セブンイレブン** for 7-Eleven.
* Select **Pay-easy(Bank Name)** for Pay-easy ATM and Pay-easy Online Banking.
5. Leave the fourth box (入金日時, the time of payment) empty.
6. Click **送信** (Submit).
7. Wait for 15 minutes for the webhook.
Check the status of voucher payments in the test environment in your [Customer Area](https://ca-test.adyen.com/):
* Vouchers that are pending or that have expired are under **Transactions** > **Offers**.
* Vouchers that have been paid are under **Transactions** > **Payments**.
Before 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](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/).
## See also
* [Web Components integration guide](/online-payments/components-web)
* [Webhooks](/development-resources/webhooks)
* [API Explorer](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/overview)