Comments (12)
In my implementation I just send en empty object for the additional_http_headers
. I probably did that to prevent this error
from react-native-adyen-payment.
You should never communicate directly with the Adyen API here, always route the traffic through your own server. If you communicate directly there are some keys missing that should be set in the backend.
from react-native-adyen-payment.
@ChielBruin
Hi I got another question
in my code I
write something like this
useEffect(() => {
var appServiceConfigData = {
environment: paymentDetails?.environment,
base_url: 'https://checkout-test.adyen.com/v52/paymentMethods/',
additional_http_headers: {},
};
AdyenPayment.initialize(appServiceConfigData);
AdyenPayment.onSuccess(payload => {
console.log('success', payload);
setStatus(STATUS.success);
});
AdyenPayment.onError(payload => {
console.log('failure', payload);
setStatus(STATUS.failure);
});
}, []);
useEffect(() => {
MOCK_PAYMENT_DETAILS = {
amount: {
value: paymentDetails?.amountValue,
currency: paymentDetails?.currency,
},
reference: paymentDetails?.referenceId,
shopperReference: paymentDetails?.shopperReference,
shopperEmail: '[email protected]',
shopperLocale: 'en_SG',
channel: Platform.OS === 'ios' ? 'iOS' : 'Android',
countryCode: 'SG',
// Remember to replace returnUrl with your app scheme
returnUrl:
Platform.OS === 'ios' ? 'your-ios-scheme://' : 'com.abc.com',
merchantAccount: paymentDetails?.merchantName,
additionalData: {
allow3DS2: true,
executeThreeD: true,
},
};
MOCK_COMPONENT_DATA = {
scheme: {
card_public_key: paymentDetails?.originKey,
},
};
}, [paymentDetails]);
function handleDropInButtonPress() {
setStatus(STATUS.initiated);
try {
AdyenPayment.startPayment(
AdyenPayment.DROPIN,
MOCK_COMPONENT_DATA,
MOCK_PAYMENT_DETAILS,
);
} catch (err) {
console.error(err);
}
}
What happen is that when I call handleDropInButtonPress
func I got an error like this, after dismiss the status does not change into failure
is this the correct behaviours?
from react-native-adyen-payment.
The main difference I see with my usage is that I use the async variants of startPayment
. Are you sure the value you provide for the merchantAccount
is a non-empty string?
from react-native-adyen-payment.
@ChielBruin Actually I hard coded the merchant account in merchantAccount: "SomeoneAccountNum"
.
from react-native-adyen-payment.
Also not that you define the MOCK_PAYMENT_DETAILS
inside a useEffect by re-assigning it to a variable. As far as I know, this will not trigger a React state update. This will mean that when pressing the button, you might still get the original value (which you probably have initialized as null or undefined). This will then result in passing a lot of null/undefined values to the drop-in (due to all the a?.b
constructs you used). Instead set the values directly or use a setState()
to update it. I would also highly recommend checking for null before calling startPayment
instead of defaulting everything to null using the ?
operators
from react-native-adyen-payment.
HI @ChielBruin
I will update my question here.
import AdyenPayment from 'react-native-adyen-payment';
const DEMO_SERVER_API_KEY =
'DEMO_SERVER API KEY FROM ADYEN DEVELOPERS > API CREDITENTIALS';
const CARD_PUBLIC_KEY = 'CLIENT KEY GENERATED FROM THE ADYEN';
const MERCHANT_ACCOUNT = 'MERCHANT ACC NAME';
import React, {Component} from 'react';
import {Button, View, Text} from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
export default class CartPaymentTwo extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
adyen_payment_status: 'initiated',
};
/*
The base URL should be your API server running with the following POST endpoints
- /paymentMethods
- /payments
- /payments/details
Ex :
Base URL : https://XXXXXX.com/payments/adyen
https://XXXXXX.com/payments/adyen/paymentMethods
https://XXXXXX.com/payments/adyen/payments
https://XXXXXX.com/payments/adyen/payments/details
Any Extra Header Parameters to be passed can be given in the "additional_http_headers"
As an example we are using Adyens Demo Server Base URL
*/
var appServiceConfigData = {
environment: 'test',
// base_url: 'https://checkout-test.adyen.com/checkout/v51/',
base_url: 'https://checkout-test.adyen.com/v51/',
additional_http_headers: {
'x-demo-server-api-key': DEMO_SERVER_API_KEY,
},
};
AdyenPayment.initialize(appServiceConfigData);
AdyenPayment.onSuccess(payload => {
this.setState({adyen_payment_status: 'success'});
console.log(payload);
});
AdyenPayment.onError((code, error) => {
console.log('Adyen Error : ', error);
this.setState({adyen_payment_status: 'failure'});
});
}
onClickPayment = () => {
var paymentDetails = {
amount: {
value: 200, //In Multiples of hundred
currency: 'EUR',
},
reference: 'XXXXXXXX',
shopperReference: 'XXXXXX',
shopperEmail: '[email protected]',
channel: Platform.OS === 'ios' ? 'iOS' : 'Android',
countryCode: 'SG',
shopperLocale: 'sg_SG',
returnUrl:
Platform.OS === 'ios'
? '<YourAppDisplayName>-app://'
: 'adyencheckout://com.dynamicwebapac.bhg',
merchantAccount: MERCHANT_ACCOUNT,
additionalData: {
allow3DS2: true,
executeThreeD: true,
},
};
// Data for various Components
var componentData = {
scheme: {
card_public_key: CARD_PUBLIC_KEY,
},
};
try {
// The Following Payment Methods are supported
//DROPIN,IDEAL,MOLPAY_MALAYSIA,MOLPAY_THAILAND,MOLPAY_VIETNAM,DOTPAY,EPS,ENTERCASH,OPEN_BANKING,
//SCHEME,GOOGLE_PAY,SEPA,BCMC,WECHAT_PAY_SDK,APPLE_PAY,
AdyenPayment.startPayment(
AdyenPayment.DROPIN,
componentData,
paymentDetails,
);
} catch (err) {
console.log(err.message);
}
};
render() {
return (
<View style={styles.container}>
<Text>{this.state.adyen_payment_status}</Text>
<Button
label={'Pay'}
title="Drop In"
onPress={() => {
this.onClickPayment();
}}
/>
</View>
);
}
}
My questions here is that what CARD_PUBLIC_KEY
referring to ? am I using the right one?
Another one is the base url
is the one I am using usable? If not, where can I find one so that I can test.
Here my situation
What happening now is that if I click the button there will be a quick loading and will not console anything. even if it fail or success. If I deep dive enough in AdyenPaymentModule.kt
it will reach the syntax if (response.isSuccessful()) {
but the response is Response{protocol=http/1.1, code=401, message=, url=https://checkout-test.adyen.com/v51/paymentMethods}
and it exit there I think
from react-native-adyen-payment.
@ChielBruin Thanks for responding. 🥺
I am really confuse when reading the documentation.
Yeah I notice from Adyen documentation. Mobile app should not directly connected with Adyen.
In our team I got another developer who is handling the merchant server
side which will communicate with Adyen server
From my understanding I should request that person to return only the
base_url
which in turn should handle the three post request. So all transaction make with Adyen server will handle my merchant server
.
/adyen/paymentMethods
/adyen/payments
/adyen/payments/details
So what react-native need to do is especially what frontend app developer need to do is when user press the Pay
button.
I just need to call this function AdyenPayment.startPayment( AdyenPayment.DROPIN, componentData, paymentDetails, )
and the merchants server need to handle all the logic. Am I understanding correctly?
from react-native-adyen-payment.
Yes that is correct. The dropin sends requests on those three endpoints to your own server. There you use the other packages provided by Adyen (for example this one for node.js: https://github.com/Adyen/adyen-node-api-library) to communicate to the Adyen servers.
from react-native-adyen-payment.
@ChielBruin
I have some new questions. I get to the step of showing the bottom sheet card.
In android studio . I got an error like this in log-cat when DropIn modal popup when I press the button that initiate payment.
E/CO.DropInViewModel: PaymentMethod not yet supported - cup
and after when I press the Pay $$
The screen keep on loading for a very long time without transaction going through.
from react-native-adyen-payment.
As the error states, the payment method cup
is not supported by this library, so it cannot render it in the list of available payment options. Have you checked the list of available payment methods received from your server?
To troubleshoot the loading spinner, you can check if any request reaches your server, as it might be that the event is not properly handled there.
I can recommend using a tool like charles to debug the communication between the app and the backend
from react-native-adyen-payment.
@ChielBruin
Thanks , the error goes away when I remove the node modules, clean gradle files and reinstall again
from react-native-adyen-payment.
Related Issues (20)
- [Android] 3DS2 Infinite Loading HOT 1
- iOS Example don't work
- stuck on "CVC is not the right length" HOT 1
- Adyen Error on paymentMethod
- crash on Huawei devices,
- Apple Pay HOT 9
- Cant hide showStoredPaymentMethod with BCMC on IOS HOT 2
- Apple Pay doesnt work HOT 5
- Plans to update for adyen-android 4.0.0? HOT 8
- Payment has error HOT 2
- Task react-native-adyen-payment:compileDebugKotlin fails on RN 0.65.1 HOT 8
- UI for showing cardHolder name. HOT 1
- Could not find com.tencent.mm.opensdk:wechat-sdk-android-without-mta:5.1.6. HOT 7
- Android cannot link lib if MainApplication is Kotlin file
- Question: How to build AdyenPayment HOT 1
- Building Android for Expo EAS Crashing org.gradle.api.internal.artifacts.repositories.DefaultFlatDirArtifactRepository HOT 1
- React peer dependency version
- Linking failed even though I add manually to MainApplication.java HOT 1
- Question - Is it compatible with GraphQL api? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-adyen-payment.