Mobile Inline Gateway: Difference between revisions

From Barion Documentation
Jump to navigation Jump to search
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
== Payment flow ==
There are different integration modes available for our merchants:
[[File:IGW - Mobile flow PUBLIC.jpg|frameless|800x800px]]


=== 1. Payer clicks on checkout ===
* '''Redirect/Hosted gateway''': The merchants redirect the customer to secure.barion.com and the payer uses the GUI there to conduct the payment
* '''Inline gateway''':
** '''Inline web gateway''': The merchant displays the payment methods on its website seamlessly like it was created by the merchant.
** '''Inline mobile gateway''': The merchant displays the payment methods in its ''mobile app'' seamlessly like it was created by the merchant.


=== 2. Merchant app calls the merchant backend ===
This page describes the integration for the inline mobile gateway.  
This is necessary since only the backends can be trusted to communicate securely.


=== 3. The merchant's backend calls the Barion API ===
There are two ways to integrate the Barion Smart Gateway into a mobile app:
The endpoint is the ususal [[Payment-Start-v2|payment/start]]. The merchant does not have to add any new information to the request.


=== 4. Receives back the <code>ClientSecret</code> in the response ===
* '''Inline fast payment''': The whole UI is displayed by the Barion SDK and the process is controlled inside the SDK.
* '''Inline elements:''' The SDK provides UI elements and the merchant has total freedom to place them on their checkout screen and process.


=== '''5. The merchant’s backend forwards the ClientSecret to the merchant’s mobile appp''' ===
== Fast payment ==


=== 6. Merchant's app intializes the Barion SDK ===
=== Payment flow ===
The merchant's app should request access to the camera. In the Barion SDK customers can scan their cards instead of typing them by hand. Add this key to your app's Info.plist:<syntaxhighlight lang="swift">
The participants in the process are:
NSCameraUsageDescription
</syntaxhighlight>The simplest and fastest integration of the Barion SDK looks like this:<syntaxhighlight lang="swift" line="1">
import BarionSDK
...
let fastPayment = FastPayment(paymentClientSecret: paymentClientSecret)
fastPayment.present(from: self){ result in
  switch result {
    case .success(let paymentResult):
      // TODO handle successful payment result and validate it on your backend
      print("successful payment")
    case .failure(let paymentError):
      // TODO handle the error
      print(error.errorCode)
  }
}
</syntaxhighlight>


==== The structure of the options parameter ====
* Merchant: The entity that sells goods or provides services to purchase.
<syntaxhighlight lang="json">
* Payer: The customer who wants to buy said services or goods.
{
* Merchant app: The mobile app of the merchant that is used for the payment
  "merchantOwnedPaymentData": {
    "methods": [
      {
        "method": "card",
        "token": "sdafsfrRTYS556y7fdFG",
        "title": "My private card",
        "data": {
          "cardNr": "4578"
        }
      },
      {
        "method": "balance",
        "token": "sdafsfrRTYS556y7fdFG",
        "title": "My company card",
        "data": {
        }
      },
      {
        "token": "sdafsfrRTYS556y7fdFG",
      }
    ]
  }, 
  "renderOptions": {
    "paymentMethodOrder": [
      "apple-pay",
      "card",
      "google-pay",
      "barion-wallet"
    ], 
    "gwOptions":{
      "arrowColor": "green",
    }
    "paymentMethodOptions": [
      {
        "method": "barion-wallet",
        "options": {
          "title": "Fizess Barionnal!",
          "background": "white"
        }
      },
      {
        "method": "apple-pay",
        "options": {
          "border": "black"
        }
      }
    ]
  }
}
</syntaxhighlight>


=== 7. The Barion SDK displays the payment options ===
The payment process can be described in the following steps.[[File:IGW - Mobile flow PUBLIC.jpg|frameless|800x800px]]


=== 8. Customer inputs the card information or clicks on a wallet ===
'''1. Payer clicks on checkout'''


=== 9. Barion SDK forwards this to the Barion backend and the payment is processed. ===
The payer uses the merchant's mobile app to start the checkout.


=== 10. The Barion SDK calls back to the merchant's app code ===
'''2. Merchant app calls the merchant backend'''


