Adyen doesn't show

[rodrigoricky]

Adyen Payment option doesn't show in payment, I added Adyen in the settings and filled out the keys

[mrvautin]

Can you give more information? I just tested and Adyen is working for me. Does your terminal show any errors?

[rodrigoricky]

Terminal doesn't show any errors, it's just Ayden doesn't appear on the payment options (ss above)

[mrvautin]

Could you check the browser console too for any errors. It's highly likely a config issue given it's working perfectly fine for me.

[rodrigoricky]

[rodrigoricky]

Quick question: How do I implement this on my version? I tried putting the code, doesn't work.

[mrvautin]

Quick question: How do I implement this on my version? I tried putting the code, doesn't work.

Added in 41c997e3375c52bf35421b2eaca3a6a5bc386949.

[mrvautin]

Terminal doesn't show any errors, it's just Ayden doesn't appear on the payment options (ss above)

Could you show the config where you are turning on Adyen? Maybe even share your Adyen config with the sensitive parts removed?

[rodrigoricky]

Alr, and also to let you know I modified the code but I am not sure if it was the one causing the error, so I was trying to add GCash as an payment option for the site and here's the modified code (not really much modified)

// adyen.js btw
const express = require('express');
const { indexOrders } = require('../indexing');
const numeral = require('numeral');
const { Client, CheckoutAPI } = require('@adyen/api-library');
const { getId, sendEmail, getEmailTemplate } = require('../common');
const { getPaymentConfig } = require('../config');
const { emptyCart } = require('../cart');
const router = express.Router();

router.post('/setup', async (req, res, next) => {
    const adyenConfig = getPaymentConfig('adyen');

    const client = new Client({
        apiKey: adyenConfig.apiKey,
        environment: adyenConfig.environment
    });
    const checkout = new CheckoutAPI(client);
    let paymentsResponse;
    try{
        paymentsResponse = await checkout.paymentMethods({
            amount: {
                currency: 'PHP',
                value: 0
            },
            countryCode: 'PH',
            channel: 'Web',
            merchantAccount: adyenConfig.merchantAccount
  });
    }catch(ex){
        console.log('Exception getting supported payment methods', ex.message);
        res.status(400).json({ message: `Failed to retrieve payment methods.${ex.message}` });
    }
    res.status(200).json({
        paymentsResponse,
        environment: adyenConfig.environment,
        originKey: adyenConfig.originKey
    });
});

