PayNow Drop-in integration

Our iOS Drop-in renders PayNow in your payment form, and generates a QR code that the shopper uses to pay with their banking app.

Before you begin

This page explains how to add PayNow to your existing iOS Drop-in integration. The iOS Drop-in integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Drop-in integration guide.

Before starting your PayNow integration:

1. Make sure that you have set up your back end implementation, and added Drop-in to your payment form.
2. Contact our Support Team to enable PayNow.

Show PayNow in your payment form

Drop-in uses the countryCode and the amount.currency from your /paymentMethods request to show the available payment methods to your shopper. Complete the following to show PayNow in your payment form:

1. Specify the following parameters in your /paymentMethods request:
   • countryCode: SG
   • amount.currency: SGD
   • amount.value: The value of the payment

Make a payment

When the shopper proceeds to pay, Drop-in invokes the didSubmit method which contains data.paymentMethod.

1. Pass data.paymentMethod to your server.

2. From your server, make a /payments request, specifying paymentMethod: the data.paymentMethod from the didSubmit event from your client app.

   curl Ruby Java PHP Python C# NodeJS

   curl Ruby Java PHP Python C# NodeJS

   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": "SGD",
           "value": 1000
       },
       "paymentMethod": {
           "type": "paynow"
       },
       "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 => "SGD",
       :value => 1000
     },
     :paymentMethod => {
       :type => "paynow"
     },
     :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("SGD");
   amount.setValue(1000);
   paymentsRequest.setAmount(amount);
   
   DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
   paymentMethodDetails.setType("paynow");
   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" => "SGD",
       "value" => 1000
     ],
     "paymentMethod" => [
       "type" => "paynow"
     ],
     "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": "paynow"
     },
     "amount": {
       "currency": "SGD",
       "value": 1000
     }
   })

   // 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 = "paynow" },
      Amount = new Adyen.Model.Checkout.Amount(currency: "SGD", value: 1000)
   };

   // 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: "paynow"
     },
     amount: {
        currency: "SGD",
        value: "1000"
     },
   }).then(res => res);

   https://docs.adyen.com/pt/pt/payment-methods/paynow/ios-drop-in#paynow-payments

   Drop-in generates the QR code that the shopper uses to pay.

Check the payment result

To check the payment result, use the state.data object from the corresponding event handler:

• onAdditionalDetailsfor successful payments
• onError for unsuccessful or timed out payments

1. From your server, make a POST /payments/details request with:
   • details: the state.data.details from the onAdditionalDetails or onError event
   • paymentData: the state.data.paymentData from the onAdditionalDetails or onError event
   /payments/details request

   {
   "{hint:state.data.details from onAdditionalDetails or onError}details{/hint}": {
   "redirectResult": "X6XtfGC3!Y..."
   },
   "{hint:state.data.paymentData from onAdditionalDetails or on Error}paymentData{/hint}": "Ab02b4c0!BQABAgCX79JLFTqePTGTb..."
   }

   https://docs.adyen.com/pt/pt/payment-methods/paynow/ios-component#-payments-details-request
   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. You can present this value to your shopper.
   /payments/details response

   {
     "additionalData":
     {
       "authorisedAmountCurrency": "SGD",
       "authorisedAmountValue": "1000"
     },
     "pspReference": "88154795347618C",
     "resultCode": "Authorised"
   }

   https://docs.adyen.com/pt/pt/payment-methods/paynow/ios-component#-payments-details-response

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 PayNow are:

Test and go live

Test PayNow payments with real payment details and small amounts.
Check the status of your test PayNow payments in your Customer Area > Transactions > Payments.
To accept live payments, you must contact our Support Team to add in your live Customer Area.

See also