--- title: "DOKU payment methods Component" description: "Add payments through bank transfers and convenience stores in Indonesia to an existing Components integration." url: "https://docs.adyen.com/payment-methods/doku/component" source_url: "https://docs.adyen.com/payment-methods/doku/component.md" canonical: "https://docs.adyen.com/payment-methods/doku/component" last_modified: "2019-12-06T14:57:00+01:00" language: "en" --- # DOKU payment methods Component Add payments through bank transfers and convenience stores in Indonesia to an existing Components integration. [View source](/payment-methods/doku/component.md) This page explains how to add DOKU payment methods to your existing Web Components integration. Through our partner DOKU, we offer various [bank transfer payment methods](/payment-methods/doku#bank-transfer) and [convenience store payment methods](/payment-methods/doku#convenience-store) in Indonesia. ## Requirements Select the [server-side flow](/online-payments/build-your-integration) that your integration uses: ### Tab: Sessions flow | Requirement | Description | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Integration type** | Make sure that you have built a Sessions flow [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components). | | **Setup steps** | Before you begin, [add DOKU payment methods in your Customer Area](/payment-methods/add-payment-methods). | ### Tab: Advanced flow | Requirement | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Integration type** | Make sure that you have built an Advanced flow [Web Components integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components). | | **Setup steps** | Before you begin, [add DOKU payment methods in your Customer Area](/payment-methods/add-payment-methods). | ## 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 DOKU payment methods: ```js import { AdyenCheckout, Doku } from '@adyen/adyen-web' ``` ## API reference You do not need to send additional fields for DOKU payment methods. 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 The Component to create depends on the payment method type: | `name` | `type` | Kind of payment method | | ----------------------- | -------------------------------------------------- | ---------------------- | | Alfamart | doku\_alfamart | Convenience store | | Bank Transfer (Permata) | doku\_permata\_lite\_atm | Bank transfer | | BCA Bank Transfer | doku\_bca\_va (only available with a local entity) | Bank transfer | | BNI VA | doku\_bni\_va | Bank transfer | | BRI VA | doku\_bri\_va (only available with a local entity) | Bank transfer | | CIMB VA | doku\_cimb\_va | Bank transfer | | Danamon VA | doku\_danamon\_va | Bank transfer | | Indomaret | doku\_indomaret | Convenience store | | Mandiri VA | doku\_mandiri\_va | Bank transfer | In the examples below, we use a scenario where the shopper chooses to pay in an Alfamart convenience store. ### 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 dokuAlfamart = new Doku(checkout).mount('#doku_alfamart-container'); ``` ** #### v5.x.x or earlier Use the `create` method of your `AdyenCheckout` instance, in this case `checkout`, to create the Component: ```js const dokuAlfamartComponent = checkout.create('doku_alfamart').mount('#doku_alfamart-container'); ``` ## Customization You can customize the expiry date of the virtual bank account (for bank transfers) or the voucher (for convenience store payments). By default, the validity period is 48 hours. To change the validity period, contact the [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other). You can change the language of the voucher to Indonesian by using the `locale` **id-ID**. For instructions, refer to [Localizing Components](/online-payments/build-your-integration/sessions-flow/?platform=Web\&integration=Drop-in#optional-configuration). ## Test and go live Use our [test vouchers and card numbers](/development-resources/test-cards-and-credentials/alternative-payment-method-credentials#doku) to simulate the payments. Check the status of the test payments in your [Customer Area](https://ca-test.adyen.com/), under **Transactions** > **Payments**. Before you can accept live payments, you need to [submit a request](/payment-methods/add-payment-methods) for one or more Indonesian DOKU online banking or convenience store 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)