Game Controller

Paywall.js now supports game controller input so users can make purchases while maintaining the native game controller experience.

Basic Setup

To attach an on-screen button to a game controller button, simply add the data-pw-gc-button tag to the element. The value of this tag must match the unmappedLocalizedName of the game controller button in iOS.

For example, the following button would purchase the primary product if a user pressed the "A" button on their game controller.

<div data-pw-purchase="primary" data-pw-gc-button="A Button">Purchase</div>

Styling

To allow users to style buttons, we will add and remove classes during the button press event. When the game controller input becomes depressed, we add pw-gc-press. When the button is let up, we will remove that class. Many users will use these classes to slightly shirk the button on press and restore it on press end.

.pw-gc-press {
    opacity: 0.9;
    transition: all .2s ease-in-out;
    transform: scale(0.93);
}

Advanced

Some users may want to take other actions based on the game controller input so we will automatically forward all game controller events to a function on the window if it is defined.

type DirectionalInput = {
  controller_element: string
  directional: true
  x: number
  y: number
}
type NonDirectionalInput  = {
  controller_element: string
  directional: false
  value: number
}

export type Input =
  | DirectionalInput
  | NonDirectionalInput

window.onGameControllerInput = (data: Input) => {
    // Do anything you want with the input!
}