Primer Checkout SDK

--primer-color-background-outlined-error
--primer-color-border-outlined-error
--primer-width-error
--primer-typography-error-size
--primer-typography-error-weight
--primer-typography-error-letter-spacing
--primer-color-text-negative

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

const checkout = document.querySelector('primer-checkout');
checkout.options = {
  sdkCore: true, // Required for Apple Pay, Google Pay and PayPal (enabled by default)
  enabledPaymentMethods: [
    PaymentMethodType.PAYMENT_CARD,
    PaymentMethodType.APPLE_PAY, // Add Apple Pay
    PaymentMethodType.GOOGLE_PAY, // Add Google Pay
    PaymentMethodType.PAYPAL, // Add PayPal
  ],
};

const checkout = document.querySelector('primer-checkout');
checkout.options = {
  sdkCore: true,
  // Apple Pay configuration
  applePay: {
    buttonOptions: {
      type: 'buy',
      buttonStyle: 'black',
    },
    billingOptions: {
      requiredBillingContactFields: ['postalAddress'],
    },
    shippingOptions: {
      requiredShippingContactFields: [
        'postalAddress',
        'name',
        'email',
        'phone',
      ],
    },
  },
  // Google Pay configuration
  googlePay: {
    buttonType: 'checkout',
    buttonColor: 'black',
    buttonSizeMode: 'fill',
    captureBillingAddress: true,
    captureShippingAddress: true,
    shippingAddressParameters: {
      allowedCountryCodes: ['US', 'CA', 'GB'],
      phoneNumberRequired: true,
    },
    emailRequired: true,
    requireShippingMethod: true,
  },
};

const checkout = document.querySelector('primer-checkout');
checkout.options = {
  sdkCore: true,
  paypal: {
    style: {
      // Base styles
      borderRadius: 22,
      color: 'silver',
      // Override styles for specific funding source
      paylater: {
        color: 'white',
      },
    },
    buyerCountry: 'US',
  },
};

// Before (deprecated - will be removed)
const cvvInput = await primerJS.createCvvInput(options);
await primerJS.startVaultPayment(methodId, { cvv });

// After (recommended)
const cvvInput = await primerJS.vault.createCvvInput(options);
await primerJS.vault.startPayment(methodId, { cvv });
await primerJS.vault.delete(methodId); // NEW

// ✅ Now works correctly: Inline objects no longer cause re-initialization
return (
  <primer-checkout
    client-token={clientToken}
    options={{
      sdkCore: true,
    }}
    ref={checkoutRef}
  >
    <div slot='main'>{children}</div>
  </primer-checkout>
);

const checkout = document.querySelector('primer-checkout');
checkout.setAttribute('client-token', 'your-client-token');

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

checkout.addEventListener('primer:ready', (event) => {
  const primerJS = event.detail;
  // Pre-fill cardholder name from user profile
  primerJS.setCardholderName('John Doe');
});

primerJS.onPaymentComplete = (data) => {
  if (data.status === 'success') {
    console.log('Payment ID:', data.payment?.id);
  } else if (data.status === 'error') {
    console.log('Error:', data.error?.message);
  }
};

// State access
if (state.error) {
  // Handle SDK error
}
if (state.failure) {
  // Handle payment error
  console.log('Details:', state.failure.details);
}

primerJS.onPaymentSuccess = ({ payment, paymentMethodType }) => {
  console.log('Payment ID:', payment.id);
  console.log('Last 4 digits:', payment.paymentMethodData?.last4Digits);
  console.log('Network:', payment.paymentMethodData?.network);
};

primerJS.onPaymentFailure = ({ error, payment, paymentMethodType }) => {
  console.log('Error:', error.message);
  console.log('Diagnostics ID:', error.diagnosticsId);
  console.log('Additional data:', error.data);
};

primerJS.onVaultedMethodsUpdate = () => {
  console.log('Vaulted methods updated');
  // Refresh vault display if needed
};

// State access
if (state.primerJsError) {
  // Handle SDK error
}
if (state.paymentFailure) {
  // Handle payment error
  console.log('Diagnostics ID:', state.paymentFailure.diagnosticsId);
}

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

const checkout = document.querySelector('primer-checkout');
checkout.options = {
  sdkCore: true, // Required for PayPal (enabled by default)
  enabledPaymentMethods: [
    PaymentMethodType.PAYMENT_CARD,
    PaymentMethodType.PAYPAL, // Add PayPal
  ],
  paypal: {
    style: {
      color: 'gold',
      shape: 'rect',
    },
  },
};

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

const checkout = document.querySelector('primer-checkout');
checkout.setAttribute('client-token', 'your-client-token');

checkout.options = {
  enabledPaymentMethods: [
    PaymentMethodType.PAYMENT_CARD,
    PaymentMethodType.ADYEN_BLIK, // Add BLIK
  ],
};

// v0.3.x - Legacy SDK by default
const checkout = document.querySelector('primer-checkout');
checkout.setAttribute('client-token', 'your-client-token');
// sdkCore not specified - used Legacy SDK by default

// v0.4.0 - SDK Core by default
const checkout = document.querySelector('primer-checkout');
checkout.setAttribute('client-token', 'your-client-token');
checkout.options = {
  sdkCore: false, // Explicit opt-out for Legacy SDK
};

<primer-payment-method-container
  include="APPLE_PAY,GOOGLE_PAY"
></primer-payment-method-container>

<primer-vault-manager>
  <div slot="vault-empty-state">
    <p>No saved payment methods</p>
  </div>
</primer-vault-manager>