SDK options reference

const checkout = document.querySelector('primer-checkout');

checkout.setAttribute('client-token', 'your-token'); // Component property
checkout.options = {                                  // SDK options
  locale: 'en-GB',
  card: {
    cardholderName: { required: true }
  }
};

checkout.options = {
  locale: 'en-GB'
};

checkout.options = {
  merchantDomain: 'merchant.example.com'
};

import { PaymentMethodType } from '@primer-io/primer-js';

checkout.options = {
  enabledPaymentMethods: [
    PaymentMethodType.PAYMENT_CARD,
    PaymentMethodType.PAYPAL,
    PaymentMethodType.ADYEN_BLIK,
  ]
};

checkout.options = {
  disabledPayments: true
};

checkout.options = {
  card: {
    cardholderName: {
      required: true,
      visible: true,
      defaultValue: 'John Doe'  // Pre-fill the field
    }
  }
};

checkout.options = {
  applePay: {
    buttonOptions: {
      type: 'buy',
      buttonStyle: 'black'
    },
    billingOptions: {
      requiredBillingContactFields: ['postalAddress']
    },
    shippingOptions: {
      requiredShippingContactFields: ['postalAddress', 'name', 'email'],
      requireShippingMethod: true
    }
  }
};

checkout.options = {
  googlePay: {
    buttonType: 'buy',
    buttonColor: 'black',
    buttonSizeMode: 'fill',
    captureBillingAddress: true,
    captureShippingAddress: true,
    requireShippingMethod: true,
    emailRequired: true
  }
};

checkout.options = {
  klarna: {
    paymentFlow: 'DEFAULT',
    allowedPaymentCategories: ['pay_now', 'pay_later'],
    buttonOptions: {
      text: 'Pay with Klarna'
    }
  }
};

checkout.options = {
  vault: {
    enabled: true
  }
};

checkout.options = {
  vault: {
    enabled: true,
    headless: true
  }
};

// Use external button
checkout.options = {
  submitButton: {
    useBuiltInButton: false
  }
};

// Your button triggers submission
document.getElementById('my-button').addEventListener('click', () => {
  document.dispatchEvent(new CustomEvent('primer:card-submit', {
    bubbles: true,
    composed: true
  }));
});

checkout.options = {
  stripe: {
    publishableKey: 'pk_test_...',
    mandateData: {
      fullMandateText: 'By providing your payment information...',
      merchantName: 'Your Business'
    }
  }
};

checkout.options = {
  sdkCore: false  // Use legacy SDK (not recommended)
};

import type { PrimerCheckoutOptions } from '@primer-io/primer-js';
import { PaymentMethodType } from '@primer-io/primer-js';

const options: PrimerCheckoutOptions = {
  locale: 'en-GB',
  enabledPaymentMethods: [PaymentMethodType.PAYMENT_CARD]
};

checkout.options = options;