Enable web payments with Stripe

JWP enables you to monetize your content through web payments.

For your videos that require registration and payment, a new user must register and provide payment details. Your app makes an API call to create an account and recurring subscription. Payment is processed. After a successful payment, the app validates the user's access and begins content playback.

info

Since this implementation uses both JWP and InPlayer technologies, SDK methods and API calls will use the following namespaces and domains:

  • InPlayer
  • inplayer.com
  • jwplayer.com

Prerequisites#

ItemDescription
New or existing appWeb-based app that displays content to users
Web Payment EntitlementEntitlement required to set up web payments

Contact your JWP representative for more information.
Payment PlanPlan that allows access to specified app content

You can create basic payment plans or complex payment plans that include features such as discount codes.
Asset ID & Client IDIDs that enable access to content when combined:
  • Asset ID: Subscription asset that must be purchased to watch content on the app
  • Client ID: Authentication realm where user account is created
Contact your JWP representative for more information.
Stripe AccountJWP-supported web payment provider

JWP only supports Stripe as a web payment provider. If you use another web payment provider, you will need to migrate to Stripe.

Configure WebSocket notifications#

WebSocket notifications enable communication between your app and JWP. Whether you implement web payments with the JavaScript SDK or REST API, you must set up JavaScript to set up and configure WebSockets notifications.

You can provide updates to your users by displaying a WebSocket notification.

Follow these steps to listen for a subscription notification and display a message to your users:

  1. Add the following code to your app.

    InPlayer.subscribe(uuid, {
    onMessage: function(message) {
    // Popup style
    let style = document.createElement('style');
    style.innerHTML = `
    .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    }
    `;
    if (message.type === 'subscribe.failed') {
    // Create and style popup
    let popup = document.createElement('div');
    popup.classList.add('popup');
    popup.innerHTML = message.text;
    // Append popup & styles
    document.body.appendChild(popup);
    document.body.appendChild(style);
    // Hide after 3 secs
    setTimeout(function() {
    popup.style.display = 'none';
    }, 3000);
    } else if (message.type === 'subscribe.success') {
    // Create success popup
    let popup = document.createElement('div');
    popup.classList.add('popup');
    popup.innerHTML = "Subscription created successfully";
    // Append popup & styles
    document.body.appendChild(popup);
    document.body.appendChild(style);
    // Hide after 3 secs
    setTimeout(function() {
    popup.style.display = 'none';
    }, 3000);
    }
    }
    });

  2. Replace uuid with your UUID.

  3. Configure the appearance of the popup in the .popup CSS settings.

  4. Define how long the popup displays by adjusting the setTimeout values.

You can now set up web payments through the JavaScript API or REST API.

Set up web payments#

JWP enables you to set up web payments using either a JavaScript SDK or REST API:

  • JavaScript SDK: Use for a direct integration between the app and JWP.
  • REST API: Use this for integrations where the app communicates with JWP using middleware.
info

This web payment solution only supports single packages.


JavaScript SDK#

New User#

Follow these steps to enable web payments with Stripe for a new user:

  1. Create a new user account by calling InPlayer.Account.signUp().

    When the request succeeds, JWP creates a new user object and returns a unique user authentication token. When the request fails, JWP returns a failure response.

    InPlayer.Account.signUp({
    fullName: 'test',
    email: 'test32@test.com',
    password: '12345678',
    passwordConfirmation: '12345678',
    clientId: 'd20252cb-d057-4ce0-83e0-63da6dbabab1',
    type: 'consumer',
    referrer: 'http://localhost:3000/',
    metadata: {
    city: 'Skopje'
    }
    }).then(data => console.log(data));

  2. Retrieve the subscription price by calling InPlayer.Asset. The SDK will return the currency and amount in the response that can be used to display the subscription price in your app.

    InPlayer.Asset
    .getAssetAccessFees(555)
    .then(data => console.log(data));

  3. Create a recurring payment card subscription by calling InPlayer.Subscription().

    If the request succeeds, the following actions occur:

    • JWP sends a subscription record to Stripe.
    • Stripe creates a subscription and sends it to JWP.
    • JWP sends your app a subscribe.success WebSocket notification.
    • Your app displays the notification to the user.

    If the request fails, the following actions occurs:

    InPlayer.Subscription
    .createSubscription(
    {
    number: 1,
    cardName: 'Payoneer',
    expMonth: 11,
    expYear: 12,
    cvv: 546,
    accessFee: 13.4,
    paymentMethod: 1,
    referrer: 'http://localhost:3000',
    voucherCode: '123123125914i2erjfg',
    brandingId?: 1234,
    returnUrl?: 'https://event.inplayer.com/staging',
    }
    )
    .then(data => console.log(data));

  4. Validate the user's access by calling checkAccessForAsset().

    If access to the asset is verified, the method returns the content in the response that you can display in your app. If access to the asset cannot be verified, your app should redirect the user to your payment page to re-enter payment details.

    InPlayer.Asset
    .checkAccessForAsset(InPlayer.Account.token(),ASSET_ID)
    .then(data => console.log(data))
    .catch(error => error.response.json().then(data => console.log("Error", data)));

