Get started

# With yarn
yarn add @primer-io/checkout-web

# With npm
npm install --save @primer-io/checkout-web

import { Primer } from "@primer-io/checkout-web";

Primer.showUniversalCheckout(clientToken, {
  /* Options */
});

<link rel="stylesheet" href="https://sdk.primer.io/web/v2.0.0/Checkout.css" />

<script
  src="https://sdk.primer.io/web/v2.0.0/Primer.min.js"
  integrity="sha384-yUCj6Q8h0Q6zFc35iT7v7pFoqlgpBD/xVr5SQxOgAnu2Cq286mf7IAyrFBJ8OsIa"
  crossorigin="anonymous"
></script>

const { Primer } = window;

Primer.showUniversalCheckout(clientToken, {
  /* Options */
});

const universalCheckout = await Primer.showUniversalCheckout(clientToken, {
  // Specify the selector of the container element
  container: "#checkout-container",

  /**
   * When the checkout flow has been completed, you'll receive
   * the successful payment via `onCheckoutComplete`.
   * Implement this callback to redirect the user to an order confirmation page.
   */
  onCheckoutComplete({ payment }) {
    console.log("Checkout Complete!", payment);
  },

  /**
   * When the checkout flow has been fail, you'll receive
   * the error via `onCheckoutFail`
   */
  onCheckoutFail(error, { payment }, handler) {
    console.log("Checkout Fail!", error, payment);
  },
});

onCheckoutFail(error, { payment }, handler) {
  // Notifies you that the checkout flow has failed and a payment could not be created
  // This callback can also be used to display an error state within your own UI.

  // ⚠️ `handler` is undefined if the SDK does not expect anything from you
  if (!handler) {
    return;
  }

  // ⚠️ If `handler` exists, you MUST call one of the functions of the handler

  // Show a default error message
  return handler.showErrorMessage();

  // Show a custom error message
  return handler.showErrorMessage('This is my custom error message');
}

use_frameworks!

target 'MyApp' do

  # 👇 Add this line
  pod 'PrimerSDK'

  # ...

end

import PrimerSDK

class MyViewController: UIViewController, PrimerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Initialize the SDK with the default settings.
        Primer.shared.configure(delegate: self)
    }

    func primerDidCompleteCheckoutWithData(_ data: PrimerCheckoutData) {
        // Primer checkout completed with data
        // do something...
    }
}

class MyViewController: UIViewController, PrimerDelegate {

    func startUniversalCheckout() {
        Primer.shared.showUniversalCheckout(clientToken: self.clientToken)
    }
}

class MyViewController: UIViewController {

		// ...

    func primerDidCompleteCheckoutWithData(_ data: PrimerCheckoutData) {
        // Primer checkout completed with data
        // Do something with the data, e.g. show the payment id
    }
}

class MyViewController: UIViewController, PrimerDelegate {

		// ...

    func primerDidFailWithError(_ error: Error, data: PrimerCheckoutData?, decisionHandler: @escaping ((PrimerErrorDecision) -> Void)) {
        // 👇 Call the decision handler to show a failure message
        decisionHandler(.fail(withErrorMessage: message))
    }
}

repositories {
  mavenCentral()
}

dependencies {
  implementation 'io.primer:android:latest.version'
}

android {
    kotlinOptions {
        freeCompilerArgs += '-Xjvm-default=all'
    }
}

class CheckoutActivity : AppCompatActivity() {

  private val listener = object : PrimerCheckoutListener {

    // 👇 [Required] This function is called when the checkout has been completed
    override fun onCheckoutCompleted(checkoutData: PrimerCheckoutData) {
      // Show an order confirmation screen...
      // checkoutData contains the payment that has been created
    }
  }

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    configureCheckout()
  }

  private fun configureCheckout() {
    // 👇 Initialize the SDK with the default settings.
    Primer.instance.configure(settings = PrimerSettings(), listener = listener)
  }
}

class CheckoutActivity : AppCompatActivity() {

  // other code goes here
  private lateinit var viewModel: CheckoutViewModel

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    setupViewModel()
    setupObservers()
    fetchClientToken()
  }

  private fun setupViewModel() {
    viewModel = ViewModelProvider(this).get(CheckoutViewModel::class.java)
  }

  private fun fetchClientToken() = viewModel.fetchClientToken()

  private fun setupObservers() {
    viewModel.clientToken.observe(this) { clientToken ->
        showUniversalCheckout(clientToken)
     }
 }

 private fun showUniversalCheckout(clientToken: String) {
    Primer.instance.showUniversalCheckout(this, clientToken)
 }
}

private val listener = object : PrimerCheckoutListener {

  override fun onCheckoutCompleted(checkoutData: PrimerCheckoutData) {
    // Show an order confirmation screen...
    // checkoutData contains the payment that has been created
  }
}

 private val listener = object : PrimerCheckoutListener {

  override fun onFailed(
    error: PrimerError,
    checkoutData: PrimerCheckoutData?,
    errorHandler: PrimerErrorDecisionHandler?
  ) {
    // Notifies you that the checkout flow has failed and a payment could not be created
    // This callback can also be used to display an error state within your own UI.

    // Show a default error message
    errorHandler?.showErrorMessage(null)

    // Show a custom error message
    errorHandler?.showErrorMessage("This is my custom error message")
  }
}

# With yarn
yarn add @primer-io/react-native

# With npm
npm i @primer-io/react-native --save

import {
  Primer,
  PrimerSettings,
  PrimerCheckoutData,
} from "@primer-io/react-native";

const CheckoutScreen = (props: any) => {
  const onCheckoutComplete = (checkoutData: PrimerCheckoutData) => {
    // Perform an action based on the payment creation response
    // ex. show success screen, redirect to order confirmation view, etc.
  };

  const onUniversalCheckoutButtonTapped = async () => {
    try {
      const settings: PrimerSettings = {
        onCheckoutComplete,
      };

      await Primer.configure(settings);
    } catch (err) {
      // Handle error
    }
  };
};

const CheckoutScreen = (props: any) => {
  // ...

  const onUniversalCheckoutButtonTapped = async () => {
    try {
      // ...
      // Ask your backend to create a client session
      const clientToken = await createClientSession();
    } catch (err) {
      // Handle error
    }
  };
};

const CheckoutScreen = async (props: any) => {
  // ...

  const onUniversalCheckoutButtonTapped = async () => {
    // ...

    try {
      // Ask your backend to create a client session
      const clientToken = await createClientSession();

      // Present Universal Checkout
      await Primer.showUniversalCheckout(clientToken);
    } catch (err) {
      // Handle error
    }
  };
};

const onCheckoutComplete = (checkoutData: PrimerCheckoutData) => {
  // Show a success screen
};

const onError = (
	error: PrimerError,
	checkoutData: PrimerCheckoutData | null,
	handler: PrimerErrorHandler | undefined,
) => {
  // Notifies you that the checkout flow has failed and a payment could not be created
  // This callback can also be used to display an error state within your own UI.

  // ⚠️ `handler` is undefined if the SDK does not expect anything from you
  if (!handler) {
    return;
  }

  // ⚠️ If `handler` exists, you MUST call one of the functions of the handler

  // Show a default error message
  handler.showErrorMessage();

  // Show a custom error message
  handler.showErrorMessage('This is my custom error message');