Headless Checkout

use_frameworks!

target 'MyApp' do

  # 👇 Add this line
  pod 'PrimerSDK'

  # ...

end

import UIKit
// 👇 Import the SDK
import PrimerSDK

class ViewController: UIViewController {

    // ...

    var availablePaymentMethods: [PrimerHeadlessUniversalCheckout.PaymentMethod]?

    override func viewDidLoad() {
        super.viewDidLoad()

        // ...

        // 👇 Start Headless Universal Checkout with your session's client token
        PrimerHeadlessUniversalCheckout.current.start(withClientToken: clientToken, delegate: self) { availablePaymentMethods, err in
            if let err = err {
                // Handle error
            } else if let availablePaymentMethods = availablePaymentMethods {
                // Payment methods that are available for this session
                self.availablePaymentMethods = availablePaymentMethods
            }
        }
    }
}

extension ViewController: PrimerHeadlessUniversalCheckoutDelegate {

    // 👇 [Required] This function will return the checkout data once the payment is finished
    func primerHeadlessUniversalCheckoutDidCompleteCheckoutWithData(_ data: PrimerCheckoutData) {
        // ...
    }
}

// ✅ Correct: Only show payment methods that are available
func renderPaymentMethods() {
    guard let availablePaymentMethods = self.availablePaymentMethods else { return }

    // Check if Apple Pay is available before showing the button
    let isApplePayAvailable = availablePaymentMethods.contains { $0.paymentMethodType == "APPLE_PAY" }
    applePayButton.isHidden = !isApplePayAvailable

    // Render other payment methods similarly
    for paymentMethod in availablePaymentMethods {
        // Build UI only for available payment methods
    }
}

do {
    let paymentMethodAsset = try PrimerHeadlessUniversalCheckout.AssetsManager.getPaymentMethodAsset(for: paymentMethod.paymentMethodType)
} catch {
    // Handle error
}

import UIKit
import PrimerSDK

class ViewController: UIViewController {

    // ...

    @IBAction func paymentMethodButtonTapped(_ sender: UIButton) {
        do {
            // 👇 Create the payment method manager
            let nativeUIPaymentMethodManager = try PrimerHeadlessUniversalCheckout.NativeUIManager(paymentMethodType: paymentMethod.paymentMethodType)

            // 👇 Show the payment method
            try nativeUIPaymentMethodManager.showPaymentMethod(intent: .checkout)

        } catch {
            // Handle error
        }
    }
}

import UIKit
import PrimerSDK

class ViewController: UIViewController {

    // ...

    var rawDataManager: PrimerHeadlessUniversalCheckout.RawDataManager!

    override func viewDidLoad() {
        super.viewDidLoad()

        // ...

        do {
            // 👇 Initialize the raw data manager
            self.rawDataManager = try PrimerHeadlessUniversalCheckout.RawDataManager(paymentMethodType: paymentMethod.paymentMethodType, delegate: self)

        } catch {
            // Handle error
        }
    }
}

func renderForm() {
    let inputElementTypes = primerRawDataManager.requiredInputElementTypes

    for inputElementType in inputElementTypes {
        switch inputElementType {
            case .cardNumber:
                // Create a card number input element and add it to your view
                break

            case .expiryDate:
                // Create a expiry date input element and add it to your view
                break

            case .cvv:
                // Create a CVV input element and add it to your view
                break

            case .cardholderName:
                // Create a cardholder name input element and add it to your view
                break

            case .phoneNumber:
                // Create a phone number input element and add it to your view
                break

            case .retailer:
                // Create a retailer input element and add it to your view
                break
            }
        }
    }
}

import UIKit
import PrimerSDK

class ViewController: UIViewController {

    // ...

    func dataDidChange() {
        // 👇 Create your raw data
        let rawCardData = PrimerCardData(
            cardNumber: cardnumberTextField.text,
            expiryDate: expiryDateTextField.text, // 👈 ex. 03/2030
            cvv: cvvTextField.text,
            cardholderName: cardholderNameTextField.text,
        )

        // 👇 Set your raw data on the manager
        self.rawDataManager.rawData = rawCardData
    }
}