After you have validated the user's access, you can fetch the content by media ID and begin playback.

If you use an app config to manage your content, you can obtain the media ID from the contentId parameter of the app config URL.

tip

You can add URL signing or digital rights management (DRM) for extra layers of content protection.



Existing User#

Follow these steps to enable web payments with Stripe for an existing user:

  1. Create a new user account by calling InPlayer.Account.signIn().

    When the request succeeds, JWP creates a new user object and returns a unique user authentication token. When the request fails, JWP returns a failure response.

    InPlayer.Account.signInV2({
    email: 'test@test.com',
    password: 'test123',
    cliendId: '123-123-hf1hd1-12dhd1',
    referrer: 'http://localhost:3000/'
    })
    .then(data => console.log(data));

  2. Retrieve the subscription price by calling InPlayer.Asset. The SDK will return the currency and amount in the response that can be used to display the subscription price in your app.

    InPlayer.Asset
    .getAssetAccessFees(555)
    .then(data => console.log(data));

  3. Create a recurring payment card subscription by calling InPlayer.Subscription().

    If the request succeeds, the following actions occur:

    • JWP sends a subscription record to Stripe.
    • Stripe creates a subscription and sends it to JWP.
    • JWP sends your app a subscribe.success WebSocket notification.
    • Your app displays the notification to the user.

    If the request fails, the following actions occurs:

    InPlayer.Subscription
    .createSubscription(
    {
    number: 1,
    cardName: 'Payoneer',
    expMonth: 11,
    expYear: 12,
    cvv: 546,
    accessFee: 13.4,
    paymentMethod: 1,
    referrer: 'http://localhost:3000',
    voucherCode: '123123125914i2erjfg',
    brandingId?: 1234,
    returnUrl?: 'https://event.inplayer.com/staging',
    }
    )
    .then(data => console.log(data));

  4. Validate the user's access by calling checkAccessForAsset().

    If access to the asset is verified, the method returns the content in the response that you can display in your app. If access to the asset cannot be verified, your app should redirect the user to your payment page to re-enter payment details.

    InPlayer.Asset
    .checkAccessForAsset(InPlayer.Account.token(),ASSET_ID)
    .then(data => console.log(data))
    .catch(error => error.response.json().then(data => console.log("Error", data)));

After you have validated the user's access, you can fetch the content by media ID and begin playback.

If you use an app config to manage your content, you can obtain the media ID from the contentId parameter of the app config URL.

tip

You can add URL signing or digital rights management (DRM) for extra layers of content protection.


REST API#

New User#

