Payment method process on App for e-scooters sharing

Question

I am working on the ux of an app for e-scooters sharing.

The system has two different ways of payment systems.

1. you scan the QR code, set the payment method and then once you park the scooter you get charged directly on the payment method you selected
2. you has a wallet, you can recharge 10€-20€-30€, select a payment method and when you finish the money on the wallet the scooter stops.

When the user set a payment method can be tricky for him to understand what is the payment method for.

I am at this stage at the moment:

I have two main problems here:

1. is it clear enough that there are two different ways for paying?
2. In the second screen, I decided to use the Radio Botton, but I'm not sure of it. If the user select Apple Pay he can pay directly when he click on the CTA. Meanwhile if he's using a credit card/Paypal, he needs first to fill the apposite form to save it. How can I have this step in the process? If I use a "+" instead of the radio Botton the problem becomes Apple pay D:

Answer 1

if i'm not wrong there's 2 questions you are asking here. One is how to communicate the payment models clearly. The other how to communicate setting up the payment method.

for 1 you should ONLY focus on communicating both models as 2 options so the user can decide on one.

e.g.

---

Choose a payment model

Option 1: Pay direct after you ride
(you will be charged based on the distance you rode after your ride)

Option 2: Top up to wallet and ride
(recharge your wallet and use it for your ride)

---

in the screens after that you can focus communicate setting up the payment method.