Skip to main content

WebView + Webhook Integration

Updated

 

Embed PlayCamp’s WebView UI in your game to provide creator boost functionality. 

This is the fastest integration method — no additional UI development required.

​

When to Use This Method

  • You want to provide creator boost functionality quickly
  • You don’t need to build a custom UI
  • PlayCamp’s built-in creator search/selection UI works for your game

​

Full Flow

Development Tasks

# Task Owner Description
1 Place PlayCamp entry point Game Client Add icon/button in game
2 OTT issuance endpoint Game Server Issue OTT on client request
3 Open WebView Game Client Open WebView URL with OTT
4 Webhook receiver endpoint Game Server Receive boost match results
5 Payment registration API Game Server Send in-game purchases to PlayCamp

​

 

Step 1: Issue OTT (Game Server)

Issue a One-Time Token (OTT) from your game server to PlayCamp SDK API. OTT is single-use with 60-second TTL, so you must issue a new one each time the user opens WebView.

curl -X POST "https://sandbox-sdk-api.playcamp.io/v1/server/webview/ott" \
  -H "Authorization: Bearer ak_server_xxx:secret" \
  -H "Content-Type: application/json" \
  -d '{
    "userId": "game_user_id"
  }'
const result = await server.webview.createOtt({
  userId: 'game_user_id',
});

// result.ott → OTT token (pass to client)
 
result, err := server.Webview.CreateOTT(ctx, playcamp.WebviewOttParams{
    UserID: "game_user_id",
})

// result.OTT → OTT token (pass to client)

Response

{
  "data": {
    "ott": "a1b2c3d4e5f6...64char_hex",
    "expiresIn": 60
  }
}

Details: WebView Integration - OTT API

​

Step 2: Open WebView (Game Client)

Open the WebView URL with the OTT received from the game server.

​

Base URL

Environment URL
Sandbox https://sandbox-sdk-api.playcamp.io/webview/?ott={token}
Live https://sdk-api.playcamp.io/webview/?ott={token}

​

 

Optional Parameters

Parameter Description Example
lang Language (ko, en) &lang=ko
tabs Limit visible tabs &tabs=sponsor
primaryColor Theme color (hex, without #) &primaryColor=FF6B35

Full Example

 
https://sandbox-sdk-api.playcamp.io/webview/?ott=a1b2c3d4...&lang=ko&tabs=sponsor&primaryColor=FF6B35

Details: WebView Integration - URL Configuration

​

Step 3: Receive Boost Match via Webhook (Game Server)

When the user selects a creator in WebView, PlayCamp sends the match result to your game server’s webhook URL.

​

Payload (sponsor.created)

 
{
  "events": [
    {
      "event": "sponsor.created",
      "timestamp": "2024-01-15T10:30:00.000Z",
      "data": {
        "userId": "game_user_id",
        "campaignId": "campaign_001",
        "creatorKey": "ABC12"
      }
    }
  ]
}
Field Description
userId Game user ID (the value passed when issuing OTT)
campaignId Campaign ID
creatorKey Creator identifier selected by the user

​

 

Signature Verification

Verify that the request came from PlayCamp using the X-Webhook-Signature header.

import { verifyWebhook } from '@playcamp/node-sdk';

app.post('/webhooks/playcamp', express.raw({ type: 'application/json' }), (req, res) => {
  const result = verifyWebhook({
    payload: req.body.toString(),
    signature: req.headers['x-webhook-signature'],
    secret: process.env.WEBHOOK_SECRET,
  });

  if (!result.valid) {
    return res.status(401).json({ error: result.error });
  }

  for (const event of result.payload.events) {
    if (event.event === 'sponsor.created') {
      // Store userId and creatorKey match
      console.log(`User ${event.data.userId} → Creator ${event.data.creatorKey}`);
    }
  }

  res.json({ received: true });
});
func handleWebhook(w http.ResponseWriter, r *http.Request) {
    body, _ := io.ReadAll(r.Body)

    result := webhookutil.Verify(webhookutil.VerifyOptions{
        Payload:   body,
        Signature: r.Header.Get("X-Webhook-Signature"),
        Secret:    os.Getenv("WEBHOOK_SECRET"),
    })

    if !result.Valid {
        http.Error(w, result.Error, http.StatusUnauthorized)
        return
    }

    for _, event := range result.Payload.Events {
        if event.Event == playcamp.WebhookEventSponsorCreated {
            // Store userId and creatorKey match
            fmt.Printf("User %s → Creator %s\n", event.Data.UserID, event.Data.CreatorKey)
        }
    }

    w.WriteHeader(http.StatusOK)
    json.NewEncoder(w).Encode(map[string]bool{"received": true})
}

Details: Webhook Events

​

Step 4: Register Payments (Game Server)

When an in-game purchase occurs, send the payment information to PlayCamp. Registered payments are automatically attributed to the user’s boosted creator.

curl -X POST "https://sandbox-sdk-api.playcamp.io/v1/server/payments" \
  -H "Authorization: Bearer ak_server_xxx:secret" \
  -H "Content-Type: application/json" \
  -d '{
    "userId": "game_user_id",
    "transactionId": "txn_abc123",
    "productId": "gem_pack_100",
    "productName": "100 Gem Pack",
    "amount": 9900,
    "currency": "KRW",
    "platform": "Android",
    "distributionType": "MOBILE_STORE",
    "purchasedAt": "2024-01-15T10:30:00.000Z"
  }'
const payment = await server.payments.create({
  userId: 'game_user_id',
  transactionId: 'txn_abc123',
  productId: 'gem_pack_100',
  productName: '100 Gem Pack',
  amount: 9900,
  currency: 'KRW',
  platform: 'Android',
  distributionType: 'MOBILE_STORE',
  purchasedAt: new Date('2024-01-15T10:30:00Z'),
});
purchasedAt, _ := time.Parse(time.RFC3339, "2024-01-15T10:30:00Z")

payment, err := server.Payments.Create(ctx, playcamp.CreatePaymentParams{
    UserID:           "game_user_id",
    TransactionID:    "txn_abc123",
    ProductID:        "gem_pack_100",
    ProductName:      playcamp.String("100 Gem Pack"),
    Amount:           9900,
    Currency:         "KRW",
    Platform:         playcamp.PaymentPlatformAndroid,
    DistributionType: playcamp.String("MOBILE_STORE"),
    PurchasedAt:      purchasedAt,
})
 

Details: Payment Registration

​

Step 5: Settlement

Monthly settlement is processed based on payment data.

  1. Revenue Close — Payment data aggregated at end of each month
  2. Revenue Reconciliation — Match PlayCamp settlement data with your internal records
  3. Settlement Payment — Payment after reconciliation confirmation
  4. Creator Settlement — PlayCamp distributes revenue to creators

Details: Settlement

Powered by Zendesk