Payment components

Payment components let you build the checkout into your own page while keeping card data out of your reach: the shift4.js library renders the sensitive inputs (card number, expiry, CVC) and the wallet buttons (Apple Pay, Google Pay) as Shift4-hosted components mounted inside your layout. You control the page, the styling around the fields, and when the payment is submitted; Shift4 handles the card data, payment method logic, and PCI scope.

Everything is driven by a Checkout Session created on your backend — its clientSecret is what authorizes the components in the browser.

Load the library from Shift4:

<script src="https://js.shift4.com/v1/shift4.js"></script>

Initialise the library with your Platform Public Key:

var shift4 = Shift4('pk_sandbox_XXXXXXXXXXXXXXXXXXXX');

If your page uses a Content Security Policy, allow the following so the library, its components, and its telemetry can load:

script-src   https://js.shift4.com
frame-src    https://js.shift4.com
img-src      https://t.dev.shift4.com data:
connect-src  https://t.dev.shift4.com

Each wallet adds one or two entries on top of this baseline — see Apple Pay and Google Pay.

On your backend, create a Checkout Session and pass result[0].checkoutSession.clientSecret to the browser. Then create the checkout object:

var checkout = await shift4.createCheckout('{{clientSecret}}');

The clientSecret is single-use — create a new Checkout Session for each payment attempt.

Create components from the checkout object and mount them into your own elements:

checkout.createComponent('number').mount('#number');

Wallet buttons and card fields represent separate payment flows with independent Checkout Sessions — each needs its own createCheckout() call. See Offer wallets alongside cards.