Overview

This topic describes how to accept payments from your customers via APMs using Nuvei Web SDK methods.

1. Initiate a Session

See the Web SDK Initiate a Session topic.

2. Initialize the Web SDK

Instantiate the Web SDK with the sessionToken received from the server call to /openOrder.

// Instantiate Nuvei API
var sfc = SafeCharge({
   env: 'int', // Nuvei API environment - 'int' (integration) or 'prod' (production - default if omitted)
   merchantId : '<your merchantId>', //as assigned by Nuvei
   merchantSiteId : '<your merchantSiteId>' //as assigned by Nuvei
});

3. Get APM Details (optional)

The getAPMs() method returns details of supported APMs, which can be displayed to customers, such as the APM display name, logo, etc. The APM name field is needed to specify the APM in the payment request. If you already have the relevant APM details, then there is no need to call this method.

This example retrieves APM details for a customer from the UK (GB) who uses GBP currency.

Example getApms() Request

sfc.getApms({
  "currencyCode": "GBP",
  "countryCode": "GB",
  "languageCode": "en"
}, function(res) {
  console.log(res)
})

The getAPMs() method returns a JSON response.

In the example response below, two payment methods are returned:

• A card: "paymentMethod": "cc_card"
• A PayPal APM: "paymentMethod": "apmgw_expresscheckout"

These can be used in the next step to make the payment using the createPayment() method.

Example getApms() Response

{
  "paymentMethods": [{
    "paymentMethod": "cc_card",
    "paymentMethodDisplayName": [{
      "language": "en",
      "message": "Credit Card"
    }],
    "countries": ["GB"],
    "currencies": ["GBP"],
    "logoURL": "https://cdn-int.safecharge.com/ppp_resources/02251608/resources/img/svg/default_cc_card.svg",
    "fields": [{
      "name": "ccCardNumber",
      "type": "text",
      "caption": []
    }, {
      "name": "ccExpMonth",
      "type": "text",
      "caption": []
    }, {
      "name": "ccExpYear",
      "type": "text",
      "caption": []
    }, {
      "name": "ccNameOnCard",
      "type": "text",
      "caption": []
    }]
  }, {
    "paymentMethod": "apmgw_expresscheckout",
    "paymentMethodDisplayName": [{
      "language": "en",
      "message": "PayPal"
    }],
    "isDirect": "false",
    "countries": ["GB"],
    "currencies": ["GBP"],
    "logoURL": "https://cdn-int.safecharge.com/ppp_resources/02251608/resources/img/svg/paypal.svg",
    "fields": []
  }],
  "type": "DEPOSIT",
  "sessionToken": "50dd6b3a-ed65-4bae-bb76-184e4a4a00ba",
  "internalRequestId": 178003768,
  "status": "SUCCESS",
  "errCode": 0,
  "reason": "",
  "merchantId": "<your merchantId>",
  "merchantSiteId": "<your merchantSiteId>",
  "version": "1.0",
  "clientRequestId": "20200301153018"
}

4. Create an APM Payment

When processing a redirect-based APM payment, the Web SDK opens a new tab or an IFrame for the APM provider to collect payment details from the customer.

The createPayment() example below shows an APM payment using the paymentMethod parameter to specify the "apmgw_expresscheckout" PayPal APM.

Example createPayment() Request

sfc.createPayment({
  "sessionToken": "<sessiontoken>",
  "merchantId": "<your merchantId>",
  "merchantSiteId": "<your merchantSiteId>",
  "clientUniqueId": "695701003",
  "paymentOption": {
    "alternativePaymentMethod": {
      "paymentMethod": "apmgw_expresscheckout"
    }
  },
  "billingAddress": {
    "country": "GB",
    "email": "someone@somedomain.com"
  }
}, function(res) {
  console.log(res);
  if (res.cancelled === true) {
    example.querySelector('.token').innerText = 'cancelled';
  } else {
    example.querySelector('.token').innerText = res.transactionStatus + ' – Reference: ' + res.transactionId;
  }
  example.classList.add('submitted');
});

5. Redirect to the APM

Use the redirectUrl (from the response to the createPayment() request above) to redirect your customer to the APM’s URL.

6. Verifying the Response

See the Web SDK Response Verification topic.