Web

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667

// This example is built using expressconst path = require('path')const express = require('express')const fetch = require('node-fetch') const API_KEY = process.env.PRIMER_API_KEY // YOUR API KEYconst PRIMER_API_URL = 'https://api.sandbox.primer.io' const app = express() const staticDir = path.join(__dirname, 'static')const checkoutPage = path.join(__dirname, 'checkout.html') app.use(express.json())app.use('/static', express.static(staticDir)) app.get('/', (req, res) => {	return res.sendFile(checkoutPage)}) app.post('/client-session', async (req, res) => {	const url = `${PRIMER_API_URL}/client-session` 	const response = await fetch(url, {		method: 'post',		headers: {			'Content-Type': 'application/json',			'X-Api-Version': '2.1',			'X-Api-Key': API_KEY,		},		body: JSON.stringify({			// Create an orderId for this client session			// Make sure to keep track of it: you will later receive updates through Webhooks.			orderId: 'order-' + Math.random(), 			// 3-character Currency Code used for all the amount of this session			currencyCode: 'EUR', 			order: {				// Line items for this session				// If your checkout does not have line items:				//  > Pass a single line item with the total amount!				lineItems: [					{						itemId: 'shoes-123',						description: 'Some nice shoes!',						amount: 2500, // Amount should be in minor units!						quantity: 1,					},				],			},		}),	}).then(data => data.json()) 	return res.send(response)}) app.post('/webhooks/payment-status', async (req, res) => {	const { eventType, payment } = req.body	const { id, orderId, status } = payment 	if (status === 'AUTHORIZED' || status === 'SETTLED') {		// Fullfil the order for the Payment / Client Session labelled with `orderId`	}}) app.listen(process.env.PORT)

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

// /static/client.js window.addEventListener('load', onLoaded) async function onLoaded() {	const clientSession = await fetch('/client-session', {		method: 'post',		headers: { 'Content-Type': 'application/json' },	}).then(data => data.json()) 	const { clientToken } = clientSession 	try {		const universalCheckout = await Primer.showUniversalCheckout(clientToken, {			// Specify the selector of the container element			container: '#checkout-container', 			/**			 * When the checkout flow has been completed, you'll receive			 * the successful payment via `onCheckoutComplete`.			 * Implement this callback to redirect the user to an order confirmation page and fulfill the order.			 */			onCheckoutComplete({ payment }) {				console.log('Checkout Complete!', payment)			}, 			// Other optional options			style: {				submitButton: {					base: {						color: '#ffffff',						background: '#000000',						borderRadius: '8px',						boxShadow: 'none',					},					disabled: {						color: '#9b9b9b',						background: '#e1deda',					},				},			},		}) 		console.log('Universal Checkout is loaded!')	} catch (e) {		console.log('Universal Checkout failed to load!')	}}