Payment integration with Node / Javascript --> using redirect

[ChristianMEC]

Please I need help integrating the viva-payment trough redirect using Node / Javascript.

Documentation from developer pages is bad, not complete and not working ... please check that too.

I want to implement viva-payments for a shopping platform where will be tens of businesses with hundreds of transactions monthly.

[matthewrgourd]

HI @ChristianMEC, sorry to hear this. Please let me know exactly which bits you're having a problem with. Screenshots and any sample code will be a great help if you have these. FYI, our Native Checkout v2 solution is more up-to-date than Redirect Checkout and involves an embedded payment form. You may prefer this to a redirect page.

[ChristianMEC]

I prefer redirect page. I don't want have access to any data regarding customers cards.

This is a test code I did:

const handleOnlinePayment = async () => {
    const config = {
      headers: {
        'Accept': '*/*',
        'Accept-Encoding': 'gzip, deflate, br',
        'Content-Type': 'application/json',
        'Authorization': 'Basic cTFmYWdkOWV6anp1.....' // the code is generated from base64(clientID:secretID)
      }
    };

    const data = {
      "tags": [
        "tag 1",
        "tag 2",
        "tag 3"
    ],
    "email": "customer@domain.com",
    "phone": "2117604000",
    "fullName": "Customer Name",
    "paymentTimeOut": 86400,
    "requestLang": "en-US",
    "amount": 100,
    "merchantTrns": "Your reference",
    "customerTrns": "Description that the customer sees"
    };

    const PRODUCTION_URL = 'https://www.vivapayments.com/api'
    const response = await axios.post(PRODUCTION_URL+"/orders", JSON.stringify(data), config)
    console.log({ response })

    // const PRODUCT_REDIRECT_URL = 'https://www.vivapayments.com/web/newtransaction.aspx?ref='
  }

[matthewrgourd]

Hi @ChristianMEC, our redirect checkout uses basic auth for authentication. So base64 value should be generated from Merchant ID: API Key rather than Client ID: Client Secret. Hope this helps!

[ChristianMEC]

ok. Now i get on Postman the OrderCode.

I am doing the test from my localserver which has "http" protocol.

How can I pass this error Access to XMLHttpRequest at 'https://www.vivapayments.com/api/orders' from origin 'http://pschei.go.ro' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ?

In viva wallet admin --> sales --> website -- I set my website from where I can send the payment request

[matthewrgourd]

Hi @ChristianMEC, you do your POST to https://www.vivapayments.com/api/orders via a back-end channel, get your order ID then open https://www.vivapayments.com/web/checkout?ref=[order ID] in a browser.

[ChristianMEC]

As you said, this is what I want to achieve. To get that order ID the open the redirect page.

The app where I want to integrate this payment is a NextJs app (ReactJs - server side rendering).

When I use this code:

    const data = JSON.stringify({"amount":100});
    const config = {
      headers: { 
        'Accept': 'application/json', 
        'Authorization': 'Basic OTk4ZDU4ZWYtNTM5NC00....', 
        // this time the Authorization code is a correct one (works on Postman) 
        'Content-Type': 'application/json'
      },
      data : data
    };
    const response = await axios.post('https://www.vivapayments.com/api/orders', data, config);

I get the CORS error ...

[ChristianMEC]

I got it. I was calling the viva endpoint from client ... and should be done from the server. I will implement that on the server side. Thank you for the support. I will let you know if it will work.

[ChristianMEC]

Hi. Is working but I have another issue.

Can you provide me list of fields I can use in the data object when I create the orderCode.

I want to set a description to the customer but the fields from documentation I found are not working. I tried to use customerTrns and merchantTrns

Is there a way to pass to the receipt a list with products that customer bought?

I saw that redirection for succeeded/failed transaction is not working as in the above screenshoot. How it can be done?

[matthewrgourd]

Hi @ChristianMEC good to hear you got it working.

For the next bit, I'm not sure I understand what you're saying. All of the parameters listed under "Create payment order" on the following page are working:

https://developer.vivawallet.com/web-api-integration/payment-api/#tag/Payments

Can you let me know the full request you're sending together with the response and any error messages? Thanks!

Regarding the success / failure URLs, I'm not immediately sure what the problem is as you have everything correct according to the screenshot. Maybe question marks aren't allowed in the URLs?

[ChristianMEC]

This is the request I make to get the OrderCode

const paymentData = {
      requestLang: 'ro-RO',
      amount: 100,
      customerTrns: 'Mulțumim pentru comanda făcută la ${business.name}',
      fullName:  customerInfo.name,
      phone: customerInfo.phone,
      email: customerInfo.email
    }
const data = {
      paymentProvider: 'vivawallet',
      businessId,
      paymentData
    };

const response = await axios.post('https://api.orderix.ro/api/payment', data);
const { OrderCode } = response.data;

