Integrate PayButton with Your Web Shop

Merchants who have already invested in building a web shop and want to leverage this asset can integrate PayButton with their web shops for new use cases, including:

In-Store E-Commerce: Enable store staff to order out-of-stock items for in-store customers and accept card payments for the transaction.

Field Sales: Enable field sales team members to place orders while off site and accept card payments for the transaction.

Overview and Demo

There are two components required to integrate a card reader to accept card payments with your web shop:

Your web shop, which you want to extend to support card reader payments.

Payworks ready-made payment app for Android or iOS, which connects to the card reader and processes the card payment.

To get started with a quick demo:

Ask your account manager to activate your test card reader for the demo.

Install the Payment App for Android or iOS.

Pair your card reader.

Open the Demo Web Shop in a web browser on the card reader.

Start a transaction in the Demo Web Shop.

Web Shop and Payment App Interaction

The sequence diagram below shows the interaction between all of the components. A description of the sequence steps follows the diagram.

Registering the Transaction

The Web Shop is open in the web browser of the tablet and the sales staff chooses to accept the payment from the customer through the card reader.

To start the transaction (tx), the Web Shop backend must register the transaction with the Payworks Platform. For more information, see Register transaction from your backend. The transaction registration will return a

sessionIdentifier

, which must be passed along when launching the Payment App.

Store the returned

transactionIdentifier

so you can match the WebHooks you receive for the transaction status (Step 3).

Launching the Payment App

After registering the transaction, the Web Shop must display a button for the store staff to use to launch the Payment App.

The handoff between the Web Shop and Payment App is done through a custom URI scheme:

payworks://

. To launch the Payment App, the Web Shop frontend must open this URL:

payworks://transaction/charge?sessionIdentifier=<sessionIdentifierFromStep1>
                             &providerMode=TEST
                             &accessoryFamily=MIURA_MPI
                             &merchantIdentifier=<IdentifierFromGatewayMngr>
                             &merchantSecretKey=<SecretKeyFromGatewayMngr>
          &returnURL=<URL> (only for iOS)

Element	Description
sessionIdentifier	Identifies the session and is required to start processing the transaction.
providerMode	Specifies whether the transactions should bed processed on the Test or Live platform. Use TEST for the Payworks Test platform or LIVE for the Live platform.
accessoryFamily	Specifies the type of the card reader. For the Miura card readers, use MIURA_MPI .
merchantIdentifier	Uniquely identifies the merchant performing the transaction.
merchantSecretKey	Used with the merchantIdentifier to authenticate the merchant.

Receiving the Transaction Status via WebHook

The Web Shop backend receives a WebHook from the Payworks Platform informing the Web Shop about the transaction status after completion. For more information, see Register and Test WebHooks.

Using the

transactionIdentifier

included in the WebHook, you can locate the transaction in your backend. If the transaction status is

APPROVED

, you can clear the ordered goods for delivery to the customer.