Our DuitNow Component renders DuitNow in your payment form and collects your shopper's selected bank.
Before you begin
This page explains how to add DuitNow to your existing iOS Components integration. The iOS 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 DuitNow integration:
- Make sure that you have set up your back end implementation for making API requests.
- Contact our Support Team to enable DuitNow.
Show DuitNow in your payment form
Include DuitNow in the list of available payment methods.
-
Specify in your /paymentMethods request:
- countryCode: MY.
- amount.currency: MYR.
- channel: Specify iOS.
-
Decode the
/paymentMethods
response with thePaymentMethods
structure.
Findlet paymentMethods = try JSONDecoder().decode(PaymentMethods.self, from: paymentMethodsResponse)
paymentMethods.type
duitnow and put it into an object. For example,duitnowPaymentMethod
. -
Create an instance of
APIContext
with the following parameters:Parameter name Required Description clientKey
Your client key. environment
Use test. When you're ready to accept live payments, change the value to one of our live environments. // When you're ready to go live, change environment to Environment.live // You can also use other environment values described in https://adyen.github.io/adyen-ios/Docs/Structs/Environment.html let apiContext = APIContext(environment: Environment.test, clientKey: clientKey)
- Initialize the DuitNow Component:
let duitnowComponent = DuitNowComponent(paymentMethod: duitnowPaymentMethod, apiContext: apiContext) duitnowComponent.delegate = self // In this example, the Pay button will display 10 MYR. // The value is in minor units. Change the currencyCode to the currency for the DuitNow Component. duitnowComponent.payment = Payment(amount: Amount(value: 1000, currencyCode: "MYR")) present(duitnowComponent.viewController, animated: true)
Make a payment
When the shopper proceeds to pay, the Component invokes the didSubmit
method containing the data.paymentMethod
from the PaymentComponentDelegate
.
- Pass the
data.paymentMethod
to your server. -
From your server, make a /payments request, specifying:
paymentMethod.type
: Thedata.paymentMethod
from your client app.
curl https://checkout-test.adyen.com/v69/payments \ -H "x-API-key: YOUR_X-API-KEY" \ -H "content-type: application/json" \ -d '{ "merchantAccount": "YOUR_MERCHANT_ACCOUNT", "amount": { "currency": "MYR", "value": 10000 }, "paymentMethod": { "type": "duitnow" }, "reference": "YOUR_ORDER_NUMBER" }'
# 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({ :merchantAccount => "YOUR_MERCHANT_ACCOUNT", :amount => { :currency => "MYR", :value => 10000 }, :paymentMethod => { :type => "duitnow" }, :reference => "YOUR_ORDER_NUMBER" })
// 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("MYR"); amount.setValue(10000); paymentsRequest.setAmount(amount); DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails(); paymentMethodDetails.setType("duitnow"); paymentsRequest.setPaymentMethod(paymentMethodDetails); paymentsRequest.setReference("YOUR_ORDER_NUMBER"); 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 = [ "merchantAccount" => "YOUR_MERCHANT_ACCOUNT", "amount" => [ "currency" => "MYR", "value" => 10000 ], "paymentMethod" => [ "type" => "duitnow" ], "reference" => "YOUR_ORDER_NUMBER" ]; $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({ "merchantAccount": "YOUR_MERCHANT_ACCOUNT", "reference": "YOUR_ORDER_NUMBER", "paymentMethod": { "type": "duitnow" }, "amount": { "currency": "MYR", "value": 10000 } })
// 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 paymentsRequest = new Adyen.Model.Checkout.PaymentRequest { MerchantAccount = "YOUR_MERCHANT_ACCOUNT", Reference = "YOUR_ORDER_NUMBER", PaymentMethod = new DefaultPaymentMethodDetails {Type = "duitnow"}, Amount = new Adyen.Model.Checkout.Amount(currency: "MYR", value: 10000), };
// 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 = '[MERCHANT_ACCOUNT]'; const client = new Client({ config }); client.setEnvironment("TEST"); const checkout = new CheckoutAPI(client); checkout.payments({ merchantAccount: "YOUR_MERCHANT_ACCOUNT", reference: "YOUR_ORDER_NUMBER", paymentMethod: { type: "duitnow" }, amount: { currency: "MYR", value: "10000" }, }).then(res => res);
The response contains the following data:
resultCode
: Pendingaction
: Contains the QR codeurl
andqrCodeData
.
{
"pspReference": "8815658961765250",
"resultCode": "Pending",
"action": {
"paymentData": "Ab02b4c0!BQABAgA...",
"paymentMethodType": "duitnow",
"type": "qrCode",
"url": "https://test.adyen.com/hpp/generateQRCodeImage.shtml?url=DMhpN90TFR2e7TzwHYRFkhw4brxm2wHBg",
"qrCodeData": "DMhpN90TFR2e7TzwHYRFkhw4brxm2wHBg"
}
}
Show the QR code
Use the information in the action
object of the /payments response to render the QR code.
action.url
: Use this URL to download the QR code.action.qrCodeData
: Use this to render the QR code on your checkout page.
The shopper can either scan the QR code, or take a screenshot of the QR code and upload it to their bank app.
Check the payment result
To check the payment result, use the state.data
object from the corresponding event handler:
onAdditionalDetails
for successful payments.onError
for unsuccessful or timed out payments.
From your server, make a POST /payments/details request with:
details
: thestate.data.details
from theonAdditionalDetails
oronError
event.paymentData
: thestate.data.paymentData
from theonAdditionalDetails
oronError
event.
You receive a response containing:
additionalData
: Object containing the value and currency for the payment.pspReference
: Our unique identifier for the transaction.resultCode
: Authorised for successful payments or Refused for unsuccessful or timed-out payments. Use this to present the payment result to your shopper.
Show the payment result
Use the resultCode
from the /payments/details response to show the payment outcome on your frontend.
You will also receive the outcome of the payment asynchronously in a webhook.
The resultCode
values you can receive for DuitNow are:
eventCode | success field | Description | Action to take |
---|---|---|---|
AUTHORISATION | false | The transaction failed. | Cancel the order and inform the shopper that the payment failed. |
AUTHORISATION | true | The shopper successfully completed the payment. | Inform the shopper that the payment has been successful and proceed with the order. |
If you are implementing an additional use case, you can make a /payments/details call to receive an immediate response.
Test and go live
Test DuitNow payments with real payment details and small amounts.
Check the status of your test DuitNow payments in your Customer Area > Transactions > Payments.
To accept live DuitNow payments, you must contact our Support Team to add DuitNow in your live Customer Area.