Welcome to Monetizr Documentation!

Here you will find a comprehensive technical guide
to help you get started with Monetizr SDKs, Plugins,
API reference guide and Console.

Get Started    API Reference

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.

❗️

Warning!

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

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.

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

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 -->
  </div>

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

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

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 });
card.mount("#card-element");

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.

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 read more about passing secrets to client-side here.

{
    "status": "success",
    "message": "Payment intent has been generated",
    "intent":"pi_1Gdfdffdfgdfgfgfdgfdfdfdfdfd"
}

Step 11: Submit payment to Stripe

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) {
  ev.preventDefault();
  stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: card,
      billing_details: {
        name: 'John Smith'
      }
    }
  }).then(function(result) {
    if (result.error) {
      // Show error to your customer
      console.log(result.error.message);
    } 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
      }
    }
  });
});

Updated 7 months ago



Built-in Purchase Orders


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.