extension ViewController: PrimerHeadlessUniversalCheckoutRawDataManagerDelegate {

    // 👇 Implement the validation function to receive updates on the raw data validation changes
    func primerRawDataManager(_ rawDataManager: PrimerHeadlessUniversalCheckout.RawDataManager, dataIsValid isValid: Bool, errors: [Error]?) {
        // Enable your submit button when `isValid == true`
    }
}

import UIKit
import PrimerSDK

class ViewController: UIViewController {

		// ...

		@IBAction func payButtonTapped(_ sender: UIButton) {
            // 👇 Submit the data that have been set in prior steps
            self.rawDataManager.submit()
        }
}

extension ViewController: PrimerHeadlessUniversalCheckoutDelegate {

    func primerHeadlessUniversalCheckoutDidFail(withError err: Error, checkoutData: PrimerCheckoutData?) {
        // Handle the error
    }
}

repositories {
  mavenCentral()
}

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

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

class CheckoutActivity : AppCompatActivity() {

  private val listener = object : PrimerHeadlessUniversalCheckoutListener {

    // 👇 [Required] This function will return the list of payment methods
    override fun onAvailablePaymentMethodsLoaded(paymentMethods: List<PrimerHeadlessUniversalCheckoutPaymentMethod>) {
      // Use it to enable users to select a payment method
    }

    // 👇 [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
    }

    // 👇 [Required] This function is called if something goes wrong
    override fun onFailed(error: PrimerError, checkoutData: PrimerCheckoutData?) {
      // your custom method to show an error view
    }
  }
}

class CheckoutActivity : AppCompatActivity() {

  // other code goes here
  private val listener = object : PrimerHeadlessUniversalCheckoutListener {
    // ...
  }

  private fun setupObservers() {
    viewModel.clientToken.observe(this) { clientToken ->
      // Start the headless checkout session upon reception of the client token
      startHeadlessUniversalCheckout(clientToken)
    }
  }

  private fun startHeadlessUniversalCheckout(clientToken: String) {
    // 👇 Start Headless Universal Checkout with your session's client token
    PrimerHeadlessUniversalCheckout.current.start(
      this,
      clientToken,
      PrimerSettings(),
      listener,
    )
  }
}

private val listener = object : PrimerHeadlessUniversalCheckoutListener {

  override fun onAvailablePaymentMethodsLoaded(
    paymentMethods: List<PrimerHeadlessUniversalCheckoutPaymentMethod>
  ) {
    paymentMethods.forEach { setupPaymentMethod(it.paymentMethodType) }
  }
}

// your custom method to render list of payment method buttons UI.
private fun setupPaymentMethod(paymentMethodType: String) {
  // implement payment method UI
}

private val listener = object : PrimerHeadlessUniversalCheckoutListener {

  override fun onAvailablePaymentMethodsLoaded(
    paymentMethods: List<PrimerHeadlessUniversalCheckoutPaymentMethod>
  ) {
    paymentMethods.forEach { setupPaymentMethod(it.paymentMethodType) }
  }
}

// your custom method to render the list of payment method buttons
private fun setupPaymentMethod(paymentMethodType: String) {
  val paymentMethodResource = try {
    // 👇 Retrieve the assets of a specific payment method
    PrimerHeadlessUniversalCheckoutAssetsManager.getPaymentMethodResource(
      this,
      paymentMethodType
    )
  } catch (e: SdkUninitializedException) {
    null
  }

  when (paymentMethodResource) {
    is PrimerPaymentMethodAsset -> {
      // 👇 Example of setting background color for your button
      paymentMethodResource.paymentMethodBackgroundColor.colored?.let { color ->
        setBackgroundColor(color)
      }

      // 👇 Example of setting drawable for your button
      paymentMethodResource.paymentMethodLogo.colored?.let { drawable ->
        setImageDrawable(drawable)
      }
    }

    is PrimerPaymentMethodNativeView -> {
      val paymentMethodView = paymentMethodResource.createView(
        requireContext()
      )
    }

    null -> {
      // this should never happen in case SDK is initialized
    }
  }
}

