Skip to main content
This guide shows how to add Paze to a web checkout. The shopper completes the Paze flow in the browser with the Paze JavaScript SDK, and your server uses the Gr4vy server SDK to create a Paze session and the resulting transaction. For background on how Paze works and how Gr4vy fits in, read the overview.

​
Before you begin

Each merchant that wants to use Paze needs to be approved by Early Warning Services (EWS), and Gr4vy then enables Paze on a per-merchant basis. To start onboarding, see Set up Paze on the connector page. A runnable version of this integration is available in the sample-standalone-paze repository.
The server-side examples assume you have already created a Gr4vy client authenticated with your private API key. See Authentication to create the client. Keep your API key and the Gr4vy client on the server — never expose them in browser code.

​
Overview of the flow

The integration has server-side and browser-side steps:
  1. Server-side — create a Paze session with Gr4vy. The session returns the Paze merchant data id, merchant name, and profileId that the Paze JavaScript SDK needs.
  2. Browser-side — load the Paze JavaScript SDK, initialize it with the session, render the Paze button, and run the checkout.
  3. Server-side — create a Gr4vy transaction with the opaque token that the Paze checkout returns.

​
Step 1: Create a Paze session

On your server, create a Paze session with the domain that hosts the Paze button. Pass the full domain, including any subdomains such as www.. 
var res = await client.DigitalWallets.Sessions.PazeAsync(
    pazeSessionRequest: new PazeSessionRequest()
    {
        DomainName = "www.example.com",
    }
);

PazeWebSession? session = null;
if (res?.Type == ResponseCreatePazeDigitalWalletSessionType.PazeWebSession)
{
    session = res.PazeWebSession;
}
The session contains the values that the Paze JavaScript SDK needs. Return it to the browser.
Response
{
  "id": "W8GT9RLCNME754Z7025613H3PDM2T4HF2CSAOi9w2kkP3D4S0",
  "name": "ACME",
  "profileId": "550e8400-e29b-41d4-a716-446655440000"
}

​
Step 2: Load and initialize the Paze SDK

In the browser, add the Paze JavaScript SDK script for your environment. Use the sandbox script while testing, and the production script when you go live. 
<script src="https://checkout.wallet.uat.earlywarning.io/web/resources/js/digitalwallet-sdk.js"></script>
Once the script loads, the SDK is available as window.DIGITAL_WALLET_SDK. Initialize it with the session from Step 1, then render the Paze button. The initialization is asynchronous, so call it from inside an async function. 
const paze = window.DIGITAL_WALLET_SDK;

async function setupPaze(session) {
  await paze.initialize({ client: session });
}

<paze-button id="paze-button" label="Check out with" color="paze-blue" shape="default"></paze-button>

​
Step 3: Run the checkout

When the shopper clicks the button, call paze.checkout() followed by paze.complete(). Generate a unique sessionId to correlate the two calls. The complete() response is the opaque token that your server sends to Gr4vy as token, and the checkout() response is sent as the optional checkout_token (named per your SDK’s casing convention). 
const button = document.getElementById("paze-button");

button.addEventListener("click", async () => {
  const sessionId = crypto.randomUUID();

  const { checkoutResponse, result } = await paze.checkout({
    sessionId,
    transactionValue: {
      transactionAmount: "50.21",
      transactionCurrencyCode: "USD",
    },
  });

  if (result === "COMPLETE") {
    const { completeResponse } = await paze.complete({
      sessionId,
      transactionType: "PURCHASE",
      transactionValue: {
        transactionAmount: "50.21",
        transactionCurrencyCode: "USD",
      },
    });
    // Send completeResponse and checkoutResponse to your server.
  }
});
The preceding example shows a minimal set of Paze SDK options. See the sample-standalone-paze repository for the full option set.

​
Step 4: Create a transaction

On your server, create the transaction with the token returned by paze.complete(). Set the payment method method to paze and token to the complete() response. The checkout_token is optional but recommended. Set it to the checkout() response to add the card last four digits, card type, expiration, and shipping address to the transaction.
The Paze JavaScript SDK takes transactionAmount as a decimal string in major units (for example "50.21"), while Gr4vy’s transaction amount is an integer in the smallest currency unit (for example 5021 for $50.21). Convert between the two when bridging the values, and make sure they match for the same purchase.
var transaction = await client.Transactions.CreateAsync(
    transactionCreate: new TransactionCreate()
    {
        Amount = 5021,
        Currency = "USD",
        Country = "US",
        PaymentMethod = TransactionCreatePaymentMethod.CreatePazePaymentMethodCreate(
            new PazePaymentMethodCreate()
            {
                Method = "paze",
                Token = completeResponse,
                CheckoutToken = checkoutResponse,
            }
        ),
    }
);
The response is a standard Gr4vy transaction. Handle its status as you would for any other payment method.

​
Test Paze

To test Paze, load your integration in the browser and complete a checkout with a Paze test wallet. Make sure your environment matches where Paze is configured, so that the browser loads the matching Paze SDK script: the sandbox script for sandbox, and the production script for production.
Test wallet credentials are issued by Paze, not by Gr4vy. To obtain a test wallet for your merchant, work with Paze directly through your Paze onboarding contact.
For general sandbox environment information, see Paze’s Environments guide.