Skip to main content

One-off - Web Button

This flow is followed by a merchant who wants to receive a payment by displaying a QR code or allowing the buyer to type in his phone number to receive a payment notification. The use case that best fits this flow is described here Online store - web button.

caution

A discount of 100% off the gross amount of the purchase should be applied to amounts associated with winning payouts. The amount is in fact paid by Maypay while the user does not pay. The amount paid by Maypay for each winning outcome is in the form of a reversal from the commissions retained by Maypay and allocated to the prize pool.

Read more

APIs required​

tip

cancelMerchantPaymentRequest and getMerchantPaymentRequest are not shown in the sequence diagram below because they are optional. With the former the merchant can request the cancellation of a pending request, while with the latter he can request the data and current status of the payment request.

Sequence Diagram​

sequenceDiagram participant MA as Maypay App participant MS as Maypay Server participant WB as Web Button participant ES as eCommerce Server participant EC as eCommerce Client rect rgb(255, 255, 255) EC->>ES: Start Checkout activate ES ES->>MS: POST createMerchantPaymentRequest - flow web button activate MS MS->>ES: 201 CREATED - merchant deactivate MS ES->>EC: payment request created deactivate ES EC->>EC: Initialize web button alt Phone Number Flow EC->>WB: onClick activate WB WB->>WB:Enter phone number WB->>MS:POST phone number activate MS MS-->>MA:push notification MS->>WB:notification sent deactivate MS MA->>MS:GET Payment Request activate MS MS->>MA: payment request deactivate MS MA->>MS:confirm payment request activate MS MS-->>WB: payment result MS-->>MA: payment result MS-->>ES: payment result via callback url deactivate MS WB->>EC: onClose maypay-event - payment result deactivate WB else QR Code flow EC->>WB: onClick activate WB WB->>WB:Enter phone number WB->>MS:Display QR Code MA->>WB:Scan QR Code MA->>MS:GET Payment Request activate MS MS->>MA: payment request deactivate MS MA->>MS:confirm payment request activate MS MS-->>WB: payment result MS-->>MA: payment result MS-->>ES: payment result via callback url deactivate MS WB->>EC: onClose maypay-event - payment result deactivate WB else Mobile EC->>MA: Web Button open intercepted by Maypay App MA->>MS:GET Payment Request activate MS MS->>MA: payment request deactivate MS MA->>MS:confirm payment request activate MS MS-->>MA: payment result MS-->>ES: payment result via callback url deactivate MS end end

How to test​

API integration and testing is made easier by a Sandbox Test Environment provided by Maypay. This environment simulates the creation of transactions and interaction with the buyer, giving the possibility to decide what the payment outcome will be.

Prerequisites​

There is no difference between production and sandbox API endpoints. The distinction between production and sandbox API calls is made by the type of API Key. API Keys can be created via the merchant portal Maypay Business and can be of 2 types:

  • Production: API Keys to be used for the production environment
  • Sandbox: API Keys to be used for the sandbox environment

Test Web Button​

As explained in the Web Button use case, the buyer has to confirm the payment via the Maypay app on his or her mobile phone, getting a notification via phone number or scanning the QR code.

In the case of using a sandbox API key, however, the interface opened by the Web Button shows alternative buttons that simulate the buyer's action and the payment outcome, as shown below.

Maypay web button sandbox immediate

The buttons allow all payment outcomes to be simulated. Also in this environment, the result will be sent to the eCommerce server via the endpoint indicated by the callbackUrl, while the browser will receive the update via the maypay-event.

caution

Since this is a sandbox test environment, no real payment will be processed. Consequently, the transactionId will be null.