class CheckoutActivity : AppCompatActivity() {
    // other code goes here
    private fun onPaymentMethodSelected(
      paymentMethodType: String,
      sessionIntent: PrimerSessionIntent
    ) {
      try {
        // 👇 Create the payment method manager
        val nativeUiManager =
          PrimerHeadlessUniversalCheckoutNativeUiManager.newInstance(paymentMethodType)

        // 👇 Show the payment method
        nativeUiManager.showPaymentMethod(this, sessionIntent)
      } catch (e: SdkUninitializedException) {
        // handle exception
      } catch (e: UnsupportedPaymentIntentException) {
        // handle exception
      } catch (e: UnsupportedPaymentMethodException) {
        // handle exception
      }
    }
}

class CheckoutActivity : AppCompatActivity() {

    // val submitButton = findViewById<Button>(R.id.pay_with_card)

    private lateinit var rawDataManager: PrimerHeadlessUniversalCheckoutRawDataManagerInterface

    private val rawDataManagerListener: PrimerHeadlessUniversalCheckoutRawDataManagerListener =
        object : PrimerHeadlessUniversalCheckoutRawDataManagerListener {
            override fun onValidationChanged(
                isValid: Boolean,
                errors: List<PrimerInputValidationError>
            ) {
            }
        }

    private fun setupManager(paymentMethodType: String) {
        try {
            // 👇 Initialize the raw data manager
            rawDataManager =
                PrimerHeadlessUniversalCheckoutRawDataManager.newInstance(paymentMethodType)

            // 👇 Set the manager listener
            rawDataManager.setListener(rawDataManagerListener)
        } catch (e: SdkUninitializedException) {
            // handle exception
        } catch (e: UnsupportedPaymentMethodException) {
            // handle exception
        }
    }
}

class CheckoutActivity : AppCompatActivity() {

  private fun createForm(paymentMethodType: String) {
    // 👇 Get the list of input fields to render
    val requiredInputElementTypes = rawDataManager.getRequiredInputElementTypes()
    // simple example of creating inputs based on type
    val inputElements = requiredInputElementTypes.map { type ->
      TextInputLayout(this).apply {
        tag = type
        hint = type.name
        addView(TextInputEditText(context).apply {
          id = View.generateViewId()
          doAfterTextChanged {
            rawDataManager.setRawData(getRawData(paymentMethodType))
          }
          layoutParams = LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT,
          )
        })
      }
    }

    val formContainer = findViewById<ViewGroup>(R.id.formContainer)

    inputElements.forEach { formContainer.addView(it) }
  }

  private fun getInputTypeValue(inputElementType: PrimerInputElementType) =
      findViewById<ViewGroup>(R.id.formContainer).findViewWithTag<TextInputLayout>(
          inputElementType
      ).editText?.text?.trim().toString()
}

data class PrimerCardData(
    val cardNumber: String, // e.g. 4242424242424242
    val expiryDate: String, // e.g. 01/2024, 1/2024, 12/2024...
    val cvv: String, // e.g. 244
    val cardholderName: String? = null,
)

// 👇 Set your raw data on the manager
rawDataManager.setRawData(getRawData(paymentMethodType))

    private val rawDataManagerListener: PrimerHeadlessUniversalCheckoutRawDataManagerListener =
  object : PrimerHeadlessUniversalCheckoutRawDataManagerListener {
    // 👇 Implement the validation function to receive updates on the raw data validation changes
    override fun onValidationChanged(
      isValid: Boolean,
      errors: List<PrimerInputValidationError>
    ) {
      // Enable your submit button when `isValid == true`
      submitButton.isEnabled = isValid
    }
  }

// 👇 Submit the data that have been set in prior steps
submitButton.setOnClickListener { rawDataManager.submit() }

rawDataManager.cleanup()

private val listener = object : PrimerHeadlessUniversalCheckoutUiListener {
  override fun onPreparationStarted(paymentMethodType: String) {
    // e.g. show a loading screen.
  }
}

