PayPal Here Web SDK

Overview

The PPH Web SDK is a single page script and is designed to be integrated on your final Payment or Checkout page.

The following restrictions apply to this SDK:

• Available only to the US region.
• Available only on Windows desktop/laptop browsers. Phone/Tablet mobile browsers are not supported.
• USB is the only supported connection method.
• No multi-card reader support: if two USB readers are connected, the SDK automatically connects to the first one it recognizes.

Integration

Similar to PayPal Here's iOS and Android SDKs, the Web SDK uses standard OAuth to authenticate. Make sure that you have already created your REST App and have reviewed the Merchant Onboarding section of the documentation. Also, review the GitHub repository for the latest script link and SDK version information.

Setup

PayPal Here Web SDK uses a headless standalone desktop application (PPHWebInterface) to interact with connected card readers. The one-time setup must be done before you can process payments and must be done on each machine. PayPal recommends using a separate setup page for the setupUI. Include the following snippet in your setup page:

1<button type="button" id='setupPPH' onclick='onSetupPayPalHereBtnClicked()'>Setup PayPal Here</button>

1function onSetupPayPalHereBtnClicked() {
2  pphwebsdk.Setup.startUIFlow().then(function (completionStep) {
3      // PPHWebInterface has been installed and, if clicked, a test of the connected card reader was completed.
4      // setup is complete
5  });
6}

To make sure that the setup has been completed on your computer prior to processing payments, call isSetupComplete(). If it hasn’t completed yet, call the startUIFlow as mentioned above. Otherwise, if it has already completed, you can continue on to your payment flow.

1pphwebsdk.Setup.isSetupComplete().then(function() {
2    // Continue to payment flow
3}).catch(function(err) {
4    // Run startUIFlow to setup SDK
5});

Accepting payments

Once everything has been set up, follow the steps in the order listed here to accept payments:

1. Create identity. This is similar to the initializeMerchant function of the iOS and Android SDKs. It tells the SDK which merchant account is receiving the payment and in which environment. For more information on token management, please refer to the PayPal Here Onboarding Process.

   1var identity = pphwebsdk.Identity.create(access_token).refreshUrl(refresh_url).environment(environment);

   Attribute	Type	Description
   access_token	String	Required Valid access token for the merchant account.
   refresh_url	String	Optional URL that the SDK will reach out to refresh the access token when it expires.
   environment	Enum	Required Needs to either be pphwebsdk.Types.Environment.LIVE or pphwebsdk.Types.Environment.SANDBOX.

2. Payment configuration. Even though you can process transactions with default values, the SDK allows you to customize the flow depending on your needs. Payment configuration is required for subscribing to events and customizing the payment flow. The following code snippet creates a default configuration:

   1var payment_config = pphwebsdk.PaymentConfiguration.create();

   Starting with version 1.1.1, the reader connection is handled by the payment configuration. You will create a reader object and then specify the connection type and reader manufacturer.

   1var reader = payment_config.reader();
   2      reader.connectionType(pphwebsdk.Types.ReaderConnectionType.USB);
   3      reader.manufacturer(pphwebsdk.Types.Manufacturers.MIURA);

   Object	Description	Values
   connectionType()	Accepts enum value for the reader connection type.	pphwebsdk.Types.ReaderConnectionType.USB
   manufacturer()	Accepts enum value for the reader being connected to.	pphwebsdk.Types.Manufacturers.MIURA pphwebsdk.Types.Manufacturers.INGENICO pphwebsdk.Types.Manufacturers.VERIFONE

   Note: The MIURA manufacturer correlates to the Chip Card Reader, the INGENICO manufacturer correlates to the Chip and Tap Reader, and the VERIFONE manufacturer correlates to the Verifone P400 reader which is only available for use with the Web SDK at this time.

3. Create order. In order to process payments or refunds, you need an order. The following snippet shows how to create an order for a payment and add items to it:

   1var order = pphwebsdk.Order.create();
   2  order.item('Cake').price(1.00).quantity(3);
   3  order.item('Coffee').price(2.00).quantity(3);