router.post('/checkout_action', async (req, res, next) => {
    const db = req.app.db;
    const config = req.app.config;
    const adyenConfig = getPaymentConfig('adyen');

    const client = new Client({
        apiKey: adyenConfig.apiKey,
        environment: adyenConfig.environment
    });

// Rest are the same code as in the repo

[rodrigoricky]

Used wrong link - here's the correct link: https://docs.adyen.com/payment-methods/gcash/api-only

[mrvautin]

I've updated the Adyen integration to the latest and greatest here: 7c29782207d94861504f0151cb730b22929b7f35.

Note: The configuration changes: /config/payment/config/adyen.json

I can't test the specific payment method you are trying to use. Let me know how you get on.

[rodrigoricky]

So, I just filled out the new config of Adyen and I tried running it but returns this error while running it.

Edit: Nevermind, I accidentally added an old config line

[rodrigoricky]

So I tried to setup the Adyen, and it still the same as earlier but now it has error on console:

Error only show when I am on checkout page

[mrvautin]

There was come config values which were removed. Check your config matches the adyen.json example. Checking carefully there is no old configs that are no longer needed with the new version.

[rodrigoricky]

Here is my current config for adyen

{
    "description": "Card payment",
    "environment": "test",
    "apiKey": "API here",
    "clientKey": "key here",
    "merchantAccount": "Account here",
    "currency": "AUD",
    "countryCode": "AU"
}

[mrvautin]

I think the payment type you want is quite niche and I'm not sure most will benefit by me adding it to master.

Re-reading the guide, is seems the GCash payment method isn't supported on the drop-in UI/integration which I've built for.

It looks easy enough to integrate though. You can simply add something like this code to your /setup endpoint in adyen.js: https://docs.adyen.com/payment-methods/gcash/api-only#api-only-payments

Then something like this (not tested at all) in /public/javascripts/common.js:

if($('#dropin-container').length > 0){
        $.ajax({
            method: 'POST',
            url: '/adyen/setup'
        })
        .done(async function(response){
             $('#adyen-gcash-link').attr('href', response.action.url);
        })
        .fail(function(msg){
            showNotification(msg.responseJSON.message, 'danger');
        });
    };

The idea is to get the response from /adyen/setup and set the URL of the link on the payment form.

Then in /views/partials/payments/adyen.hbs add something like:

<div>
    <a href="#" class="btn btn-primary" id="adyen-gcash-link"></a>
</div>

[rodrigoricky]

Alright, but in the code that you sent me, should I replace it with the current code in the script or just add those? And for the GCash API, I think all are already except for the paymentMethod right?

// COMMON.JS
 if($('#dropin-container').length > 0){
        $.ajax({
            method: 'POST',
            url: '/adyen/setup'
        })
        .done(async function(response){
            const configuration = {
                environment: response.environment,
                clientKey: response.clientKey,
                session: {
                    id: response.paymentsResponse.id,
                    sessionData: response.paymentsResponse.sessionData
                },
                onPaymentCompleted: (result, component) => {
                    console.log('result', result);
                    console.log('component', component);
                    if($('#shipping-form').validator('validate').has('.has-error').length === 0){
                        $.ajax({
                            type: 'POST',
                            url: '/adyen/checkout_action',
                            data: {
                                paymentCode: result.resultCode,
                                paymentId: component._id
                            }
                        }).done((response) => {
                            window.location = '/payment/' + response.paymentId;
                        }).fail((response) => {
                            showNotification('Failed to complete transaction', 'danger', true);
                        });
                    }
                },
                onError: (error, component) => {
                    console.log(error.name, error.message, error.stack, component);
                },
                paymentMethodsConfiguration: {
                    hasHolderName: false,
                    holderNameRequired: false,
                    billingAddressRequired: false
                }
            };
            const checkout = await AdyenCheckout(configuration);
            checkout.create('dropin').mount('#dropin-container');
        })
        .fail(function(msg){
            showNotification(msg.responseJSON.message, 'danger');
        });
    };

[rodrigoricky]

This is my current code on adyen.js

const payload = {
        merchantAccount: adyenConfig.merchantAccount,
        amount: {
            currency: adyenConfig.currency,
            value: numeral(req.session.totalCartAmount).format('0.00').replace('.', '')
        },
	paymentMethod: {
		type: 'gcash',
		storedPaymentMethodId: "7219687191761347"
			},
        returnUrl: `${config.baseUrl}/adyen/checkout_return`,
        reference: Object.keys(req.session.cart)[0],
        countryCode: adyenConfig.countryCode,
        shopperEmail: req.session.customerEmail
    };

I don't really know how it should be even though I read the docs

[mrvautin]

Ok. I've had a quick play and got it working.

adyen.js:

router.post('/setup', async (req, res, next) => {
    const config = req.app.config;
    const adyenConfig = getPaymentConfig('adyen');

    const payload = {
        merchantAccount: adyenConfig.merchantAccount,
        amount: { currency: 'PHP', value: 1000 },
        paymentMethod: {
            type: 'gcash'
        },
        returnUrl: `${config.baseUrl}/adyen/checkout_return`,
        reference: Object.keys(req.session.cart)[0]
    };

    let paymentsResponse;
    try{
        paymentsResponse = await got.post(`https://checkout-${adyenConfig.environment}.adyen.com/v67/payments'`, {
            headers: {
                'content-type': 'application/json',
                'x-API-key': adyenConfig.apiKey
            },
            json: payload
        });
        paymentsResponse = JSON.parse(paymentsResponse.body);
    }catch(ex){
        console.log('Exception getting supported payment methods', ex.message);
        res.status(400).json({ message: `Failed to retrieve payment methods.${ex.message}` });
        return;
    }
    res.status(200).json({
        paymentsResponse,
        environment: adyenConfig.environment
    });
});

common.js:

if($('#adyen-gcash-container').length > 0){
        $.ajax({
            method: 'POST',
            url: '/adyen/setup'
        })
        .done(async function(response){
            $('#adyen-gcash-link').attr('href', response.paymentsResponse.action.url);
            $('#adyen-gcash-link').text('Pay GCash');
        })
        .fail(function(msg){
            showNotification(msg.responseJSON.message, 'danger');
        });
};

adyen.hbs

<div>
    <div class="mb-2">{{@root.paymentConfig.adyen.description}}</div>
    <div id="adyen-gcash-container">
        <a href="#" class="btn btn-primary" id="adyen-gcash-link">Loading...</a>
    </div>
</div>

Note: I have no idea what GCash actually is and how to test a payment so the /checkout_action return code will need some work