=== 11. The merchant's app receives the result of the payment ===
This is necessary since only the backend can be trusted to communicate securely with the Barion API.


=== 12. Barion sends the instant payment notification request to the merchant's backend ===
'''3. The merchant's backend calls the Barion API'''


=== 13. The merchant's backend request the state of the payment ===
The merchant's backend call the [[Payment-Start-v2|payment/start]] endpoint. In case there is already a Barion Smart Gateway integration in place, the merchant does not have to add any new information to the request.


=== 14. The payment state response contains the result of the process ===
'''4. Receives back a secret in the response'''


=== 15. The merchant processes the order ===
There is an additional property in the response, called <code>ClientSecret</code>. This is used to initiate the Barion inline SDK.
 
'''5. The merchant’s backend forwards the secret to the merchant’s mobile app'''
 
The merchant's backend needs to forward the <code>ClientSecret</code> to the merchant's mobile app.
 
'''6. Merchant's app initializes the Barion SDK'''
 
The merchant's mobile app initializes the Barion SDK. The detailed description of this step is written up in the [https://github.com/barion/barion-ios Github library].
 
'''7. The Barion SDK displays the payment options'''
 
'''8. Customer inputs the card information or clicks on a wallet'''
 
'''9. Barion SDK forwards this to the Barion backend and the payment is processed.'''
 
'''10. The Barion SDK calls back to the merchant's app code'''
 
'''11. The merchant's app receives the result of the payment'''
 
'''12. Barion sends the instant payment notification request to the merchant's backend'''
 
'''13. The merchant's backend request the state of the payment'''
 
'''14.  The payment state response contains the result of the process'''
 
'''15. The merchant processes the order'''

Revision as of 09:33, 20 January 2025

There are different integration modes available for our merchants:

  • Redirect/Hosted gateway: The merchants redirect the customer to secure.barion.com and the payer uses the GUI there to conduct the payment
  • Inline gateway:
    • Inline web gateway: The merchant displays the payment methods on its website seamlessly like it was created by the merchant.
    • Inline mobile gateway: The merchant displays the payment methods in its mobile app seamlessly like it was created by the merchant.

This page describes the integration for the inline mobile gateway.

There are two ways to integrate the Barion Smart Gateway into a mobile app:

  • Inline fast payment: The whole UI is displayed by the Barion SDK and the process is controlled inside the SDK.
  • Inline elements: The SDK provides UI elements and the merchant has total freedom to place them on their checkout screen and process.

Fast payment

Payment flow

The participants in the process are:

  • Merchant: The entity that sells goods or provides services to purchase.
  • Payer: The customer who wants to buy said services or goods.
  • Merchant app: The mobile app of the merchant that is used for the payment

The payment process can be described in the following steps.

1. Payer clicks on checkout

The payer uses the merchant's mobile app to start the checkout.

2. Merchant app calls the merchant backend

This is necessary since only the backend can be trusted to communicate securely with the Barion API.

3. The merchant's backend calls the Barion API

The merchant's backend call the payment/start endpoint. In case there is already a Barion Smart Gateway integration in place, the merchant does not have to add any new information to the request.

4. Receives back a secret in the response

There is an additional property in the response, called ClientSecret. This is used to initiate the Barion inline SDK.

5. The merchant’s backend forwards the secret to the merchant’s mobile app

The merchant's backend needs to forward the ClientSecret to the merchant's mobile app.

6. Merchant's app initializes the Barion SDK

The merchant's mobile app initializes the Barion SDK. The detailed description of this step is written up in the Github library.

7. The Barion SDK displays the payment options

8. Customer inputs the card information or clicks on a wallet

9. Barion SDK forwards this to the Barion backend and the payment is processed.

10. The Barion SDK calls back to the merchant's app code

11. The merchant's app receives the result of the payment

12. Barion sends the instant payment notification request to the merchant's backend

13. The merchant's backend request the state of the payment

14. The payment state response contains the result of the process

15. The merchant processes the order

Retrieved from "https://docs.barion.com/index.php?title=Mobile_Inline_Gateway&oldid=4642"