How to create a payment widget with on-ramp

This widget is designed to offer users flexible payment options, enabling them to pay using either cryptocurrency or fiat currency. The user journey is composed of two distinct scenarios:

Step 1: Selecting Cryptocurrency
- Action: The user selects the cryptocurrency they want to use for the deposit on the merchant's website.
Step 2: Entering Deposit Amount
- Action: The user enters the amount they wish to deposit.
Step 3: Accessing the Payment Widget
- Action: The user is directed to the payment widget where they have two options:
Option 1: Deposit directly from their crypto wallet.
Option 2: Purchase cryptocurrency from a third-party provider.

Detailed User Actions

Option 1: Deposit Directly from Crypto Wallet

Select Cryptocurrency: Choose their preferred cryptocurrency on the merchant's website..

Enter Deposit Amount: Specify the amount to deposit.
Generate Deposit Address: Receive a unique deposit address.
Send Cryptocurrency: Transfer the specified amount to the generated address.
Transaction Confirmation: Wait for the blockchain confirmation.
Deposit Completion: The deposit amount is added to their account on the merchant's platform.

Option 2: Purchase Cryptocurrency

Select Cryptocurrency: Choose their preferred cryptocurrency on the merchant's website..
Enter Purchase Amount: Specify the amount to deposit.
Complete Payment: Use a credit card or bank transfer to pay through a third-party provider.
Receive Cryptocurrency: The purchased cryptocurrency is transferred to their deposit account.
Deposit Completion: The deposit amount is added to their account on the merchant's platform.

Example url: https://pay.calypso.finance/payment-widget-simplified/:idempotencyKey?fiat=PLN,USD,EUR

Fiat query is case sensitive!

On customer payment we send postMessage
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Pay with crypto message:

 {  
      "type": "CALYPSO_CRYPTO_PAID",  
      "text": "Customer have pressed 'I have paid' button",  
      "idempotencyKey": "idempotencyKey",  
}

Pay with fiat message:

{  
      "type": "CALYPSO_FIAT_PAYMENT",  
      "text": "Customer have pressed 'Continue' and have been redirected to the thirdparty",  
      "redirectUrl": "redirectUrl",  
      "idempotencyKey": "idempotencyKey",  
 }