Follow these steps to enable web payments with Stripe for a new user:

  1. Create a new user account by calling POST /accounts.

    When the request succeeds, JWP creates a new user object and returns a unique user authentication token that is valid for 30 days. When the request fails, JWP returns a failure response.

    curl -L -X POST 'https://services.inplayer.com/accounts' \
    -H 'Content-Type: application/x-www-form-urlencoded' \
    --data-urlencode 'full_name=John Doe' \
    --data-urlencode 'username=john@example.com' \
    --data-urlencode 'password=foobar123' \
    --data-urlencode 'password_confirmation=foobar123' \
    --data-urlencode 'type=consumer' \
    --data-urlencode 'grant_type=password' \
    --data-urlencode 'client_id=12345678-90ab-1c23-4567-89d0e123f45' \
    --data-urlencode 'metadata%5Bphone%5D=bar'

  2. Retrieve the subscription price by calling GET /v2/items/{id}/access-fees. The API will return the currency and amount in the response that can be used to display the subscription price in your app.

    curl --location 'https://services.inplayer.com/v2/items/{id}/access-fees' \
    --header 'Authorization: Bearer <token>' \

  3. Create a recurring payment card subscription by calling POST /subscriptions.

    If the request succeeds, the following actions occur:

    • JWP sends a subscription record to Stripe.
    • Stripe creates a subscription and sends it to JWP.
    • JWP sends your app a subscribe.success WebSocket notification.
    • Your app displays the notification to the user.

    If the request fails, the following actions occurs:

    curl --location 'https://services.inplayer.com/subscriptions' \
    --header 'Content-Type: application/x-www-form-urlencoded' \
    --header 'Authorization: Bearer <token>' \
    --data-urlencode 'number=4242424242424242' \
    --data-urlencode 'card_name=John Doe' \
    --data-urlencode 'exp_month=02' \
    --data-urlencode 'exp_year=2043' \
    --data-urlencode 'cvv=444' \
    --data-urlencode 'access_fee=7916' \
    --data-urlencode 'payment_method=1' \
    --data-urlencode 'referrer=https://event.inplayer.com/v3/sandbox?asset=43222'

  4. Validate the user's access by calling GET /items/{asset-ID}/access.

    If access to the asset is verified, the method returns the content in the response that you can display in your app. If access to the asset cannot be verified, your app should redirect the user to your payment page to re-enter payment details.

    curl https://services.inplayer.com/items/{id}/access \
    -H "Authorization:Bearer <token>"

After you have validated the user's access, you can fetch the content by media ID and begin playback.

If you use an app config to manage your content, you can obtain the media ID from the contentId parameter of the app config URL.

tip

You can add URL signing or digital rights management (DRM) for extra layers of content protection.



Existing User#

Follow these steps to enable web payments with Stripe for an existing user:

  1. Create a new user account by calling POST /v2/accounts/authenticate.

    When the request succeeds, JWP creates a new user object and returns a unique user authentication token that is valid for 30 days. When the request fails, JWP returns a failure response.

    curl -L -X POST 'https://services.inplayer.com/v2/accounts/authenticate' \
    -H 'Content-Type: application/x-www-form-urlencoded' \
    --data-urlencode 'client_secret=foobar123' \
    --data-urlencode 'grant_type=password' \
    --data-urlencode 'client_id=12345678-90ab-1c23-4567-89d0e123f45' \

  2. Retrieve the subscription price by calling GET /v2/items/{id}/access-fees. The API will return the currency and amount in the response that can be used to display the subscription price in your app.

    curl --location 'https://services.inplayer.com/v2/items/{id}/access-fees' \
    --header 'Authorization: Bearer <token>' \

  3. Create a recurring payment card subscription by calling POST /subscriptions.

    If the request succeeds, the following actions occur:

    • JWP sends a subscription record to Stripe.
    • Stripe creates a subscription and sends it to JWP.
    • JWP sends your app a subscribe.success WebSocket notification.
    • Your app displays the notification to the user.

    If the request fails, the following actions occurs:

    curl --location 'https://services.inplayer.com/subscriptions' \
    --header 'Content-Type: application/x-www-form-urlencoded' \
    --header 'Authorization: Bearer <token>' \
    --data-urlencode 'number=4242424242424242' \
    --data-urlencode 'card_name=John Doe' \
    --data-urlencode 'exp_month=02' \
    --data-urlencode 'exp_year=2043' \
    --data-urlencode 'cvv=444' \
    --data-urlencode 'access_fee=7916' \
    --data-urlencode 'payment_method=1' \
    --data-urlencode 'referrer=https://event.inplayer.com/v3/sandbox?asset=43222'

  4. Validate the user's access by calling GET /items/{asset-ID}/access.

    If access to the asset is verified, the method returns the content in the response that you can display in your app. If access to the asset cannot be verified, your app should redirect the user to your payment page to re-enter payment details.

    curl https://services.inplayer.com/items/{id}/access \
    -H "Authorization:Bearer <token>"

After you have validated the user's access, you can fetch the content by media ID and begin playback.

If you use an app config to manage your content, you can obtain the media ID from the contentId parameter of the app config URL.

tip

You can add URL signing or digital rights management (DRM) for extra layers of content protection.

Edit this page