Built-in Purchase Orders


Steps described on this page assume that you have followed previous steps and read about order creation.

Monetizr has built it's in-app payment system with Stripe, a payment processing service. It means that Monetizr itself does not process the payments or store any credit card details. To create built-in purchase orders using Monetizr means to use Monetizr's Stripe pre-built integration. During the process, you will need to supply the necessary information from the player to Stripe directly.

Note that you do not need to build full Stripe integration yourself. Also, you do not need to have a Stripe account to create built-in purchase orders with Monetizr. Also, you can use a solution built by Monetizr to complete payment with Stripe integration.



We highly advise NOT to save any credit card details that players will submit during the checkout process. Doing so will open you to legal risks and other potential harm.

Step 8: Set up Stripe Client-side integration

You can skip this step if you choose to use Monetizr Stripe client side integration.

Once the checkout information has been collected you can create the billing experience. Note that you can't start with billing detail collection because the final price needs to be known before initiating payment. To determine the final price the shipping and tax details must be first collected.


Implement Stripe only on Client-side

Monetizr has built server-side payment integration for you. When referring to integration steps in Stripe documentation please note that only Client-side (i.e. the player) steps need to be implemented.

To use Monetizr's pre-built Stripe integration you need to use Monetizr's publishable Stripe API keys, These are not secret and let's Stripe payment processing service know that payment should be attributed to Monetizr.

Monetizr's publishable Stripe API keys

Testing setup key: pk_test_OS6QyI1IBsFtonsnFk6rh2wb00mSXyblvu
Production setup key: pk_live_CWmQoXocvis3aEFufn7R1CKf


Stripe documentation links

You can find how to use Stripe and accept payments on client-side devices: https://stripe.com/docs/payments/accept-a-payment.

Links to dedicated sections for: Web based payments, Android, iOS, Web platform or CMS, Apple Pay, Google Pay, other wallets.

Let's look at an example of setting up client-side integration for a web.

Start with including stripe.js in checkout form.

  <script src="https://js.stripe.com/v3/"></script>

Initiate connection to Stripe using Monetizr publishable key.

// Use development key for testing purposes
var stripe = Stripe('pk_test_OS6QyI1IBsFtonsnFk6rh2wb00mSXyblvu');
var elements = stripe.elements();

Add Stripe elements to checkout form. Stripe Elements is a set of pre-built UI components, like inputs and buttons, for building your checkout flow. With Elements, you will be able to collect client card details.

<form id="payment-form">
  <div id="card-element">
    <!-- Elements will create input elements here -->

  <!-- We'll put the error messages in this element -->
  <div id="card-errors" role="alert"></div>

  <button id="submit">Pay</button>

When the form above has loaded create an instance of an Element. Mount it to the Element container.

// Set up Stripe.js and Elements to use in checkout form
var style = {
  base: {
    color: "#32325d",

var card = elements.create("card", { style: style });

The card Element simplifies the form and minimizes the number of required fields by inserting a single, flexible input field that securely collects all necessary card and billing details.

Element validates user input as it is typed. To help your players catch mistakes listen to change events on the card Element and display any errors.

card.addEventListener('change', ({error}) => {
  const displayError = document.getElementById('card-errors');
  if (error) {
    displayError.textContent = error.message;
  } else {
    displayError.textContent = '';

Step 9: Collect player payment details

Payment details for the web are collected with Stripe Elements. These details can also be collected by showing Google Pay or Apple Pay payment sheet UIs to players. Note that Google Pay and Apple Pay are not supported in all countries. It's suggested to always have web support in addition to platform wallets to make sure all players have at least one payment option available.

To collect player payment details with Google Pay you can use Google Pay, Stripe Android SDK, Stripe Elements or Stripe Payment Intents API.
To collect player payment details with Apple Pay you can use Apple Pay, Stripe iOS SDK or Stripe Payment Intents API.

To use Monetizr Stripe client side integration solution, you will need to start with next step and initiate payment intent.

Step 10: Create payment intent

Payment intents are signals to Stripe that payment must be processed. Intents are one-time use only and can't be repeated once payment has been processed. This way player cards can't be charged repeatedly.

To create a payment intent POST request to Payment. The request will create a server-side payment intent. In response, Monetizr will provide you the necessary client secret to confirm payment from the player client-side. Client secret value is being returned in parameter intent. You can instead use web_url and present Stripe elements client side integration payment sheet prebuilt by Monetizr.

You can read more about passing secrets to client-side here.

    "status": "success",
    "message": "Payment intent has been generated",
    "web_url": "https://pay.themonetizr.com/234567654321345676654321345"

Step 11: Submit payment to Stripe

This step is required if you have chosen to build your own Stripe client side integration. The functionality is covered by Monetizr Stripe elements client side solution.

After retrieving client secret you can submit a payment to Stripe for processing. In the submission response, you will receive payment processing status.

Submit client-side HTML payment for Stripe web integration.

var form = document.getElementById('payment-form');

form.addEventListener('submit', function(ev) {
  stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: card,
      billing_details: {
        name: 'John Smith'
  }).then(function(result) {
    if (result.error) {
      // Show error to your customer
    } else {
      // The payment has been processed!
      if (result.paymentIntent.status === 'succeeded') {
        // Show a success message to your customer
        // There's a risk of the customer closing the window before callback
        // execution. Monetizr is listening to payment success and
        // if everything has been successful initiates 
        // order fulfillment process

Stripe client side integration solution provided by Monetizr

You can choose to use a solution provided by Monetizr and skip Stripe client side integration as Monetizr has built a client side integration for you to use. To use the provided Stripe elements payment solution you will need to head back to Step 10 and create a payment intent. The step 10 requires that you initiate a payment intent POST request to Payment. The request will create a server-side payment intent. In response, Monetizr will provide you with web_url, you can use the unique web url and show Stripe elements payment sheet to the player.

In this scenario Monetizr provides an already built Stripe Client-side integration. The solution is a lightweight Stripe elements integration that does not provide anything else except the Stripe elements. The web_url returned from Payment is a unique url valid only for the created payment intent.

The integration in this scenario is the following:

  • Create a payment intent as described in Step 10
  • You will receive web_url as well as client_secret and payment intent that you can then use to create either your own Stripe elements integration (described in Step 8). Or you can show the web_url to the player and he will be presented with Stripe elements payment sheet
  • After you submit payment, you will need to go to the next step and complete the order

What’s Next
Did this page help you?