Checkout flow

[raducristianpopa]

Frontend

• Add form components #693
• Add OP Pay button following the brand guidelines #701
• Add checkout page #702

Backend

• Add OP client  #722
• Add first phase of the checkout flow (pre-interaction) #726

Shared

• Add seconds phase of the checkout flow (post-interaction) #728

Flow example:

sequenceDiagram
    Commerce FE ->>+ Commerce BE: Pay with Open Payments
    Commerce BE ->> Testnet Rafiki Auth: OP Client: Grant Request for IP
    Testnet Rafiki Auth ->> Commerce BE: Returns: <br /> - accessToken
    Commerce BE ->> Testnet Rafiki Backend: Create IP with accessToken
    Commerce BE ->> Testnet Rafiki Auth: Grant Request for Quote
    Testnet Rafiki Auth ->> Commerce BE: Returns: <br/> - accessToken <br /> - continueToken <br /> - continueId
    Commerce BE ->> Testnet Rafiki Backend: Create Quote with accessToken
    Testnet Rafiki Backend ->> Commerce BE: Returns: <br /> - quoteId <br /> - sendAmount <br /> - receiveAmount
    Commerce BE ->> Testnet Rafiki Backend: Grant Request for OP with: <br /> - sendAmount and receiveAmount <br /> - interaction (this should point to https://rafiki.money/interaction)
    Testnet Rafiki Backend ->> Commerce BE: Returns the interact URL
    Commerce BE ->>- Commerce FE: Give the interact URL to the client
    Commerce FE ->> Wallet FE: Redirect to wallet FE to accept or reject
    Wallet FE ->> Commerce FE: Redirect and add the `interactRef` (query param?)
    Commerce FE ->>+ Commerce BE: Send the interactRef
    Commerce BE ->> Testnet Rafiki Auth: Continuation request with the given interactRef
    Testnet Rafiki Auth ->> Commerce BE: Returns accessToken
    Commerce BE ->> Testnet Rafiki Backend: Create OP (quoteId is needed)
    Testnet Rafiki Backend ->> Commerce BE: Returns OP details
    Commerce BE ->>- Commerce FE: Redirect to success page

Loading