Search

Are you looking for test card numbers?

Would you like to contact support?

Payment-method icon

Component

Add Indonesian payment methods to an existing Component integration.

Use our Component to render Alfamart, Indomaret or bank transfer options in your payment form, and present the shopper with the payment voucher to complete the payment.

Before you begin

This page explains how to add bank transfer or convenience store payment methods to your existing Web Components integration. The Web Components integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Components integration guide.

Before starting your Indonesian payments integration:

Show the payment method in your payment form

The Web Components integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Components integration guide.

To use the required Component, you also need to:

  1. Add the payment method in your Customer Area.

  2. Pass in your /paymentMethods request:

    • countryCode: ID
    • amount.currency: IDR.

    The response should now include type corresponding to the type of Indonesian payment method (bank transfer or convenience store).

    name type Kind of payment method
    Mandiri VA doku_mandiri_va Bank transfer
    CIMB VA doku_cimb_va Bank transfer
    Danamon VA doku_danamon_va Bank transfer
    BNI VA doku_bni_va Bank transfer
    BRI VA doku_bri_va (only available with a local entity) Bank transfer
    BCA Bank Transfer doku_bca_va (only available with a local entity) Bank transfer
    Alfamart doku_alfamart Convenience store
    Indomaret doku_indomaret Convenience store
    Bank Transfer doku_permata_lite_atm Bank transfer
  3. Add the payment method Component:

    a. Create a DOM element for the Component, placing it where you want the form to be rendered:

    <div id="doku"></div>

    b. Create an instance of the Component, and mount it. You should also include:

    • dokuAlfamart.type: The contents of the type array of the object that you stored in the previous step. Alternatively, you can pass the entire paymentMethodsResponse object in AdyenCheckout.
const doku = checkout.create("doku_alfamart", {
    type: dokuAlfamartData.type,
    onChange: handleOnChange
}).mount("#doku");   

Make a payment

When the shopper selects to pay, the Component calls the onChange event, which contains a state.data.

  1. If state.isValid is true, collect the state.data and pass this to your server.

  2. From your server, make a /payments, specifying:
    • paymentMethod: The state.data.paymentMethod from the onChange event from your front end.

The following code sample is a /payments request for a Multibanco payment.

curl https://checkout-test.adyen.com/v51/payments \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
  "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
  "reference":"YOUR_ORDER_NUMBER",
  "amount":{
    "currency":"IDR",
    "value":1000
  },
  "{hint:state.data.paymentMethod from onSubmit}paymentMethod{/hint}":{
    "type":"doku_alfamart",
    "firstName":"John",
    "lastName":"Smith",
    "shopperEmail":"1212@aaa.com"
  },
  "returnUrl":"https://staging.doku.com/Suite/Receive",
}'
# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"
 
response = adyen.checkout.payments({
  :amount => {
    :currency => "IDR",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :paymentMethod => {
    :type => "doku_alfamart",
    :firstName => "John",
    :lastName => "Smith",
    :shopperEmail => "1212@aaa.com"
  },
  :returnUrl => "https://staging.doku.com/Suite/Receive",
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
})
// Set YOUR_X-API-KEY with the API key from the Customer Area.
// Change to Environment.LIVE and add the Live URL prefix when you're ready to accept live payments.
    Client client = new Client("YOUR_X-API-KEY", Environment.TEST);
    Checkout checkout = new Checkout(client);

    PaymentsRequest paymentsRequest = new PaymentsRequest();

    String merchantAccount = "YOUR_MERCHANT_ACCOUNT";
    paymentsRequest.setMerchantAccount(merchantAccount);

    Amount amount = new Amount();
    amount.setCurrency("IDR");
    amount.setValue(15000L);
    paymentsRequest.setAmount(amount);

    DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
    paymentMethodDetails.setType("doku_alfamart");
    paymentMethodDetails.setFirstName("John");
    paymentMethodDetails.setLastName("Smith");
    paymentMethodDetails.setShopperEmail("1212@aaa.com");
    paymentsRequest.setPaymentMethod(paymentMethodDetails);

    paymentsRequest.setReference("YOUR_ORDER_NUMBER");
    paymentsRequest.setReturnUrl("https://staging.doku.com/Suite/Receive");

    PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);
// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "IDR",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "doku_alfamart",
    "firstName" => "John",
    "lastName" => "Smith",
    "shopperEmail" => "1212@aaa.com"
  ),
  "returnUrl" => "https://staging.doku.com/Suite/Receive",
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($params);
#Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen.Adyen()
adyen.client.xapikey = 'YOUR_X-API-KEY'

result = adyen.checkout.payments({
   'amount': {
      'value': 1000,
      'currency': 'IDR'
   },
   'reference': 'YOUR_ORDER_NUMBER',
   'paymentMethod': {
      'type': 'doku_alfamart',
      'firstName': 'John',
      'lastName': 'Smith',
      'shopperEmail': '1212@aaa.com'
   },
   'returnUrl': 'https://staging.doku.com/Suite/Receive',
   'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
})
// Set your X-API-KEY with the API key from the Customer Area.
var client = new Client ("YOUR_X-API-KEY", Environment.Test);
var checkout = new Checkout(client);

var amount = new Model.Checkout.Amount("IDR", 1000);
var details = new Model.Checkout.DefaultPaymentMethodDetails{
  Type = "doku_alfamart",
  FirstName = "John",
  LastName = "Smith",
  ShopperEmail = "1212@aaa.com"
};
var paymentsRequest = new Model.Checkout.PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  ReturnUrl = @"https://staging.doku.com/Suite/Receive",
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  PaymentMethod = details
};

var paymentResponse = checkout.Payments(paymentsRequest);
// Set your X-API-KEY with the API key from the Customer Area.
const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
// Set your X-API-KEY with the API key from the Customer Area.
config.apiKey = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "IDR", value: 1000 },
    paymentMethod: {
        type: 'doku_alfamart',
        firstName: 'John',
        lastName: 'Smith',
        shopperEmail: '1212@aaa.com'
    },
    reference: "YOUR_ORDER_NUMBER",
    returnUrl: "https://staging.doku.com/Suite/Receive",
    merchantAccount: config.merchantAccount
}).then(res => res);

The /payments response contains:

  • resultCode: PresentToShopper
  • action: Object containing information about the voucher.
{
   "resultCode":"PresentToShopper",
   "action":{
      "expiresAt":"2019-07-21T16:59:00",
      "initialAmount":{
         "currency":"IDR",
         "value":1000
      },
      "instructionsUrl":"...",
      "merchantName":"YOUR_MERCHANT_NAME",
      "paymentMethodType":"doku_alfamart",
      "reference":"888882603010314",
      "shopperEmail":"1212@aaa.com",
      "shopperName":"J Smith",
      "totalAmount":{
         "currency":"IDR",
         "value":1000
      },
      "type":"voucher"
   }
}   
  1. Pass the action object to your front end. The Component needs the action object to present the voucher.

Present the payment result

Use the action object from the /payments response in createFromAction to present the voucher to the shopper.

As the voucher is an offline payment method, there is no need to handle the redirect back from the acquirer. We will send you a webhook notification informing you about the payment status.
The eventCode values you receive with your notification are:

eventCode success field Description Action to take resultCode
PENDING true The voucher reference is successfully created and the transaction is pending. Present the shopper with the voucher and wait for the payment. PresentToShopper
AUTHORISATION false The voucher reference is not successfully generated and the transaction failed. Cancel the order and inform the shopper that the payment failed. Error
AUTHORISATION true The shopper successfully completed the payment. Inform the shopper that the payment has been successful and proceed with the order. PresentToShopper
OFFER_CLOSED true The shopper did not complete the payment before the voucher expired. Cancel the order and inform the shopper that the payment timed out. PresentToShopper

Optional customization

You can customize the expiry date of the payment voucher. By default, the validity period is 48 hours. To change the validity of the voucher, contact the Support Team.

You can change the language of the payment voucher to Indonesian by using the language code id-ID.

Test and go live

Use our test vouchers and card numbers to simulate the payments.

Check the status of the test payments in your Customer Area, under Transactions > Payments.

Before you can accept live payments, you need to submit a request for online banking and cash payments at convenience stores in Indonesia in your live Customer Area.

See also