Japanese convenience stores Component

This page explains how to add Japanese convenience stores to your existing Components integration.

Requirements

Import resources for v6

If you are using Web Components v6, import the Component that you need for Japanese convenience stores:

import { AdyenCheckout,  } 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: This is the default with Components v5.0.0 or later.
• /payments: If you implemented an additional use case.

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:

 <div id="econtext_stores-container"></div>

Step 2: Create an instance of the Component

v6.0.0 or later

Create an instance of the Component, passing:

• Your instance of AdyenCheckout.

const konbini = new (checkout).mount('#econtext_stores-container');

const konbiniComponent = checkout.create('econtext_stores').mount('#econtext_stores-container');

Optional configuration

You can add the following optional configuration:

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:

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.

const konbini = new (checkout, konbiniConfiguration).mount('#econtext_stores-container');

const konbiniComponent = checkout.create('econtext_stores', konbiniConfiguration).mount('#econtext_stores-container');

Test and go live

To test your integration, use the econtext simulator to complete voucher payments in Japanese convenience stores.

1. Log in to the econtext Simulator 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:

   • pspReference-262320-econtext_stores
     For example, DZ4DPSHB4WD2WN82-262320-econtext_stores

   Get the pspReference from the AUTHORISATION webhook.

1. 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 PayEasy ATM and PayEasy Online Banking

1. Leave the fourth box 入金日時 (the time of payment) empty.

6. Select 送信 (Submit).

7. Wait for 15 minutes for the webhook.

Check the status of voucher payments in the test environment in your Customer Area:

• 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 in your live Customer Area.

See also