communipay-checkout-client v1.4.1

communipay-checkout-client

Client module for embedding cpay-checkout paytour into product website

create ES6 module

yarn pack cpay-checkout-client-v1.X.X

create ES5 functions

npm run build-es5

Install using npm

$ npm i communipay-checkout-client

or with Yarn:

$ yarn add communipay-checkout-client

Install from local file

1. Retrieve "cpay-checkout-client-v1.X.X.tgz" from Communipay team
2. Install with npm:

$ npm install cpay-checkout-client-v1.X.X.tgz

Iframe-Usage

import {create, dispose} from 'cpay-checkout-client'

import {useEffect} from 'react' //needs those imports
import React from 'react';
/* 
 * param {string} checkoutUrl as per received from Communipay enrollment
 */
export function showCheckout(checkoutUrl) {

	useEffect(() => {
		const checkout = create(
			document.getElementById('checkoutContainer'),   // or document.body for full screen
			'abcdef-12345-ghijk-67890',                     // unique merchant identifier, provided by Communipay
			checkoutUrl,                                    // url received from s2s enrollment
			function(message) {                             // callback function for message events
				console.log(message);
			},
			{                                               // config
				theme: {
					showPriceAsDescription: false, // default: false
					paletteType: 'white',          // default 'white' or 'black'
					formFieldVariant: 'filled',    // or 'outlined'
					contractVariant: 'carousel',   // '' or 'simple' or 'carousel' (only mobile)
					maxHeight: height,             // default '100%' 
					maxWidth: width,               // default '100%'	
					logoUrl: ''                    // optional additional theming components look further below; '' or 'YOUR_LOGO_URL'
					showHeader: true,              // default: true
					showClose: true,               // default: false Show Close Icon (X)
				}
			}
		);
        						
		return () => {
			dispose(checkout);
		}
	});
	
	return (
		<div id="checkoutContainer" />
	)
}

Starting with Version 1.3.0 the client will automatically redirect the user in a new window if the call happens in an iframe, this behaviour is needed for compatibility reasons.

Redirect-Usage

import {redirect, dispose} from 'cpay-checkout-client'

import {useEffect} from 'react' //needs those imports
import React from 'react';
/* 
 * param {string} checkoutUrl as per received from Communipay enrollment
 */
export function showCheckoutRedirect(checkoutUrl) {

	useEffect(() => {
		const checkout = redirect(
			'abcdef-12345-ghijk-67890',                     // unique merchant identifier, provided by Communipay
			checkoutUrl,                                    // url received from s2s enrollment
            {                                               // config
                theme: {
                    showPriceAsDescription: false, // default: false
                    paletteType: 'white',          // default 'white' or 'black'
                    formFieldVariant: 'filled',    // or 'outlined'
                    contractVariant: 'carousel',   // '' or 'simple' or 'carousel' (only mobile)
                    maxHeight: height,             // default '100%'
                    maxWidth: width,               // default '100%'
                    logoUrl: ''                    // optional additional theming components look further below; '' or 'YOUR_LOGO_URL'
                    showHeader: true,              // default: true
                    showClose: true,               // default: false Show Close Icon (X)
                }
            },
            isExternalRedirect                     // open 3rd party payment process in new window
		);
        						
		return () => {
			dispose(checkout);
		}
	});
	 
}

Version 1.3.0 introduces a new feature, it is now possible to open the paytour in a new window. Therefore just add a fourth parameter to the redirect function passing a boolean (true) if you want to open it in a new window. This will also happen automatically if you try to redirect while you are in an iframe.

checkoutUrl

The "checkoutUrl" is the url you received with the previous enrollment from communipay server ("newContractLink").