Provider component

​

<primer-provider>

​

Quick reference

​

Examples

​

Basic usage

<primer-checkout id="my-checkout" client-token="your-token"></primer-checkout>

<!-- Elsewhere on the page -->
<primer-provider checkout-id="my-checkout">
  <primer-card-form></primer-card-form>
</primer-provider>

​

Inside a React portal

import { createPortal } from 'react-dom';

<primer-checkout id="my-checkout" client-token={clientToken}></primer-checkout>

{createPortal(
  <primer-provider checkout-id="my-checkout">
    <primer-card-form></primer-card-form>
  </primer-provider>,
  document.body,
)}

​

Showing a success message

const checkout = document.getElementById('my-checkout');

checkout.addEventListener('primer:payment-success', () => {
  document.getElementById('order-confirmation').hidden = false;
});

​

Attributes

​

States

​

Usage guidelines

​

Do

• Give <primer-checkout> an id and pass the same value to checkout-id
• Render <primer-checkout> before the provider. If the checkout is not in the page when the provider connects, the provider logs an error and does not retry
• Place success and error messages outside the provider, and show them using primer:payment-success or primer:state-change

​

Don’t

• Don’t place <primer-checkout> inside another element’s shadow DOM — the provider looks it up with document.getElementById, which does not search shadow roots
• Don’t use a provider inside <primer-checkout> — components there already have access to the session

​

Troubleshooting

​

See also