4. Process payment. Once you have the identity, payment configuration, and order ready, you can then accept the payment. The following snippet shows how to process a sale transaction:

   1var payment = pphwebsdk.Payment.create(identity, payment_config);
   2  payment.for(order).as(pphwebsdk.Types.PaymentMethod.CARD).sale();

   As part of the payment flow, the SDK will automatically prompt for any reader firmware updates that may be available. You'll need to subscribe to the success or failure events on the Reader object to get the status of said updates:

   1// Readers will automatically prompt for the update if there is one available. There are two events, on the Reader object, that will fire after an update.
   2pphwebsdk.Reader.subscribe
   3  .firmwareUpdateSuccess(function (upgradedDevice) {
   4    // Reader firmware update was a success
   5  })
   6  .firmwareUpdateFailure(function (err) {
   7    // Reader firmware update failed - handle accordingly
   8  });

   When the reader firmware update is done successfully, the SDK will simply continue on with the payment flow without you having to action anything. If the not now option was pressed on the reader firmware update UI, then you will need to call pendingUpdateInstall() to trigger that firmware update flow and install the update. If there is a firmware update, it needs to be completed successfully before you will be able to process another transaction. You can also call pendingUpdateInstall() prior to making a payment if you'd like to proactively check for any firmware updates available.

   1pphwebsdk.Reader.pendingUpdateInstall();

Object references

The following tables outline the different options for the objects mentioned above:

Payment configuration

Payment

Order

PaymentMethod types

Refer to the samples for more details on the usage of these payment method types.

Item

Order for refund

Events

Event handlers are functions that are subscribed to as part of the PaymentConfiguration. These events may have arguments as mentioned below. Refer to the samples for details on how these events are implemented.

Samples

Below are some simple samples for event handlers, reader updates, payment, and refund:

Event handlers

1var payment_config = pphwebsdk.PaymentConfiguration.create();
2  payment_config.subscribe
3    .onConnectReaderSuccess(function (details) {
4      //Details of card reader provided
5    })
6    .onConnectReaderFailure(function (err) {
7      //Unable to connect to reader - handle error scenario
8    })
9    .onMerchantInitializeSuccess(function (merchant) {
10      //Merchant initialized successfully
11    })
12    .onMerchantInitializeFailure(function (err) {
13      //Unable to intialize merchant - handle error scenario
14    })
15    .onPaymentSuccess(function (txnRecord) {
16      //Payment success
17    })
18    .onPaymentFailure(function (err) {
19      //Payment failed - handle error scenario
20    });

Payment with full options

1var identity = pphwebsdk.Identity.create(access_token).refreshUrl(refresh_url).environment(environment);
2
3  var payment_config = pphwebsdk.PaymentConfiguration.create();
4  payment_config.subscribe
5    .onConnectReaderSuccess(function (details) {
6      //Details of card reader provided
7    })
8    .onConnectReaderFailure(function (err) {
9      //Unable to connect to reader - handle error scenario
10    })
11    .onMerchantInitializeSuccess(function (merchant) {
12      //Merchant initialized successfully
13    })
14    .onMerchantInitializeFailure(function (err) {
15      //Unable to intialize merchant - handle error scenario
16    })
17    .onPaymentSuccess(function (txnRecord) {
18      //Payment success
19    })
20    .onPaymentFailure(function (err) {
21      //Payment failed - handle error scenario
22    });
23
24  var reader = payment_config.reader();
25  reader.connectionType(pphwebsdk.Types.ReaderConnectionType.USB);
26  reader.manufacturer(pphwebsdk.Types.Manufacturers.MIURA);
27
28  var order = pphwebsdk.Order.create();
29  order.item('Cake').price(1.00).quantity(3);
30  order.item('Coffee').price(2.00).quantity(3);
31  order.tip(1.00);
32
33  var payment = pphwebsdk.Payment.create(identity, payment_config);
34  payment.for(order).as(pphwebsdk.Types.PaymentMethod.CARD).sale();

Refund

1var identity = pphwebsdk.Identity.create(access_token).refreshUrl(refresh_url).environment(environment);
2
3  var payment_config = pphwebsdk.PaymentConfiguration.create();
4  payment_config.subscribe
5    .onRefundSuccess(function (txnRecord) {
6      //Payment success
7    })
8    .onRefundFailure(function (err) {
9      //Payment failed - handle error scenario
10    });
11
12  var reader = payment_config.reader();
13  reader.connectionType(pphwebsdk.Types.ReaderConnectionType.USB);
14  reader.manufacturer(pphwebsdk.Types.Manufacturers.MIURA);
15
16  var order = pphwebsdk.Order.create().on(txnId).with(ppInvoiceId).for(totalAmount);
17
18  var payment = pphwebsdk.Payment.create(identity, payment_config);
19  payment.for(order).as(pphwebsdk.Types.PaymentMethod.CARD).refund();

When your integration is complete, check the going live page to ensure that you have everything ready for activation. Once that is working, you can implement other customizations that are available with the SDK into your integration.