private val listener = object : PrimerHeadlessUniversalCheckoutListener {
    override fun onTokenizationStarted(paymentMethodType: String) {
        // e.g. hide a loading screen.
    }
}

private val listener = object : PrimerHeadlessUniversalCheckoutUiListener {
    override fun onPaymentMethodShowed(paymentMethodType: String) {
        // e.g. hide a loading screen.
    }
}

private val listener = object : PrimerHeadlessUniversalCheckoutListener {
    override fun onFailed(error: PrimerError, checkoutData: PrimerCheckoutData?) {
        // your custom method to show an error view
        showErrorView(error)
    }
}

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

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

import { useEffect } from 'react'
import { HeadlessUniversalCheckout, PrimerSettings, PrimerCheckoutData } from '@primer-io/react-native'

export const CheckoutScreen = () => {
	const [paymentMethods, setPaymentMethods] = useState(null)

	useEffect(() => {
		const initHeadlessUniversalCheckout = async () => {
			const settings: PrimerSettings = {
				//...
				headlessUniversalCheckoutCallbacks: {
					onCheckoutComplete = (checkoutData: PrimerCheckoutData) => {
						// Here you will receive the checkout data of the payment.
					},
					onAvailablePaymentMethodsLoad = (paymentMethodTypes: string[]) => {
						// paymentMethodTypes contains the payment methods identifiers available
						// for the client session.
					},
				},
			}

			// 👇 Call this function to start Headless Universal Checkout and retrieve the list of available payment methods
			const availablePaymentMethods = await HeadlessUniversalCheckout.startWithClientToken(clientToken, settings)
			setPaymentMethods(availablePaymentMethods)
		}

		initHeadlessUniversalCheckout()
	}, [clientToken])
}

import { AssetsManager, Asset } from '@primer-io/react-native'

const getPaymentMethodResources = async () => {
	const assetsManager = new AssetsManager()
	const resources: Resource[] = await assetsManager.getPaymentMethodResources()
	return resources
}


const resources = getPaymentMethodResources();
const isNativeView = typeof paymentMethodResource.nativeViewName === "string";
if (isNativeView) {
	// paymentMethodResource is of type NativeViewResource
	<NativeResourceView
		onPress={() => { /* Handle press */ }}
		nativeViewName={paymentMethodResource.nativeViewName!}
	/>
} else {
	// paymentMethodResource is of type AssetResource
	// Render your own UI using colors from the asset object
}

import { NativeUIManager } from '@primer-io/react-native'

const payWithPaymentMethod = async (paymentMethodType: string) => {
	const nativeUIManager = new NativeUIManager()
	await nativeUIManager.configure({ paymentMethodType: paymentMethod.paymentMethodType })
	await nativeUIManager.showPaymentMethod(SessionIntent.CHECKOUT)
}

const initialize = async (paymentMethod: PaymentMethod) => {
	// 👇 Initialize the raw data manager
	await rawDataManager.configure({
		paymentMethodType: paymentMethod.paymentMethodType,
		onMetadataChange: data => {
			// For example card number detected to be Visa
		},
		onValidation: (isValid, errors) => {
			// Show on your UI if the card data aren't valid
		},
	})
}

const initialize = async () => {
	// ...
	// Once done, get the required input elements types.

	// 👇 Get the required input element types, which will enable you to build your form
	const requiredInputElementTypes = await rawDataManager.getRequiredInputElementTypes()
}

// 👇 Create your raw data
const rawCardData: CardData = {
	cardNumber: cardNumber,
	expiryDate: expiryDate, // 👈 ex. 03/2030
	cvv: cvv,
	cardholderName: cardholderName,
}

// 👇 Set your raw data on the manager
await rawDataManager.setRawData(rawCardData)

const handleSubmit = async () => {
	// 👇 Submit the data that have been set in prior steps
	await rawDataManager.submit()
}

const onError = (
	error: PrimerError,
	checkoutData: PrimerCheckoutData | null,
	handler: PrimerErrorHandler | undefined,
) => {
	// Handle the error
}