{"title":"DOKU payment methods Component","category":"default","creationDate":1776961628,"content":"<p>This page explains how to add DOKU payment methods to your existing Web Components integration.<\/p>\n<p>Through our partner DOKU, we offer various <a href=\"\/pt\/payment-methods\/doku#bank-transfer\">bank transfer payment methods<\/a> and <a href=\"\/pt\/payment-methods\/doku#convenience-store\">convenience store payment methods<\/a> in Indonesia.<\/p>\n<h2>Requirements<\/h2>\n<p>Select the <a href=\"\/pt\/online-payments\/build-your-integration\">server-side flow<\/a> that your integration uses:<\/p>\n\n<div id=\"tabWScVt\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Sessions flow&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;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\&quot;&gt;add DOKU payment methods in your Customer Area&lt;\\\/a&gt;.&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;Advanced flow&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;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\&quot;&gt;add DOKU payment methods in your Customer Area&lt;\\\/a&gt;.&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 DOKU payment methods:<\/p>\n<pre><code class=\"language-js\">import { AdyenCheckout, Doku } from '@adyen\/adyen-web'<\/code><\/pre>\n<h2>API reference<\/h2>\n<p>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:<\/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>\nThe Component to create depends on the payment method type:\n<table>\n<thead>\n<tr>\n<th><code>name<\/code><\/th>\n<th><code>type<\/code><\/th>\n<th>Kind of payment method<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Alfamart<\/td>\n<td>doku_alfamart<\/td>\n<td>Convenience store<\/td>\n<\/tr>\n<tr>\n<td>Bank Transfer (Permata)<\/td>\n<td>doku_permata_lite_atm<\/td>\n<td>Bank transfer<\/td>\n<\/tr>\n<tr>\n<td>BCA Bank Transfer<\/td>\n<td>doku_bca_va (only available with a local entity)<\/td>\n<td>Bank transfer<\/td>\n<\/tr>\n<tr>\n<td>BNI VA<\/td>\n<td>doku_bni_va<\/td>\n<td>Bank transfer<\/td>\n<\/tr>\n<tr>\n<td>BRI VA<\/td>\n<td>doku_bri_va (only available with a local entity)<\/td>\n<td>Bank transfer<\/td>\n<\/tr>\n<tr>\n<td>CIMB VA<\/td>\n<td>doku_cimb_va<\/td>\n<td>Bank transfer<\/td>\n<\/tr>\n<tr>\n<td>Danamon VA<\/td>\n<td>doku_danamon_va<\/td>\n<td>Bank transfer<\/td>\n<\/tr>\n<tr>\n<td>Indomaret<\/td>\n<td>doku_indomaret<\/td>\n<td>Convenience store<\/td>\n<\/tr>\n<tr>\n<td>Mandiri VA<\/td>\n<td>doku_mandiri_va<\/td>\n<td>Bank transfer<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>In the examples below, we use a scenario where the shopper chooses to pay in an Alfamart convenience store.<\/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=\"doku_alfamart-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 dokuAlfamart = new Doku(checkout).mount('#doku_alfamart-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 dokuAlfamartComponent = checkout.create('doku_alfamart').mount('#doku_alfamart-container');<\/code><\/pre>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<h2>Customization<\/h2>\n<p>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 <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>.<\/p>\n<p>You can change the language of the voucher to Indonesian by using the <code>locale<\/code> <span translate=\"no\"><strong>id-ID<\/strong><\/span>. For instructions, refer to <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow\/?platform=Web&amp;integration=Drop-in#optional-configuration\">Localizing Components<\/a>.<\/p>\n<h2 id=\"test-and-go-live\">Test and go live<\/h2>\n<p>Use our <a href=\"\/pt\/development-resources\/test-cards-and-credentials\/alternative-payment-method-credentials#doku\">test vouchers and card numbers<\/a> to simulate the payments.<\/p>\n<p><\/p>\n<p>Check the status of the test payments in your <a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>, under <strong>Transactions<\/strong> &gt; <strong>Payments<\/strong>.<\/p>\n<p> <\/p>\n<p>Before you can accept live payments, you need to <a href=\"\/pt\/payment-methods\/add-payment-methods\">submit a request<\/a> for one or more Indonesian DOKU online banking or convenience store payment methods 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\/doku\/component","articleFields":{"description":"Add payments through bank transfers and convenience stores in Indonesia to an existing Components integration.","last_edit_on":"06-12-2019 14: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":"DOKU payment methods","component_class":"Doku","payment_method_type":"doku_alfamart","component_js_const":"dokuAlfamart"}},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/doku\/component","title":"DOKU payment methods Component","content":"This page explains how to add DOKU payment methods to your existing Web Components integration.\nThrough our partner DOKU, we offer various bank transfer payment methods and convenience store payment methods in Indonesia.\nRequirements\nSelect the server-side flow that your integration uses:\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 DOKU payment methods:\nimport { AdyenCheckout, Doku } from '@adyen\/adyen-web'\nAPI reference\nYou 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:\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\nThe Component to create depends on the payment method type:\n\n\n\nname\ntype\nKind of payment method\n\n\n\n\nAlfamart\ndoku_alfamart\nConvenience store\n\n\nBank Transfer (Permata)\ndoku_permata_lite_atm\nBank transfer\n\n\nBCA Bank Transfer\ndoku_bca_va (only available with a local entity)\nBank transfer\n\n\nBNI VA\ndoku_bni_va\nBank transfer\n\n\nBRI VA\ndoku_bri_va (only available with a local entity)\nBank transfer\n\n\nCIMB VA\ndoku_cimb_va\nBank transfer\n\n\nDanamon VA\ndoku_danamon_va\nBank transfer\n\n\nIndomaret\ndoku_indomaret\nConvenience store\n\n\nMandiri VA\ndoku_mandiri_va\nBank transfer\n\n\n\nIn the examples below, we use a scenario where the shopper chooses to pay in an Alfamart convenience store.\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=\"doku_alfamart-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 dokuAlfamart = new Doku(checkout).mount('#doku_alfamart-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 dokuAlfamartComponent = checkout.create('doku_alfamart').mount('#doku_alfamart-container');\n\n        \n    \n\n\nCustomization\nYou 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.\nYou can change the language of the voucher to Indonesian by using the locale id-ID. For instructions, refer to Localizing Components.\nTest and go live\nUse our test vouchers and card numbers to simulate the payments.\n\nCheck the status of the test payments in your Customer Area, under Transactions &gt; Payments.\n \nBefore you can accept live payments, you need to submit a request for one or more Indonesian DOKU online banking or convenience store payment methods 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":"Bank transfers and convenience store payments in Indonesia","lvl3":"DOKU payment methods 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\/doku","lvl3":"\/pt\/payment-methods\/doku\/component"},"levels":4,"category":"Payment method","category_color":"green","tags":["payment","methods","Component"]},"articleFiles":{"doku-payments.js":"<p alt=\"\">doku-payments.js<\/p>"}}