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");   

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.

See also