implement an on-ramp feature with Simplex credit cards integration

[taisukemino]

Problem

Is your feature request related to a problem? Please describe. It's painful for users with no crypto to send some eth and dai to the wallet. i.e. usually, they have to create an account in centralized exchanges, go through KYC, transfer money through a bank, buy eth in the exchange, send eth from the exchange to the wallet...

Solution

Describe the solution you'd like Directly buy eth and dai with a credit card.

In this iteration, we are going to integrate the Simplex API. Specifically, their iFrame.

TODO

• [x] send 2k to their bank via TransferWise
• [x] get a My Number card, or My Number notification slip
• [x] prepare the identity verification document
• [x] issue the updated version of the 登記謄本
• [x] verify with a mail * ask mom
• [x] fill out their form
• [x] wait for their screening process
• [x] sign the modified agreement with no downpayment part
• [x] install the react-native-webview package
• [x] insert the code snippet for the Staging / Development first with the WebView
• [ ] design the Quote form (and the entire buy page)
• [ ] send all the necessary action items to integrations@simplex.com
• [ ] design url parameters
• content-modifying parameters http://example.com/?crypto=ETH&fiat=USD
• tracking parameter http://example.com/?crypto=ETH&fiat=USD&ref_id=goymeon
• [ ] design the iFrame with CSS
• [ ] send the CSS for the Simplex Quote form (IFrame) to integrations@simplex.com.
• [ ] Simplex will enable things on their end and give us an ETA for going live
• [ ] implement the two code snippets for production
• iFrame snippet & tracking snippet for a regulatory reason
• [ ] add some explanation such as a fee and supported countries

Questions

• [ ] Can we limit cryptocurrencies to ETH and DAI only? If so, how?
• [ ] What should be the subdomain URL when our app is a native mobile app?
• [ ] What should be the return URL when our app is a native mobile app?
• [ ] How can we insert our user's address automatically inside the iFrame?

Cost

They waive the downpayment and we will have to pay only 2k.

Documentation

Turnkey Offering Doc.pdf

[taisukemino]

I want to implement this asap because my friend's credit cards were rejected. He was using VISA and MasterCard.

[taisukemino]

This will take more time as I probably have to implement deep linking. I could also consider integrating their Wallet API instead of the iFrame.

I'm asking them if the deep link is going to work or not.

[taisukemino]

It keeps loading in the android real device. It works fine in a simulator(ios and android)

[taisukemino]

We need to give them our subdomain but it is not clear what this exactly is. I'm asking.

[taisukemino]

We might have to have a webpage for this integration.

[taisukemino]

i'm gonna test this later

<WebView nativeConfig={{props: {webContentsDebuggingEnabled: true}}}  
      source={{uri: htmlURL}}
      onMessage={this.handleMessage}
      />

[taisukemino]

It keeps loading in the android real device. It works fine in a simulator(ios and android)

It works when I give a random url to the uri props. But it is not working when I give a html to the html props.

[taisukemino]

To sum up the problem here, their iframe is not working only in a real device(both in ios and android).

It keeps loading. There is no error emitted with the onError or onHttpError props of the Webview component.

I tried their two kinds of a widget. Nothing changes.

I tried to add these two props and set them true, which didn't fix anything. javaScriptCanOpenWindowsAutomatically startInLoadingState

I can see that it works when I pass a random URL to the uri props in the source props.

My hunch is that the simplex object is not assigned to the window and thus this script below is failing. window.simplex.createForm()

[taisukemino]

I was wondering if loading html elements directly works. It did.

I also updated the package to the latest version, which didn't fix the issue.

I wonder if we need to have the api key. I'm asking.

Another possibility is the cross origin issue.

[taisukemino]

here are what I get for the onLoad and onLoadEnd props

onLoad ==> 
canGoBack: false
canGoForward: false
loading: false
target: 515
title: ""
url: "about:blank"

onLoadEnd ==> 
canGoBack: false
canGoForward: false
loading: false
target: 515
title: ""
url: "about:blank"

it is not loading and thus there is no url.

[taisukemino]

This might be the cookies problem again.

[taisukemino]

I made it work both in iOS and Android. Both in a simulator and a real device.

[taisukemino]

Build a website with a code snippet in it and then load that website with the react native webview.