PayNow iOS Component

Our PayNow Component renders PayNow in your payment form.

Before you begin

This page explains how to add PayNow 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 PayNow integration:

1. Make sure that you have set up your back end implementation for making API requests.
2. Contact our Support Team to enable PayNow.

Show PayNow in your payment form

Include PayNow in the list of available payment methods.

1. Specify in your /paymentMethods request:
   • countryCode: SG
   • amount.currency: SGD
   • channel: Specify iOS
2. Decode the /paymentMethods response with the PaymentMethods structure.

   let paymentMethods = try JSONDecoder().decode(PaymentMethods.self, from: paymentMethodsResponse)

   Find paymentMethods.type paynow and put it into an object. For example, paynowPaymentMethod.
3. 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.

   APIContext initialization

   // 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)

   https://docs.adyen.com/pt/pt/payment-methods/molpay/ios-component#apicontext-initialization

4. Initialize the PayNow Component:

   let paynowComponent = paynowComponent(paymentMethod: paynowPaymentMethod, apiContext: apiContext)
   paynowComponent.delegate = self
   // In this example, the Pay button will display 10 SGD.
   // The value is in minor units. Change the currencyCode to the currency for the PayNow Component.
   paynowComponent.payment = Payment(amount: Amount(value: 1000,
                                                                 currencyCode: "SGD"))
   present(paynowComponent.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.

1. Pass the data.paymentMethod to your server.

2. From your server, make a /payments request, specifying paymentMethod.type: the data.paymentMethod 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-component#paynow-payments

   The response contains the following data:

   • resultCode: Pending
   • action: Contains the QR code qrCodeData.
   /payments response

   {
       "resultCode": "Pending",
       "action": {
           "paymentData": "Ab02b4c0!BQABAgA...",
           "paymentMethodType": "paynow",
           "type": "qrCode",
           "qrCodeData": "DMhpN90TFR2e7TzwHYRFkhw4brxm2wHBg"
       }
   }

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

Show the QR code

Use the information in the action object of the /payments response to render 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:

• 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