Unable to use Certification API

[manhthepixta]

I have done certification with Javascript api on web. It worked fine and no problem. But I cannot do similar things with React Native. Here is my code

import IMP from 'iamport-react-native';

...

certificationCallback = response => {
        console.log('response', response);
}

...

render() {
        const data = {
            merchant_uid: `merchant_${new Date().getTime()}`,
            min_age: '',
        };
        return (
            <IMP.Certification
                userCode="*****"
                data={data}
                callback={this.certificationCallback}
            />
        );
}

There's no sign determine code working. Even I put the console log to the callback, it's not fired too. If I put invalid string to userCode, it throws error: 다날 서버로부터 받은 응답이 올바르지 않습니다.[인증실패] 잘못된 값이 입력된 필드가 존재합니다. (다날고객센터 1566-3355)

Here are my package versions:

"react-native": "0.59.9",
"react": "16.8.3",
"iamport-react-native": "1.1.4-rc.1",
"react-native-webview": "5.8.1",

Could anyone help me please? Thank a lot.

[SoleeChoi]

Hi, this is Iamport Technology team.

1. Have you checked you linked iamport-react-native and react-native-webview successfully?

2. What is your device environment? Both ios and android are not working?

3. Would you please let me know your usercode? I will let you know what the problem is after debugging.

Thanks

[manhthepixta]

Hi, this is Iamport Technology team.

Have you checked you linked iamport-react-native and react-native-webview successfully?

What is your device environment? Both ios and android are not working?

Would you please let me know your usercode? I will let you know what the problem is after debugging.

Thanks

Hi SoleeChoi, Thanks for quick reply.

1. Yes. I check linked successfully.
2. I just run it on Android, not iOS yet. Android not working.
3. Yes my user code is *****

Thanks again.

[SoleeChoi]

I will try to let you know asap after debugging.

Thanks

[SoleeChoi]

Hi, I debugged and everything is working fine. I've just certificate myself with your usercode.

Would you let me know the detail of your webview status? Can you see the sign "잠시만 기다려주세요..." when the webview is first loaded but never go next? Or you can't see anything but white screen?

Thanks

[manhthepixta]

Hi, I debugged and everything is working fine. I've just certificate myself with your usercode.

Would you let me know the detail of your webview status? Can you see the sign "잠시만 기다려주세요..." when the webview is first loaded but never go next? Or you can't see anything but white screen?

Thanks

Thanks for your effort. I didn't see any sign of the success. I put the Component I wrote above to the render() of a screen. Then nothing happen. No error, no webview appear. Could you please see if my code above is invalid or not? Maybe the step I have done is not correct.

Thanks.

[SoleeChoi]

Your code is correct just like the example code i wrote down on the manual.

Well.. are you testing with an apk file on release environment?

Or... i could debug your project myself if you send the zipped one to Iamport support email(support@iamport.kr)

Thanks.

[manhthepixta]

Your code is correct just like the example code i wrote down on the manual.

Well.. are you testing with an apk file on release environment?

Or... i could debug your project myself if you send the zipped one to Iamport support email(support@iamport.kr)

Thanks.

Thanks. I will try minimal project first then if it still has error I will send it to you. Thanks for for support.

[SoleeChoi]

OK! let me know when you have any another questions!

Thanks for using Iamport Service!

[manhthepixta]

OK! let me know when you have any another questions!

Thanks for using Iamport Service!

Thanks for your supporting. I just sent an email for you. Please take a look.

[SoleeChoi]

I've received your email.

The reason why you cannot see anything is that you put Certification component with another components. The flex value of the IMP.certification component is 1. That means it occupy the whole area of view. If you change the render function of Home component to following, it works fine.

// Home.jsx
render() {
  <Certificaiton />
}

So you have to make structure to move navigation from one view to certification by clicking button or something. It is just like the example project i added on the iamport-react-native library. You can check it on iamport-react-native/example

Thanks!

[manhthepixta]

I've received your email.

The reason why you cannot see anything is that you put Certification component with another components. The flex value of the IMP.certification component is 1. That means it occupy the whole area of view. If you change the render function of Home component to following, it works fine.

// Home.jsx
render() {
  <Certificaiton />
}

So you have to make structure to move navigation from one view to certification by clicking button or something. It is just like the example project i added on the iamport-react-native library. You can check it on iamport-react-native/example

Thanks!

I figured out your answer. But even I leave Certification whole area of view, it still not working I see. It show blank page without any sign. The console log in callback is not fired.

certificationCallback = response => {
    console.log('response', response);
}

[SoleeChoi]

hmmm what is your test emulator device?

[manhthepixta]

I use Genymotion for emulator. Android Pie. Also I tested on my real device Google Pixel XL, android Pie. It not working too.

[SoleeChoi]

okay i will test it on the same device emulator. but could you please wait until tomorrow?

[manhthepixta]

That's fine. Thank a lot for your quick response. Just more detail, I use Pixel 3 android Pie on Genymotion emulator :) Google pixel XL android Pie real device.

[SoleeChoi]

thanks for your support! it is helpful for us to develope better module!

[SoleeChoi]

Hi This is Iamport Technology Team again!

I've tested on Pixel XL, android Pie on Android studio AVD and it works fine.

It could be the problem of Genymotion emulator. I couldn't run the proejct on it because I have to pay for it, sorry.

But I'm not sure the reason why it is not workiing on your real device. I believe you've already set Debug server host & port for device on dev settings to ${your IP address}:8081. Or you couldn't see anything but white screen.

Please recheck the dev setting and test it on Android studio.

Thanks.

[manhthepixta]

Thanks for your response. I don't set any debug option on my real device. Just run react-native run-android. Then white screen. Do you have any chat messenger like slack, telegram, skype, etc. ? So we can talk more about this issue.

[SoleeChoi]

Check this link below.

• Debugging React Native

• Running on Device > Connect via Wi-Fi

It shows how to test your react native project on debug environment like virtual device, emulator or your real device with USB connected on your computer.

We have only a Kakao channel. I'm not sure you have an account on it. It is a Korean messenger program like telegram. Sorry for your inconvenience.

Thanks.

[manhthepixta]

Thanks for your direction. I have tried both Android emulator, Genymotion emulator, real device but no luck. Still white screen ...

Kakao doesn't matter. Let me register it. Then could you please guide me how to join channel?

[SoleeChoi]

For kakao,

1. install Kakao app
2. make an account
3. login
4. add plus friend 아임포트(how to add kakao plus friend)

Did you set the debug server host & port for device on dev settings to ${your IP address}:8081? That's the important point.

Thanks.

[manhthepixta]

Thanks I'm trying to register Kakao.

Did you set the debug server host & port for device on dev settings to ${your IP address}:8081? That's the important point.

I think it's not necessary because I run via cable :)

[manhthepixta]

I have added plus friend and sent message. Do you see it?

[manhthepixta]

Thank a lot for your supporting. I figured out it's the flex problem. You can close this issue now.