window.open('https://www.vivapayments.com/web/checkout?ref=${OrderCode}', "_parent");

I get no error. I get the OrderCode and is redirecting me to the payment page.

The problems are:

• cusomerInfo (fullName, phone, email) were not filled in the payment form
• the language the page is displayed is in English, not in Romanian as I was expecting
• I see no info from customerTrns

From this page I can finish or cancel the payment - is working. But I was expecting for a redirect to the url I provide it in the vivawallet admin.

[matthewrgourd]

Hi @ChristianMEC, I'm sorry, I can't help you with custom code. However, I can confirm that, by testing the below API requests, our redirect checkout is operating as expected.

IN POSTMAN

Send POST to https://www.vivapayments.com/api/orders with below body parameters

{
  "Email": "customer@domain.com",
  "phone": "2117604000",
  "fullName": "Customer name",
  "requestLang": "ro-RO",
  "Amount": 100,
  "MerchantTrns": "Your reference",
  "CustomerTrns": "Description for customer to see"
}

Response

{
    "OrderCode": 7286516992430797,
    "ErrorCode": 0,
    "ErrorText": null,
    "TimeStamp": "2020-11-13T11:52:49.9243079+02:00",
    "CorrelationId": null,
    "EventId": 0,
    "Success": true
}

IN BROWSER

Open https://www.vivapayments.com/web/checkout?ref=7286516992430797.

The payment form opens in Romanian:

Please note currency is only in pounds because my Viva Wallet account is in GBP. Yours will obviously display in EUR.

[ChristianMEC]

Indeed on Postman works as you said. I forced to window.open(https://www.vivapayments.com/web/checkout?**lang=ro-RO**&ref=${OrderCode}) to open page in Romanian.

And I found out how to use the redirect after transaction was canceled/successfully finished ... I updated the Default redirection settings.

And also I managed to test if a transaction was successfully finished by making a request to: https://www.vivapayments.com/api/transactions/Ttransaction ID]

What I still find as a issue is that sometimes when I click to go to do the payment window.open(https://www.vivapayments.com/web/checkout?lang=ro-RO&ref=${OrderCode}), on redirected page, I get an error saying that the order not found. (OrderCode is obtained before redirection). Do I have to invoke a small delay (after getting OrderCode to wait 1-2sec) before redirecting to checkout page?

[matthewrgourd]

Hi @ChristianMEC,

And I found out how to use the redirect after transaction was canceled/successfully finished ... I updated the Default redirection settings.

Can you explain a bit more what you mean by that?

What I still find as a issue is that sometimes when I click to go to do the payment window.open(https://www.vivapayments.com/web/checkout?lang=ro-RO&ref=${OrderCode}), on redirected page, I get an error saying that the order not found. (OrderCode is obtained before redirection).

I don't immediately know why that would be, sorry!

[ChristianMEC]

Hi @ChristianMEC,

And I found out how to use the redirect after transaction was canceled/successfully finished ... I updated the Default redirection settings.

Can you explain a bit more what you mean by that?

on Sales -> Online Payments -> Websites/Apps

I created a new Website/App -> code 9334

Later today I found out that there is a Default setting

and all responses from checkout payment were redirected as in Default

What I did is updated the Default to my needs:

If I wanted to use the other setting (code 9334 - the one created by me first) how could I do it?

[matthewrgourd]

Hi @ChristianMEC, if you could re-enable 9334 from your Viva Wallet account, update the Success / Failure URLs to the correct ones for your website, I should be able to activate for you. To specify the payment source in the POST to https://www.vivapayments.com/api/orders, pass the parameter "sourceCode":"9334" in the body.

[ChristianMEC]

Hi @matthewrgourd, to use different payment source (sourceCode) needs to be activated by someone from support?

Here. In my example my payment source "9334" looks Active. I passed the parameter sourceCode: "9334" (I tried with "SourceCode": "9334" too) as you mentioned.

After checkout completes is still redirecting as in Default settings

[matthewrgourd]

Hi @ChristianMEC, I notice that pschei.go.ro is not publicly available on the internet currently? Payment sources can be set up only for domains that point to live locations.

[ChristianMEC]

It is live when my local server is started. If you want you may check again

http://pschei.go.ro/business/test (if you get error page not found go to http://pschei.go.ro and click on "Magazin online test!!!")

add some products to the cart

click on --> "Pay 1 RON"

[matthewrgourd]

Hi @ChristianMEC, I made a test transaction and it's showing as being paid to Default source. I don't understand why this is if you're passing the "sourceCode":"9334" parameter in the POST to https://www.vivapayments.com/api/orders as documented under Create payment order on our developer portal. BTW, can you cancel the transaction in my name (Matt Gourd) from your Viva Wallet account, please?

[matthewrgourd]

Hi @ChristianMEC, please close this issue if you managed to resolve.