Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@paypal/checkout-components

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@paypal/checkout-components - npm Package Compare versions

Comparing version 4.1.45 to 4.1.46

__sdk__.js

		@@ -7,33 +7,8 @@ /* @flow */
		module.exports = {

		'buttons': {
		buttons: {
		entry: './src/interface/button',
		setupHandler: 'setupButtons',
		staticNamespace: '__paypal_checkout__',
		configQuery: `
		clientConfiguration {
		paypalMerchantConfiguration(merchantId: $clientID, locale: $country) {
		creditCard {
		isPayPalBranded
		supportedCardBrands
		}
		}
		}`,
		globals
		},

		'checkout': {
		entry: './src/interface/checkout',
		staticNamespace: '__paypal_checkout__',
		configQuery: `
		clientConfiguration {
		paypalMerchantConfiguration(merchantId: $clientID, locale: $country) {
		creditCard {
		isPayPalBranded
		supportedCardBrands
		}
		}
		}`,
		globals
		}
		};

globals.js

		@@ -8,3 +8,8 @@ /* eslint import/no-commonjs: off, flowtype/require-valid-file-annotation: off, flowtype/require-return-type: off */

		...zoidGlobals,
		__ZOID__: {
		...zoidGlobals.__ZOID__,
		__DEFAULT_CONTAINER__: false,
		__DEFAULT_PRERENDER__: false,
		__FRAMEWORK_SUPPORT__: true
		},

		@@ -11,0 +16,0 @@ __POST_ROBOT__: {

package.json

		{
		"name": "@paypal/checkout-components",
		"version": "4.1.45",
		"version": "4.1.46",
		"description": "PayPal Checkout components, for integrating checkout products.",
		"main": "index.js",
		"scripts": {
		"dev": "babel-node ./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js --port 9000 --host localhost.paypal.com --open-page demo/dev/index.htm --https --hot=false --inline=false",
		"lint": "eslint --ext .js --ext .jsx src/ test/ *.js",
		@@ -24,3 +25,4 @@ "flow-typed": "rm -rf flow-typed && flow-typed install",
		"jest-screenshot": "jest test/screenshot/screenshot.test.js --env=node --no-cache",
		"jest-ssr": "jest test/ssr/ssr.test.js --env=node --no-cache"
		"jest-ssr": "jest test/ssr/ssr.test.js --env=node --no-cache",
		"check-size": "babel-node --plugins=transform-es2015-modules-commonjs ./node_modules/.bin/webpack --progress --config webpack.config.size && cat dist/size.js \| gzip -9 \| wc && rm dist/size.js"
		},
		@@ -76,6 +78,6 @@ "files": [
		"jsx-pragmatic": "^1.0.4",
		"post-robot": "^9.0.0",
		"post-robot": "^10.0.0",
		"zalgo-promise": "^1.0.10",
		"zoid": "^8.0.0"
		"zoid": "^9.0.0"
		}
		}

README.md

		@@ -9,59 +9,6 @@ PayPal Checkout

		-----
		#### [HowTo Videos](docs/videos.md)
		#### [Try it in our Demo App](https://developer.paypal.com/demo/checkout)
		#### [Learn more in our Dev Docs](https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/add-paypal-button/)
		#### [Upgrade your classic PayPal integration](docs/upgrade.md)
		#### [Deep Dive in our YouTube Training](https://www.youtube.com/playlist?list=PLAlKnErU5lvhRl28KciytVHc5b8HS_tYP)
		#### [Demo App Source](https://github.com/paypal/paypal-checkout-demo)
		-----
		#### [Dev Docs](https://developer.paypal.com/docs/checkout/)

		### Which Integration is right for me?

		- Do you want the simplest possible PayPal Integration? If so, you should stick with the [Basic PayPal Checkout Button](https://github.com/paypal/paypal-checkout/tree/master/docs/button.md#basic-integration)
		which allows you to just drop a button straight into your page. This will allow your customer to pay with PayPal, and we'll notify you when they're done.

		- Do you want a button which gives you finely grained control over your transaction; creating and finalizing transactions from your server
		side using PayPal's REST api? If so you should use the [Advanced Javascript Integration](https://github.com/paypal/paypal-checkout/tree/master/docs/button.md#advanced-integration), which will allow you to create
		and finalize the transaction yourself on your server side using the [PayPal Payments REST API](https://developer.paypal.com/docs/api/payments/).

		- Do you use React.js, Angular.js or Ember.js to render your page? If so, you should use the [React.js, Angular.js or Ember.js Elements](https://github.com/paypal/paypal-checkout/tree/master/docs/frameworks.md),
		which provide native support for each of these frameworks, so you can drop PayPal Buttons in any of your front-end views.

		- Do you have a mark integration? In this case, you should look at the [Mark Integration](https://github.com/paypal/paypal-checkout/tree/master/docs/mark.md) docs to decide how best
		to integrate PayPal Checkout

		## [Create a PayPal REST Application](https://youtu.be/mhUg73r3-Vk)

		## Usage

		1. Add `checkout.v4.js` to your page:

		```html
		<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
		```

		2. Drop the following component onto your page:

		## [PayPal Checkout Button](https://github.com/paypal/paypal-checkout/tree/master/docs/button.md)

		[![PayPal Button](https://github.com/paypal/paypal-checkout/blob/master/docs/img/button.png)](https://github.com/paypal/paypal-checkout/tree/master/docs/button.md)

		This component renders a PayPal button onto your page, which will take care of opening up PayPal for you and guiding
		your customer through the payment process. After the payment is complete, we will notify you using a javascript callback,
		and you can take your customer to a success page.

		[Integrate the button component](https://github.com/paypal/paypal-checkout/tree/master/docs/button.md)

		-----

		## Integrating with the PayPal REST API

		If you want to use the advanced javascript integrations, you will need a way to create payment tokens on your
		server side. The simplest way to do this is using the [PayPal Payments REST API](https://developer.paypal.com/docs/api/payments/)

		### [Integrating with the PayPal REST API](https://github.com/paypal/paypal-checkout/tree/master/docs/paypal-rest-api.md)

		-----

		## Development
		@@ -76,5 +23,3 @@
		```bash
		npm install -g flow-typed
		npm install
		flow-typed install
		```
		@@ -88,6 +33,6 @@

		Build checkout.js:
		Run in dev mode:

		```bash
		npm run build
		npm run dev
		```
		@@ -94,0 +39,0 @@

src/buttons/child.js


		/* @flow */

		import { type ZoidComponent } from 'zoid/src';
		import { getLogger, createOrder } from '@paypal/sdk-client/src';
		@@ -10,5 +11,5 @@ import { getPageRenderTime, isIEIntranet } from 'belter/src';

		import typeof { Buttons } from './component';
		import { type ButtonProps } from './props';

		export function setupButtonChild(ButtonComponent : Buttons) : void {
		export function setupButtonChild(Buttons : ZoidComponent<ButtonProps>) : void {

		@@ -19,3 +20,3 @@ if (isIEIntranet()) {

		const xprops = ButtonComponent.xprops;
		const xprops = Buttons.xprops;

		@@ -22,0 +23,0 @@ if (!xprops) {

801

src/buttons/component.jsx

		@@ -6,7 +6,7 @@ /* @flow */
		import { getLogger, getLocale, getClientID, getEnv, getIntent, getCommit,
		getVault, getPayPalDomainRegex, getCurrency, getSDKMeta, isEligible, getBrowser,
		getVault, getPayPalDomainRegex, getCurrency, getSDKMeta,
		createOrder } from '@paypal/sdk-client/src';
		import { ZalgoPromise } from 'zalgo-promise/src';
		import { create, type ZoidComponent } from 'zoid/src';
		import { isIEIntranet, isDevice, uniqueID, redirect, supportsPopups, popup, writeElementToWindow, noop } from 'belter/src';
		import { isIEIntranet, isDevice, uniqueID, redirect, supportsPopups, popup, writeElementToWindow, noop, inlineMemoize } from 'belter/src';
		import { FUNDING, PLATFORM, INTENT, FPTI_KEY } from '@paypal/sdk-constants/src';
		@@ -27,492 +27,487 @@ import { node, dom } from 'jsx-pragmatic/src';

		export const Buttons : ZoidComponent<ButtonProps> = create({

		tag: 'paypal-button',
		export function getButtonsComponent() : ZoidComponent<ButtonProps> {
		return inlineMemoize(getButtonsComponent, () => {
		const component = create({
		tag: 'paypal-buttons',

		url: getButtonUrl(),
		domain: getPayPalDomainRegex(),

		autoResize: {
		width: false,
		height: true
		},
		url: getButtonUrl(),
		domain: getPayPalDomainRegex(),

		autoResize: {
		width: false,
		height: true
		},

		containerTemplate,
		containerTemplate,

		logger: getLogger(),
		logger: getLogger(),

		prerenderTemplate({ state, props, doc }) : HTMLElement {
		prerenderTemplate({ state, props, doc }) : HTMLElement {

		const prerenderCheckout = ({ fundingSource } : {\| fundingSource : $Values<typeof FUNDING> \|}) => {
		// $FlowFixMe
		const order = props.createOrder();
		let win;

		if (supportsPopups()) {
		win = popup('', { width: 450, height: 535 });

		// $FlowFixMe
		writeElementToWindow(win, componentTemplate({
		const prerenderCheckout = ({ fundingSource } : {\| fundingSource : $Values<typeof FUNDING> \|}) => {
		// $FlowFixMe
		document: win.document,
		props: { nonce: props.nonce }
		}));
		}
		const order = props.createOrder();
		let win;

		state.prerenderDetails = { win, order, fundingSource };
		};
		if (supportsPopups()) {
		win = popup('', { width: 450, height: 535 });

		return (
		<html>
		<body>
		<div>
		<ButtonsTemplate { ...props } onClick={ prerenderCheckout } />
		</div>
		</body>
		</html>
		).render(dom({ doc }));
		},
		// $FlowFixMe
		writeElementToWindow(win, componentTemplate({
		// $FlowFixMe
		document: win.document,
		props: { nonce: props.nonce }
		}));
		}

		attributes: {
		iframe: {
		allowpaymentrequest: 'allowpaymentrequest',
		scrolling: 'no'
		}
		},
		state.prerenderDetails = { win, order, fundingSource };
		};

		validate() {
		if (isIEIntranet()) {
		throw new Error(`Can not render button in IE intranet mode`);
		}
		return (
		<html>
		<body>
		<div>
		<ButtonsTemplate { ...props } onClick={ prerenderCheckout } />
		</div>
		</body>
		</html>
		).render(dom({ doc }));
		},

		if (!isEligible()) {
		getLogger().warn('button_render_ineligible');
		}
		},

		props: {
		style: {
		type: 'object',
		queryParam: true,
		required: false,

		decorate({ value }) : ButtonStyle {
		// $FlowFixMe
		const { label, layout, color, shape, tagline, height, period } = normalizeButtonStyle(value);

		const logger = getLogger();
		logger.info(`button_render_color_${ color }`);
		logger.info(`button_render_shape_${ shape }`);
		logger.info(`button_render_label_${ label }`);
		logger.info(`button_render_layout_${ label }`);
		logger.info(`button_render_tagline_${ tagline.toString() }`);

		return { label, layout, color, shape, tagline, height, period };
		attributes: {
		iframe: {
		allowpaymentrequest: 'allowpaymentrequest',
		scrolling: 'no'
		}
		},

		validate({ value = {} }) {
		normalizeButtonStyle(value);
		validate() {
		if (isIEIntranet()) {
		throw new Error(`Can not render button in IE intranet mode`);
		}
		},

		default: () => {
		return {};
		}
		},
		props: {
		style: {
		type: 'object',
		queryParam: true,
		required: false,

		locale: {
		type: 'object',
		queryParam: true,
		value: () => getLocale()
		},
		decorate({ value }) : ButtonStyle {
		// $FlowFixMe
		const { label, layout, color, shape, tagline, height, period } = normalizeButtonStyle(value);

		sdkMeta: {
		type: 'string',
		queryParam: true,
		sendToChild: false,
		value: () => getSDKMeta()
		},
		const logger = getLogger();
		logger.info(`button_render_color_${ color }`);
		logger.info(`button_render_shape_${ shape }`);
		logger.info(`button_render_label_${ label }`);
		logger.info(`button_render_layout_${ label }`);
		logger.info(`button_render_tagline_${ tagline.toString() }`);

		createOrder: {
		type: 'function',
		required: false,
		decorate({ value, props, state }) : Function {
		return function decoratedCreateOrder() : ZalgoPromise<string> {
		return ZalgoPromise.try(() => {
		return { label, layout, color, shape, tagline, height, period };
		},

		const data : CreateOrderData = {};
		validate({ value = {} }) {
		normalizeButtonStyle(value);
		},

		const actions = {
		order: {
		create: (options) =>
		(state.remoteCreateOrder \|\| createOrder)(props.clientID, options, { fptiState: FPTI_STATE.BUTTON })
		}
		};
		default: () => {
		return {};
		}
		},

		// $FlowFixMe
		return value(data, actions);
		locale: {
		type: 'object',
		queryParam: true,
		value: () => getLocale()
		},

		}).then(orderID => {
		sdkMeta: {
		type: 'string',
		queryParam: true,
		sendToChild: false,
		value: () => getSDKMeta()
		},

		const logger = getLogger();
		createOrder: {
		type: 'function',
		required: false,
		decorate({ value, props, state }) : Function {
		return function decoratedCreateOrder() : ZalgoPromise<string> {
		return ZalgoPromise.try(() => {

		if (!orderID \|\| typeof orderID !== 'string') {
		logger.error(`no_orderid_passed_to_createorder`);
		throw new Error(`Expected a promise for a string order id to be passed to createOrder`);
		}
		const data : CreateOrderData = {};

		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.CHECKOUT,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.RECIEVE_ORDER,
		[ FPTI_KEY.CONTEXT_TYPE ]: FPTI_CONTEXT_TYPE.ORDER_ID,
		[ FPTI_KEY.CONTEXT_ID ]: orderID,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});
		const actions = {
		order: {
		create: (options) =>
		(state.remoteCreateOrder \|\| createOrder)(props.clientID, options, { fptiState: FPTI_STATE.BUTTON })
		}
		};

		logger.flush();
		// $FlowFixMe
		return value(data, actions);

		return orderID;
		});
		};
		},
		default({ props }) : ?CreateOrder {
		if (props.createBillingAgreement) {
		return;
		}
		}).then(orderID => {

		return (data : CreateOrderData, actions : CreateOrderActions) => {
		return actions.order.create({
		purchase_units: [
		{
		amount: {
		currency_code: 'USD',
		value: '0.01'
		const logger = getLogger();

		if (!orderID \|\| typeof orderID !== 'string') {
		logger.error(`no_orderid_passed_to_createorder`);
		throw new Error(`Expected a promise for a string order id to be passed to createOrder`);
		}
		}
		]
		});
		};
		}
		},

		createBillingAgreement: {
		type: 'function',
		required: false,
		validate: ({ props }) => {
		if (props.createOrder) {
		throw new Error(`Do not pass both createOrder and createBillingAgreement`);
		}
		},
		decorate({ value }) : Function {
		return function decoratedCreateBillingAgreement() : ZalgoPromise<string> {
		return ZalgoPromise.try(() => {
		if (!getVault()) {
		throw new Error(`Must pass vault=true to sdk to use billing agreement flow`);
		}
		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.CHECKOUT,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.RECIEVE_ORDER,
		[ FPTI_KEY.CONTEXT_TYPE ]: FPTI_CONTEXT_TYPE.ORDER_ID,
		[ FPTI_KEY.CONTEXT_ID ]: orderID,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});

		// $FlowFixMe
		return value();
		logger.flush();

		}).then(billingToken => {
		return orderID;
		});
		};
		},
		default({ props }) : ?CreateOrder {
		if (props.createBillingAgreement) {
		return;
		}

		const logger = getLogger();
		return (data : CreateOrderData, actions : CreateOrderActions) => {
		return actions.order.create({
		purchase_units: [
		{
		amount: {
		currency_code: 'USD',
		value: '0.01'
		}
		}
		]
		});
		};
		}
		},

		if (!billingToken \|\| typeof billingToken !== 'string') {
		logger.error(`no_billing_token_passed_to_createbillingagreement`);
		throw new Error(`Expected a promise for a string billing token to be passed to createBillingAgreement`);
		createBillingAgreement: {
		type: 'function',
		required: false,
		validate: ({ props }) => {
		if (props.createOrder) {
		throw new Error(`Do not pass both createOrder and createBillingAgreement`);
		}
		},
		decorate({ value }) : Function {
		return function decoratedCreateBillingAgreement() : ZalgoPromise<string> {
		return ZalgoPromise.try(() => {
		if (!getVault()) {
		throw new Error(`Must pass vault=true to sdk to use billing agreement flow`);
		}

		logger.flush();
		// $FlowFixMe
		return value();

		return billingToken;
		});
		};
		}
		},
		}).then(billingToken => {

		onApprove: {
		type: 'function',
		required: false,
		const logger = getLogger();

		decorate({ value, props, close }) : OnApprove {
		return function decorateOnApprove(data : OnApproveData, actions : OnApproveActions) : ZalgoPromise<void> {
		const logger = getLogger();
		logger.info('button_authorize');
		if (!billingToken \|\| typeof billingToken !== 'string') {
		logger.error(`no_billing_token_passed_to_createbillingagreement`);
		throw new Error(`Expected a promise for a string billing token to be passed to createBillingAgreement`);
		}

		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.CHECKOUT,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.CHECKOUT_AUTHORIZE,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});
		logger.flush();

		if (!isEligible()) {
		logger.info('button_authorize_ineligible');
		return billingToken;
		});
		};
		}
		},

		logger.flush();
		onApprove: {
		type: 'function',
		required: false,

		actions = {
		...actions,
		redirect: (url, win) => {
		return ZalgoPromise.try(() => {
		return close();
		}).then(() => {
		return redirect(url, win \|\| window.top);
		decorate({ value, props, close }) : OnApprove {
		return function decorateOnApprove(data : OnApproveData, actions : OnApproveActions) : ZalgoPromise<void> {
		const logger = getLogger();
		logger.info('button_authorize');

		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.CHECKOUT,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.CHECKOUT_AUTHORIZE,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});
		}
		};

		return ZalgoPromise.try(() => {
		return value.call(this, data, actions);
		}).catch(err => {
		if (props.onError) {
		return props.onError(err);
		}
		throw err;
		});
		};
		},
		logger.flush();

		default({ props } : { props : ButtonProps }) : OnApprove {
		return function onApproveDefault(data : OnApproveData, actions : OnApproveActions) : ZalgoPromise<void> {
		if (props.intent === INTENT.CAPTURE && props.commit) {
		return actions.order.capture().then(noop);
		} else {
		throw new Error(`Please specify onApprove callback to handle buyer approval success`);
		}
		};
		}
		},
		actions = {
		...actions,
		redirect: (url, win) => {
		return ZalgoPromise.try(() => {
		return close();
		}).then(() => {
		return redirect(url, win \|\| window.top);
		});
		}
		};

		onShippingChange: {
		type: 'function',
		required: false,
		return ZalgoPromise.try(() => {
		return value.call(this, data, actions);
		}).catch(err => {
		if (props.onError) {
		return props.onError(err);
		}
		throw err;
		});
		};
		},

		decorate({ value, props, onError }) : OnShippingChange {
		return function decorateOnShippingChange(data, actions = {}) : void \| ZalgoPromise<void> {
		const logger = getLogger();
		logger.info('button_shipping_change');
		default({ props } : { props : ButtonProps }) : OnApprove {
		return function onApproveDefault(data : OnApproveData, actions : OnApproveActions) : ZalgoPromise<void> {
		if (props.intent === INTENT.CAPTURE && props.commit) {
		return actions.order.capture().then(noop);
		} else {
		throw new Error(`Please specify onApprove callback to handle buyer approval success`);
		}
		};
		}
		},

		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.CHECKOUT,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.CHECKOUT_SHIPPING_CHANGE,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});
		onShippingChange: {
		type: 'function',
		required: false,

		logger.flush();
		decorate({ value, props, onError }) : OnShippingChange {
		return function decorateOnShippingChange(data, actions = {}) : void \| ZalgoPromise<void> {
		const logger = getLogger();
		logger.info('button_shipping_change');

		const resolve = () => ZalgoPromise.resolve();
		const reject = actions.reject \|\| function reject() {
		throw new Error(`Missing reject action callback`);
		};
		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.CHECKOUT,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.CHECKOUT_SHIPPING_CHANGE,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});

		return ZalgoPromise.try(() => {
		return value.call(this, data, { ...actions, resolve, reject });
		}).catch(err => {
		if (onError) {
		onError(err);
		}
		throw err;
		});
		};
		}
		},
		logger.flush();

		onCancel: {
		type: 'function',
		required: false,
		const resolve = () => ZalgoPromise.resolve();
		const reject = actions.reject \|\| function reject() {
		throw new Error(`Missing reject action callback`);
		};

		decorate({ value, props, close }) : OnCancel {
		return function decorateOnCancel(data, actions = {}) : void \| ZalgoPromise<void> {
		const logger = getLogger();
		logger.info('button_cancel');
		return ZalgoPromise.try(() => {
		return value.call(this, data, { ...actions, resolve, reject });
		}).catch(err => {
		if (onError) {
		onError(err);
		}
		throw err;
		});
		};
		}
		},

		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.CHECKOUT,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.CHECKOUT_CANCEL,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});
		onCancel: {
		type: 'function',
		required: false,

		logger.flush();
		decorate({ value, props, close }) : OnCancel {
		return function decorateOnCancel(data, actions = {}) : void \| ZalgoPromise<void> {
		const logger = getLogger();
		logger.info('button_cancel');

		actions = {
		...actions,
		redirect: (url, win) => {
		return ZalgoPromise.all([
		redirect(url, win \|\| window.top),
		close()
		]);
		}
		};
		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.CHECKOUT,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.CHECKOUT_CANCEL,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});

		return ZalgoPromise.try(() => {
		return value.call(this, data, actions);
		}).catch(err => {
		if (props.onError) {
		return props.onError(err);
		}
		throw err;
		});
		};
		},
		logger.flush();

		default: () => noop
		},
		actions = {
		...actions,
		redirect: (url, win) => {
		return ZalgoPromise.all([
		redirect(url, win \|\| window.top),
		close()
		]);
		}
		};

		onClick: {
		type: 'function',
		required: false,
		decorate({ value, props }) : OnClick {
		return function decorateOnClick(data : OnClickData) : void {
		const logger = getLogger();
		logger.info('button_click');
		return ZalgoPromise.try(() => {
		return value.call(this, data, actions);
		}).catch(err => {
		if (props.onError) {
		return props.onError(err);
		}
		throw err;
		});
		};
		},

		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.BUTTON,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.BUTTON_CLICK,
		[ FPTI_KEY.BUTTON_TYPE ]: FPTI_BUTTON_TYPE.IFRAME,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID,
		[ FPTI_KEY.CHOSEN_FUNDING ]: data && (data.card \|\| data.fundingSource)
		});
		default: () => noop
		},

		logger.flush();
		onClick: {
		type: 'function',
		required: false,
		decorate({ value, props }) : OnClick {
		return function decorateOnClick(data : OnClickData) : void {
		const logger = getLogger();
		logger.info('button_click');

		return value.call(this, data);
		};
		},
		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.BUTTON,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.BUTTON_CLICK,
		[ FPTI_KEY.BUTTON_TYPE ]: FPTI_BUTTON_TYPE.IFRAME,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID,
		[ FPTI_KEY.CHOSEN_FUNDING ]: data && (data.card \|\| data.fundingSource)
		});

		default: () => noop
		},
		logger.flush();

		onRender: {
		type: 'function',
		required: false,
		decorate({ value, props }) : Function {
		return function decorateOnRender() : mixed {
		const { browser = 'unrecognized', version = 'unrecognized' } = getBrowser();
		return value.call(this, data);
		};
		},

		const logger = getLogger();
		logger.info(`button_render_browser_${ browser }_${ version }`);
		default: () => noop
		},

		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.LOAD,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.BUTTON_RENDER,
		[ FPTI_KEY.BUTTON_TYPE ]: FPTI_BUTTON_TYPE.IFRAME,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});
		onRender: {
		type: 'function',
		required: false,
		decorate({ value, props }) : Function {
		return function decorateOnRender() : mixed {
		const logger = getLogger();

		logger.track({
		[ FPTI_KEY.STATE ]: FPTI_STATE.LOAD,
		[ FPTI_KEY.TRANSITION ]: FPTI_TRANSITION.BUTTON_RENDER,
		[ FPTI_KEY.BUTTON_TYPE ]: FPTI_BUTTON_TYPE.IFRAME,
		[ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID
		});

		logger.flush();
		logger.flush();

		return value.apply(this, arguments);
		};
		},
		default: () => noop
		},
		return value.apply(this, arguments);
		};
		},
		default: () => noop
		},

		getPrerenderDetails: {
		type: 'function',
		value({ state } : { state : Object }) : GetPrerenderDetails {
		return () : PrerenderDetails => {
		return state.prerenderDetails;
		};
		}
		},
		getPrerenderDetails: {
		type: 'function',
		value({ state } : { state : Object }) : GetPrerenderDetails {
		return () : PrerenderDetails => {
		return state.prerenderDetails;
		};
		}
		},

		proxyRest: {
		type: 'function',
		value({ state }) : (ProxyRest) => void {
		return function proxyRest(rest) {
		state.remoteCreateOrder = rest.createOrder;
		};
		}
		},
		proxyRest: {
		type: 'function',
		value({ state }) : (ProxyRest) => void {
		return function proxyRest(rest) {
		state.remoteCreateOrder = rest.createOrder;
		};
		}
		},

		clientID: {
		type: 'string',
		value: () => getClientID(),
		queryParam: true
		},
		clientID: {
		type: 'string',
		value: () => getClientID(),
		queryParam: true
		},

		sessionID: {
		type: 'string',
		value: () => getSessionID(),
		queryParam: true
		},
		sessionID: {
		type: 'string',
		value: () => getSessionID(),
		queryParam: true
		},

		buttonSessionID: {
		type: 'string',
		value() : string {
		return uniqueID();
		},
		queryParam: true
		},
		buttonSessionID: {
		type: 'string',
		value() : string {
		return uniqueID();
		},
		queryParam: true
		},

		env: {
		type: 'string',
		queryParam: true,
		value: () => getEnv()
		},
		env: {
		type: 'string',
		queryParam: true,
		value: () => getEnv()
		},

		fundingEligibility: {
		type: 'object',
		value: () => getFundingEligibility(),
		queryParam: true,
		serialization: 'base64'
		},
		fundingEligibility: {
		type: 'object',
		value: () => getFundingEligibility(),
		queryParam: true,
		serialization: 'base64'
		},

		platform: {
		type: 'string',
		queryParam: true,
		value() : string {
		return isDevice() ? PLATFORM.MOBILE : PLATFORM.DESKTOP;
		}
		},
		platform: {
		type: 'string',
		queryParam: true,
		value() : string {
		return isDevice() ? PLATFORM.MOBILE : PLATFORM.DESKTOP;
		}
		},

		remembered: {
		type: 'array',
		queryParam: true,
		value: () => findRememberedFunding()
		},
		remembered: {
		type: 'array',
		queryParam: true,
		value: () => findRememberedFunding()
		},

		remember: {
		type: 'function',
		value() : Function {
		return rememberFunding;
		}
		},
		remember: {
		type: 'function',
		value() : Function {
		return rememberFunding;
		}
		},

		currency: {
		type: 'string',
		queryParam: true,
		value: () => getCurrency()
		},
		currency: {
		type: 'string',
		queryParam: true,
		value: () => getCurrency()
		},

		intent: {
		type: 'string',
		queryParam: true,
		value: () => getIntent()
		},
		intent: {
		type: 'string',
		queryParam: true,
		value: () => getIntent()
		},

		commit: {
		type: 'boolean',
		queryParam: true,
		value: () => getCommit()
		},
		commit: {
		type: 'boolean',
		queryParam: true,
		value: () => getCommit()
		},

		vault: {
		type: 'boolean',
		queryParam: true,
		value: () => getVault()
		},
		vault: {
		type: 'boolean',
		queryParam: true,
		value: () => getVault()
		},

		test: {
		type: 'object',
		default() : Object {
		return { action: 'checkout' };
		test: {
		type: 'object',
		default() : Object {
		return { action: 'checkout' };
		}
		}
		}
		});

		if (component.isChild()) {
		setupButtonChild(component);
		}
		}
		});

		if (Buttons.isChild()) {
		setupButtonChild(Buttons);
		return component;
		});
		}

src/buttons/config.js

		@@ -28,5 +28,3 @@ /* @flow */
		minHeight : number,
		maxHeight : number,
		allowFunding : boolean,
		allowTagline : boolean
		maxHeight : number
		}
		@@ -43,5 +41,3 @@ };
		minHeight: 25,
		maxHeight: 30,
		allowFunding: true,
		allowTagline: false
		maxHeight: 30
		},
		@@ -55,5 +51,3 @@
		minHeight: 25,
		maxHeight: 55,
		allowFunding: true,
		allowTagline: true
		maxHeight: 55
		},
		@@ -67,5 +61,3 @@
		minHeight: 35,
		maxHeight: 55,
		allowFunding: true,
		allowTagline: true
		maxHeight: 55
		},
		@@ -79,5 +71,3 @@
		minHeight: 30,
		maxHeight: 55,
		allowFunding: true,
		allowTagline: true
		maxHeight: 55
		},
		@@ -91,6 +81,4 @@
		minHeight: 40,
		maxHeight: 55,
		allowFunding: true,
		allowTagline: true
		maxHeight: 55
		}
		};

src/buttons/props.js

		@@ -12,3 +12,3 @@ /* @flow */
		import { BUTTON_LABEL, BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_SHAPE, BUTTON_SIZE } from '../constants';
		import { FUNDING_CONFIG } from '../funding';
		import { getFundingConfig } from '../funding';
		import type { FundingEligibilityType } from '../types';
		@@ -228,2 +228,4 @@

		const FUNDING_CONFIG = getFundingConfig();

		const funding = Object.keys(FUNDING_CONFIG)
		@@ -230,0 +232,0 @@ .filter(name => FUNDING_CONFIG[name] && FUNDING_CONFIG[name].labels[label])[0];

src/buttons/template/componentStyle/base.js

		@@ -5,3 +5,2 @@ /* @flow */
		import { buttonStyle } from './button';
		import { layoutStyle } from './layout';
		import { labelStyle } from './labels';
		@@ -16,3 +15,2 @@ import { buttonResponsiveStyle } from './responsive';
		${ buttonColorStyle }
		${ layoutStyle }
		${ labelStyle }
		@@ -19,0 +17,0 @@ ${ buttonResponsiveStyle({ height, cardNumber }) }

src/buttons/template/componentStyle/button.js

		@@ -117,11 +117,2 @@ /* @flow */
		}

		.${ CLASS.SEPARATOR } {
		height: 80%;
		border-left: 1px solid rgba(0, 0, 0, 0.15);
		margin: 0 8px;
		display: inline-block;
		position: relative;
		top: 10%;
		}
		`;

src/buttons/template/componentStyle/responsive.js

		@@ -63,7 +63,3 @@ /* @flow */
		}

		.${ CLASS.SEPARATOR } {
		margin: 0 ${ perc(buttonHeight, 5) }px;
		}


		.${ CLASS.TAGLINE } {
		@@ -70,0 +66,0 @@ height: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE) }px;

src/buttons/template/componentTemplate.jsx

		@@ -10,3 +10,3 @@ /* @flow */
		import { BUTTON_NUMBER, BUTTON_LABEL, ATTRIBUTE, CLASS, BUTTON_COLOR } from '../../constants';
		import { FUNDING_CONFIG, determineEligibleFunding } from '../../funding';
		import { getFundingConfig, determineEligibleFunding } from '../../funding';
		import { normalizeButtonProps, type ButtonStyle, type ButtonPropsInputs } from '../props';
		@@ -47,3 +47,3 @@ import type { FundingEligibilityType } from '../../types';

		const fundingConfig = FUNDING_CONFIG[fundingSource];
		const fundingConfig = getFundingConfig()[fundingSource];

		@@ -76,3 +76,3 @@ if (!fundingConfig) {

		const fundingConfig = FUNDING_CONFIG[fundingSource];
		const fundingConfig = getFundingConfig()[fundingSource];

		@@ -130,3 +130,3 @@ if (!fundingConfig) {

		const fundingConfig = FUNDING_CONFIG[fundingSource];
		const fundingConfig = getFundingConfig()[fundingSource];

		@@ -201,3 +201,3 @@ if (!fundingConfig) {
		function getCardNumber(locale : LocaleType) : number {
		const cardConfig = FUNDING_CONFIG[FUNDING.CARD];
		const cardConfig = getFundingConfig()[FUNDING.CARD];
		const vendors = cardConfig && cardConfig.vendors;
		@@ -204,0 +204,0 @@ let maxCards = 4;

src/buttons/template/containerTemplate.jsx

		/* @flow */
		/** @jsx node */

		import { CLASS } from 'zoid/src';
		import { values } from 'belter/src';
		import { values, destroyElement } from 'belter/src';
		import { node, dom } from 'jsx-pragmatic/src';
		import type { RenderOptionsType } from 'zoid/src/parent';
		import { EVENT, type RenderOptionsType } from 'zoid/src';

		import { BUTTON_SIZE, BUTTON_LAYOUT } from '../../constants';
		import { BUTTON_SIZE } from '../../constants';
		import { BUTTON_SIZE_STYLE, MINIMUM_SIZE, MAXIMUM_SIZE } from '../config';
		import type { ButtonProps } from '../props';

		export function containerTemplate({ uid, props, tag, context, outlet, doc } : RenderOptionsType<ButtonProps>) : HTMLElement {
		const CLASS = {
		VISIBLE: 'visible',
		INVISIBLE: 'invisible',
		COMPONENT_FRAME: 'component-frame',
		PRERENDER_FRAME: 'prerender-frame'
		};

		export function containerTemplate({ uid, props, tag, context, frame, prerenderFrame, doc, event } : RenderOptionsType<ButtonProps>) : ?HTMLElement {

		if (!frame \|\| !prerenderFrame) {
		return;
		}

		frame.classList.add(CLASS.COMPONENT_FRAME);
		prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);

		frame.classList.add(CLASS.INVISIBLE);
		prerenderFrame.classList.add(CLASS.VISIBLE);

		event.on(EVENT.RENDERED, () => {
		prerenderFrame.classList.remove(CLASS.VISIBLE);
		prerenderFrame.classList.add(CLASS.INVISIBLE);

		frame.classList.remove(CLASS.INVISIBLE);
		frame.classList.add(CLASS.VISIBLE);

		setTimeout(() => {
		destroyElement(prerenderFrame);
		}, 1);
		});

		const { style } = props;
		@@ -19,3 +47,3 @@ const { label, layout, height: buttonHeight } = style;
		let minimumSize = MINIMUM_SIZE[layout];
		let maximumSize = MAXIMUM_SIZE[layout];
		const maximumSize = MAXIMUM_SIZE[layout];

		@@ -33,3 +61,2 @@ if (buttonHeight) {
		minimumSize = possibleSizes[0];
		maximumSize = possibleSizes[possibleSizes.length - 1];
		}
		@@ -43,44 +70,23 @@
		#${ uid } {
		font-size: 0;
		position: relative;
		display: inline-block;
		width: 100%;
		}

		#${ uid }.${ tag }-size-${ BUTTON_SIZE.RESPONSIVE } {
		text-align: center;
		}

		#${ uid } > .${ CLASS.OUTLET } {
		display: inline-block;
		min-width: ${ BUTTON_SIZE_STYLE[minimumSize].minWidth }px;
		max-width: ${ BUTTON_SIZE_STYLE[maximumSize].maxWidth }px;
		position: relative;
		font-size: 0;
		}

		#${ uid }.${ tag }-layout-${ BUTTON_LAYOUT.VERTICAL } > .${ CLASS.OUTLET } {
		min-width: ${ BUTTON_SIZE_STYLE[minimumSize].minWidth }px;
		}

		#${ uid } > .${ CLASS.OUTLET } {
		width: 100%;
		}

		#${ uid }.${ tag }-size-${ BUTTON_SIZE.RESPONSIVE } > .${ CLASS.OUTLET } {
		width: 100%;
		}

		#${ uid } > .${ CLASS.OUTLET } > iframe {
		min-width: 100%;
		max-width: 100%;
		width: ${ BUTTON_SIZE_STYLE[minimumSize].minWidth }px;
		height: 100%;
		#${ uid } > iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

		#${ uid } > .${ CLASS.OUTLET } > iframe.${ CLASS.COMPONENT_FRAME } {
		#${ uid } > iframe.${ CLASS.COMPONENT_FRAME } {
		z-index: 100;
		}

		#${ uid } > .${ CLASS.OUTLET } > iframe.${ CLASS.PRERENDER_FRAME } {
		#${ uid } > iframe.${ CLASS.PRERENDER_FRAME } {
		transition: opacity .2s linear;
		@@ -90,7 +96,7 @@ z-index: 200;

		#${ uid } > .${ CLASS.OUTLET } > iframe.${ CLASS.VISIBLE } {
		#${ uid } > iframe.${ CLASS.VISIBLE } {
		opacity: 1;
		}

		#${ uid } > .${ CLASS.OUTLET } > iframe.${ CLASS.INVISIBLE } {
		#${ uid } > iframe.${ CLASS.INVISIBLE } {
		opacity: 0;
		@@ -102,5 +108,6 @@ pointer-events: none;

		<node el={ outlet } />
		<node el={ frame } />
		<node el={ prerenderFrame } />
		</div>
		).render(dom({ doc }));
		}

598

src/checkout/component.js

		/* @flow */
		/* eslint max-lines: 0 */

		import { getPayPalDomainRegex, getLogger, getLocale, getEnv, getClientID, getCommit, getSDKMeta, isEligible } from '@paypal/sdk-client/src';
		import { getPayPalDomainRegex, getLogger, getLocale, getEnv, getClientID, getCommit, getSDKMeta } from '@paypal/sdk-client/src';
		import { FUNDING } from '@paypal/sdk-constants/src';
		import { ZalgoPromise } from 'zalgo-promise/src';
		import { create, CONTEXT, type ZoidComponent } from 'zoid/src';
		import { isDevice, memoize, isIEIntranet, noop, once, supportsPopups } from 'belter/src';
		import { isDevice, memoize, isIEIntranet, noop, once, supportsPopups, inlineMemoize } from 'belter/src';

		import { getSessionID, getButtonSessionID } from '../lib';
		import { FUNDING_CONFIG } from '../funding';
		import { getFundingConfig } from '../funding';

		@@ -16,306 +16,308 @@ import { containerTemplate, componentTemplate } from './template';

		export const Checkout : ZoidComponent<CheckoutPropsType> = create({
		export function getCheckoutComponent() : ZoidComponent<CheckoutPropsType> {
		return inlineMemoize(getCheckoutComponent, () => {
		const component = create({

		tag: 'paypal-checkout',

		attributes: {
		iframe: {
		scrolling: 'yes'
		}
		},

		defaultContext: supportsPopups() ? CONTEXT.POPUP : CONTEXT.IFRAME,

		url({ props }) : string {
		const { fundingSource } = props;
		const fundingConfig = FUNDING_CONFIG[fundingSource];

		if (!fundingConfig) {
		throw new Error(`Can not find funding config for ${ fundingSource }`);
		}

		return fundingConfig.url();
		},

		domain: getPayPalDomainRegex(),

		logger: getLogger(),

		validate() {
		if (isIEIntranet()) {
		throw new Error(`Can not render button in IE intranet mode`);
		}

		if (!isEligible()) {
		getLogger().warn('checkout_render_ineligible');
		}
		},

		prerenderTemplate: componentTemplate,
		containerTemplate,

		props: {

		clientID: {
		type: 'string',
		value: () => getClientID(),
		queryParam: true
		},

		sessionID: {
		type: 'string',
		// $FlowFixMe
		value() : string {
		return getSessionID();
		tag: 'paypal-checkout',

		attributes: {
		iframe: {
		scrolling: 'yes'
		}
		},
		queryParam: true
		},

		buttonSessionID: {
		type: 'string',
		required: false,
		default() : ?string {
		return getButtonSessionID();

		defaultContext: supportsPopups() ? CONTEXT.POPUP : CONTEXT.IFRAME,

		url({ props }) : string {
		const { fundingSource } = props;
		const fundingConfig = getFundingConfig()[fundingSource];

		if (!fundingConfig) {
		throw new Error(`Can not find funding config for ${ fundingSource }`);
		}

		return fundingConfig.url();
		},
		queryParam: true
		},

		env: {
		type: 'string',
		queryParam: true,
		// $FlowFixMe
		value: () => getEnv()
		},

		sdkMeta: {
		type: 'string',
		queryParam: true,
		// $FlowFixMe
		value: () => getSDKMeta()
		},

		nonce: {
		type: 'string',
		required: false
		},

		meta: {
		type: 'object',
		default: () => {
		const meta = window.xprops && window.xprops.meta;
		return meta \|\| {};
		}
		},

		locale: {
		type: 'object',
		queryParam: 'locale.x',
		allowDelegate: true,
		queryValue({ value }) : string {
		const { lang, country } = value;
		return `${ lang }_${ country }`;
		domain: getPayPalDomainRegex(),

		logger: getLogger(),

		validate() {
		if (isIEIntranet()) {
		throw new Error(`Can not render button in IE intranet mode`);
		}
		},
		// $FlowFixMe
		value: () => getLocale()
		},

		// $FlowFixMe
		createOrder: {
		type: 'function',
		queryParam: 'token',
		alias: 'payment',
		queryValue: ({ value }) => {
		return ZalgoPromise.try(value);
		},
		decorate: ({ value: payment }) => {
		return memoize(() => {
		return ZalgoPromise.try(payment)
		.then(orderID => {

		if (!orderID) {
		throw new Error(`No order id passed`);
		}

		return orderID;
		prerenderTemplate: componentTemplate,
		containerTemplate,

		props: {

		clientID: {
		type: 'string',
		value: () => getClientID(),
		queryParam: true
		},

		sessionID: {
		type: 'string',
		// $FlowFixMe
		value() : string {
		return getSessionID();
		},
		queryParam: true
		},

		buttonSessionID: {
		type: 'string',
		required: false,
		default() : ?string {
		return getButtonSessionID();
		},
		queryParam: true
		},

		env: {
		type: 'string',
		queryParam: true,
		// $FlowFixMe
		value: () => getEnv()
		},

		sdkMeta: {
		type: 'string',
		queryParam: true,
		// $FlowFixMe
		value: () => getSDKMeta()
		},

		nonce: {
		type: 'string',
		required: false
		},

		meta: {
		type: 'object',
		default: () => {
		const meta = window.xprops && window.xprops.meta;
		return meta \|\| {};
		}
		},

		locale: {
		type: 'object',
		queryParam: 'locale.x',
		allowDelegate: true,
		queryValue({ value }) : string {
		const { lang, country } = value;
		return `${ lang }_${ country }`;
		},
		// $FlowFixMe
		value: () => getLocale()
		},

		// $FlowFixMe
		createOrder: {
		type: 'function',
		queryParam: 'token',
		alias: 'payment',
		queryValue: ({ value }) => {
		return ZalgoPromise.try(value);
		},
		decorate: ({ value: payment }) => {
		return memoize(() => {
		return ZalgoPromise.try(payment)
		.then(orderID => {

		if (!orderID) {
		throw new Error(`No order id passed`);
		}

		return orderID;
		});
		});
		});
		}
		},

		xcomponent: {
		type: 'string',
		queryParam: true,
		// $FlowFixMe
		value() : string {
		return '1';
		}
		},

		version: {
		type: 'string',
		queryParam: true,
		// $FlowFixMe
		value() : string {
		return '5';
		}
		},

		commit: {
		type: 'boolean',
		queryParam: true,
		default: getCommit
		},

		// $FlowFixMe
		fundingSource: {
		type: 'string',
		queryParam: true,
		default() : $Values<typeof FUNDING> {
		return FUNDING.PAYPAL;
		}
		},

		// $FlowFixMe
		onApprove: {
		type: 'function',
		alias: 'onAuthorize',

		decorate: ({ value, state, close, onError }) => {
		return function decorateOnApprove(data, actions) : ZalgoPromise<void> {
		return ZalgoPromise.try(() => {
		state.approved = true;

		// $FlowFixMe
		return value(data, actions);
		}).catch(err => {
		return onError(err);
		}).finally(() => {
		return close();
		});
		};
		}
		},

		onShippingChange: {
		type: 'function',
		required: false
		},

		onAuth: {
		type: 'function',
		required: false,
		sameDomain: true
		},

		accessToken: {
		type: 'string',
		required: false
		},

		onCancel: {
		type: 'function',
		required: false,

		decorate: ({ value, close, onError }) => {
		return function decorateOnCancel(data, actions = {}) : ZalgoPromise<void> {
		return ZalgoPromise.try(() => {
		// $FlowFixMe
		return value(data, actions);
		}).catch(err => {
		return onError(err);
		}).finally(() => {
		close();
		});
		};
		}
		},

		xcomponent: {
		type: 'string',
		queryParam: true,
		// $FlowFixMe
		value() : string {
		return '1';
		}
		},

		version: {
		type: 'string',
		queryParam: true,
		// $FlowFixMe
		value() : string {
		return '5';
		}
		},

		commit: {
		type: 'boolean',
		queryParam: true,
		default: getCommit
		},

		// $FlowFixMe
		fundingSource: {
		type: 'string',
		queryParam: true,
		default() : $Values<typeof FUNDING> {
		return FUNDING.PAYPAL;
		}
		},

		// $FlowFixMe
		onApprove: {
		type: 'function',
		alias: 'onAuthorize',

		decorate: ({ value, state, close, onError }) => {
		return function decorateOnApprove(data, actions) : ZalgoPromise<void> {
		return ZalgoPromise.try(() => {
		state.approved = true;

		// $FlowFixMe
		return value(data, actions);
		}).catch(err => {
		return onError(err);
		}).finally(() => {
		return close();
		});
		};
		}
		},

		onShippingChange: {
		type: 'function',
		required: false
		},

		onAuth: {
		type: 'function',
		required: false,
		sameDomain: true
		},

		accessToken: {
		type: 'string',
		required: false
		},

		onCancel: {
		type: 'function',
		required: false,

		decorate: ({ value, close, onError }) => {
		return once((data, actions = {}) : ZalgoPromise<void> => {
		return ZalgoPromise.try(() => {
		// $FlowFixMe
		return value(data, actions);
		}).catch(err => {
		return onError(err);
		}).finally(() => {
		close();
		});
		});
		},

		// $FlowFixMe
		default: () => noop
		},

		onClose: {
		type: 'function',
		required: false,
		allowDelegate: true,

		decorate: ({ value, props, state }) => {
		return once((reason, ...args) : ZalgoPromise<void> => {
		return ZalgoPromise.try(() => {
		return ZalgoPromise.all((state.onCloseHandlers \|\| []).map(handler => handler()));

		}).then(() => {
		if (!state.approved) {
		// $FlowFixMe
		return ZalgoPromise.try(() => props.onCancel())
		.then(() => value(...args));
		}

		return value(...args);
		});
		});
		},

		default: () => noop
		},

		addOnClose: {
		type: 'function',
		allowDelegate: true,
		value: ({ state }) => {
		return (handler) => {
		state.onCloseHandlers = state.onCloseHandlers \|\| [];
		state.onCloseHandlers.push(handler);
		};
		}
		},

		onDisplay: {
		type: 'function',
		required: false,
		allowDelegate: true,

		decorate: ({ value, state }) => {
		return once(function decorateOnDisplay() : ZalgoPromise<void> {
		return ZalgoPromise.try(() => {
		return ZalgoPromise.all((state.onDisplayHandlers \|\| []).map(handler => handler()));

		}).then(() => {
		return value.apply(this, arguments);
		});
		});
		},

		default: () => noop
		},

		addOnDisplay: {
		type: 'function',
		allowDelegate: true,
		value: ({ state }) => {
		return (handler) => {
		state.onDisplayHandlers = state.onDisplayHandlers \|\| [];
		state.onDisplayHandlers.push(handler);
		};
		}
		},

		test: {
		type: 'object',
		default() : Object {
		return window.__test__ \|\| { action: 'checkout' };
		}
		}
		},

		// $FlowFixMe
		default: () => noop
		},

		onClose: {
		type: 'function',
		required: false,
		allowDelegate: true,

		decorate: ({ value, props, state }) => {
		return once((reason, ...args) : ZalgoPromise<void> => {
		return ZalgoPromise.try(() => {
		return ZalgoPromise.all((state.onCloseHandlers \|\| []).map(handler => handler()));

		}).then(() => {
		if (!state.approved) {
		// $FlowFixMe
		return ZalgoPromise.try(() => props.onCancel())
		.then(() => value(...args));
		}

		return value(...args);
		});
		});
		},

		default: () => noop
		},

		addOnClose: {
		type: 'function',
		allowDelegate: true,
		value: ({ state }) => {
		return (handler) => {
		state.onCloseHandlers = state.onCloseHandlers \|\| [];
		state.onCloseHandlers.push(handler);
		};
		}
		},

		onDisplay: {
		type: 'function',
		required: false,
		allowDelegate: true,

		decorate: ({ value, state }) => {
		return once(function decorateOnDisplay() : ZalgoPromise<void> {
		return ZalgoPromise.try(() => {
		return ZalgoPromise.all((state.onDisplayHandlers \|\| []).map(handler => handler()));

		}).then(() => {
		return value.apply(this, arguments);
		});
		});
		},

		default: () => noop
		},

		addOnDisplay: {
		type: 'function',
		allowDelegate: true,
		value: ({ state }) => {
		return (handler) => {
		state.onDisplayHandlers = state.onDisplayHandlers \|\| [];
		state.onDisplayHandlers.push(handler);
		};
		}
		},

		test: {
		type: 'object',
		default() : Object {
		return window.__test__ \|\| { action: 'checkout' };
		}

		dimensions: isDevice()
		? { width: '100%', height: '535px' }
		: { width: '450px', height: '535px' }
		});

		if (component.isChild()) {
		window.xchild = {
		props: component.xprops,
		show: noop,
		hide: noop
		};
		}
		},

		dimensions: isDevice()
		? { width: '100%', height: '535px' }
		: { width: '450px', height: '535px' }
		});

		if (Checkout.isChild()) {
		window.xchild = {
		props: Checkout.xprops,
		show: noop,
		hide: noop
		};

		return component;
		});
		}

src/checkout/props.js

		@@ -25,3 +25,2 @@ /* @flow */


		export type CheckoutPropsType = {\|
		@@ -28,0 +27,0 @@ createOrder : () => ZalgoPromise<string>,

src/checkout/template/containerStyle.js

		/* @flow */

		import { CONTEXT, CLASS } from 'zoid/src';
		import { CONTEXT } from 'zoid/src';

		export const CLASS = {
		OUTLET: 'outlet',
		VISIBLE: 'visible',
		INVISIBLE: 'invisible',
		COMPONENT_FRAME: 'component-frame',
		PRERENDER_FRAME: 'prerender-frame'
		};

		export function getSandboxStyle({ uid } : { uid : string }) : string {
		@@ -6,0 +14,0 @@ return `

src/checkout/template/containerTemplate.jsx

		@@ -5,7 +5,6 @@ /* @flow */

		import { isIos, animate, noop } from 'belter/src';
		import type { RenderOptionsType } from 'zoid/src/parent';
		import { isIos, animate, noop, destroyElement } from 'belter/src';
		import { EVENT, type RenderOptionsType } from 'zoid/src';
		import { node, dom } from 'jsx-pragmatic/src';
		import { LOGO_COLOR, PPLogo, PayPalLogo } from '@paypal/sdk-logos/src';
		import { ZalgoPromise } from 'zalgo-promise/src';

		@@ -15,5 +14,5 @@ import type { CheckoutPropsType } from '../props';
		import { containerContent } from './containerContent';
		import { getContainerStyle, getSandboxStyle } from './containerStyle';
		import { getContainerStyle, getSandboxStyle, CLASS } from './containerStyle';

		export function containerTemplate({ uid, tag, props, context, close, focus, outlet, doc } : RenderOptionsType<CheckoutPropsType>) : HTMLElement {
		export function containerTemplate({ uid, tag, props, context, close, focus, doc, event, frame, prerenderFrame } : RenderOptionsType<CheckoutPropsType>) : HTMLElement {

		@@ -23,11 +22,11 @@ const { locale } = props;

		function closeCheckout(event) {
		event.preventDefault();
		event.stopPropagation();
		function closeCheckout(e) {
		e.preventDefault();
		e.stopPropagation();
		close();
		}

		function focusCheckout(event) {
		event.preventDefault();
		event.stopPropagation();
		function focusCheckout(e) {
		e.preventDefault();
		e.stopPropagation();

		@@ -46,20 +45,40 @@ if (isIos()) {

		const setupContainerAnimations = (el) => {
		props.addOnDisplay(() => {
		return ZalgoPromise.all([
		animate(el, 'show-container', noop),
		animate(outlet, 'show-component', noop)
		]).then(noop);
		});
		const setupAnimations = (name) => {
		return (el) => {
		event.on(EVENT.DISPLAY, () => animate(el, `show-${ name }`, noop));
		event.on(EVENT.CLOSE, () => animate(el, `hide-${ name }`, noop));
		};
		};

		props.addOnClose(() => {
		return ZalgoPromise.all([
		animate(el, 'hide-container', noop),
		animate(outlet, 'hide-component', noop)
		]).then(noop);
		let outlet;

		if (frame && prerenderFrame) {
		frame.classList.add(CLASS.COMPONENT_FRAME);
		prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);

		prerenderFrame.classList.add(CLASS.VISIBLE);
		frame.classList.add(CLASS.INVISIBLE);

		event.on(EVENT.RENDERED, () => {
		prerenderFrame.classList.remove(CLASS.VISIBLE);
		prerenderFrame.classList.add(CLASS.INVISIBLE);

		frame.classList.remove(CLASS.INVISIBLE);
		frame.classList.add(CLASS.VISIBLE);

		setTimeout(() => {
		destroyElement(prerenderFrame);
		}, 1);
		});
		};

		outlet = (
		<div class={ CLASS.OUTLET } onRender={ setupAnimations('component') }>
		<node el={ frame } />
		<node el={ prerenderFrame } />
		</div>
		);
		}

		return (
		<div id={ uid } onRender={ setupContainerAnimations } class="paypal-checkout-sandbox">
		<div id={ uid } onRender={ setupAnimations('container') } class="paypal-checkout-sandbox">
		<style>{ getSandboxStyle({ uid }) }</style>
		@@ -89,3 +108,3 @@
		<div class="paypal-checkout-iframe-container">
		<node el={ outlet } />
		{ outlet }
		</div>
		@@ -92,0 +111,0 @@

src/funding/bancontact/config.jsx

		@@ -10,39 +10,41 @@ /* @flow */

		export const BANCONTACT_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,
		export function getBancontactConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.BANCONTACT,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.BANCONTACT ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: BancontactLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.BANCONTACT,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.BANCONTACT ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: BancontactLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/card/amex/config.js

		@@ -5,4 +5,9 @@ /* @flow */

		export const AMEX_CONFIG = {
		Logo: AmexLogo
		};
		import type { CardConfig } from '../../common';

		export function getAmexConfig() : CardConfig {
		return {
		Logo: AmexLogo
		};
		}

190

src/funding/card/config.jsx

		@@ -10,4 +10,12 @@ /* @flow */
		import { BUTTON_LAYOUT, BUTTON_LABEL, BUTTON_COLOR } from '../../constants';
		import { DEFAULT_FUNDING_CONFIG, DEFAULT_LABEL_CONFIG, type FundingSourceConfig } from '../common';
		import { DEFAULT_FUNDING_CONFIG, DEFAULT_LABEL_CONFIG, type FundingSourceConfig, type CardConfig } from '../common';

		import { getVisaConfig } from './visa';
		import { getMastercardConfig } from './mastercard';
		import { getAmexConfig } from './amex';
		import { getDiscoverConfig } from './discover';
		import { getHiperConfig } from './hiper';
		import { getEloConfig } from './elo';
		import { getJCBConfig } from './jcb';

		const CARD_PRIORITY : $ReadOnlyArray<$Values<typeof CARD>> = [
		@@ -23,100 +31,100 @@ CARD.VISA,

		export const CARD_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,
		function getVendorConfig() : { [$Values<typeof CARD>] : ?CardConfig } {
		return {
		[ CARD.VISA ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.visa.eligible) ? getVisaConfig() : null,
		[ CARD.AMEX ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.amex.eligible) ? getAmexConfig() : null,
		[ CARD.MASTERCARD ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.mastercard.eligible) ? getMastercardConfig() : null,
		[ CARD.DISCOVER ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.discover.eligible) ? getDiscoverConfig() : null,
		[ CARD.JCB ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.jcb.eligible) ? getJCBConfig() : null,
		[ CARD.ELO ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.elo.eligible) ? getEloConfig() : null,
		[ CARD.HIPER ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.hiper.eligible) ? getHiperConfig() : null
		};
		}

		url: getGuestUrl,
		export function getCardConfig() : FundingSourceConfig {

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],
		const vendors = getVendorConfig();

		defaultLabel: BUTTON_LABEL.CARD,
		const maxCardForCountry = {
		[ COUNTRY.BR ]: 5
		};

		labels: {
		[ BUTTON_LABEL.CARD ]: {
		...DEFAULT_LABEL_CONFIG,
		return {
		...DEFAULT_FUNDING_CONFIG,

		Label: ({ fundingEligibility, locale, nonce }) => {
		let maxCards = 4;
		url: getGuestUrl,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		defaultLabel: BUTTON_LABEL.CARD,

		if (CARD_CONFIG.maxCards && CARD_CONFIG.maxCards[locale.country]) {
		maxCards = CARD_CONFIG.maxCards[locale.country];
		}
		maxCards: maxCardForCountry,

		return CARD_PRIORITY.map(name => {

		const cardEligibility = fundingEligibility[FUNDING.CARD];

		if (!cardEligibility) {
		return null;
		vendors,

		labels: {
		[ BUTTON_LABEL.CARD ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: ({ fundingEligibility, locale, nonce }) => {
		let maxCards = 4;

		// $FlowFixMe
		if (maxCardForCountry[locale.country]) {
		// $FlowFixMe
		maxCards = maxCardForCountry[locale.country];
		}

		if (!cardEligibility.vendors[name] \|\| !cardEligibility.vendors[name].eligible) {
		return null;
		}

		const vendorConfig = CARD_CONFIG.vendors && CARD_CONFIG.vendors[name];

		if (!vendorConfig) {
		return null;
		}

		const { Logo } = vendorConfig;

		return (
		<Logo
		locale={ locale }
		nonce={ nonce }
		/>
		);
		}).filter(Boolean).slice(0, maxCards);
		},

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.TRANSPARENT
		],

		logoColors: {
		[ BUTTON_COLOR.TRANSPARENT ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.TRANSPARENT,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.TRANSPARENT,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.TRANSPARENT,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.TRANSPARENT
		},

		allowPrimary: false

		return CARD_PRIORITY.map(name => {

		const cardEligibility = fundingEligibility[FUNDING.CARD];

		if (!cardEligibility) {
		return null;
		}

		if (!cardEligibility.vendors[name] \|\| !cardEligibility.vendors[name].eligible) {
		return null;
		}

		const vendorConfig = vendors[name];

		if (!vendorConfig) {
		return null;
		}

		const { Logo } = vendorConfig;

		return (
		<Logo
		locale={ locale }
		nonce={ nonce }
		/>
		);
		}).filter(Boolean).slice(0, maxCards);
		},

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.TRANSPARENT
		],

		logoColors: {
		[ BUTTON_COLOR.TRANSPARENT ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.TRANSPARENT,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.TRANSPARENT,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.TRANSPARENT,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.TRANSPARENT
		},

		allowPrimary: false
		}
		}
		},

		vendors: {
		[ CARD.VISA ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.visa.eligible)
		? require('./visa').VISA_CONFIG : null,

		[ CARD.AMEX ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.amex.eligible)
		? require('./amex').AMEX_CONFIG : null,

		[ CARD.MASTERCARD ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.mastercard.eligible)
		? require('./mastercard').MASTERCARD_CONFIG : null,

		[ CARD.DISCOVER ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.discover.eligible)
		? require('./discover').DISCOVER_CONFIG : null,

		[ CARD.JCB ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.jcb.eligible)
		? require('./jcb').JCB_CONFIG : null,

		[ CARD.ELO ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.elo.eligible)
		? require('./elo').ELO_CONFIG : null,

		[ CARD.HIPER ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.card.vendors.hiper.eligible)
		? require('./hiper').HIPER_CONFIG : null
		},

		maxCards: {
		[ COUNTRY.BR ]: 5
		}
		};
		};
		}

src/funding/card/discover/config.js

		@@ -5,4 +5,8 @@ /* @flow */

		export const DISCOVER_CONFIG = {
		Logo: DiscoverLogo
		};
		import type { CardConfig } from '../../common';

		export function getDiscoverConfig() : CardConfig {
		return {
		Logo: DiscoverLogo
		};
		}

src/funding/card/elo/config.js

		@@ -5,4 +5,8 @@ /* @flow */

		export const ELO_CONFIG = {
		Logo: EloLogo
		};
		import type { CardConfig } from '../../common';

		export function getEloConfig() : CardConfig {
		return {
		Logo: EloLogo
		};
		}

src/funding/card/hiper/config.js

		@@ -5,4 +5,8 @@ /* @flow */

		export const HIPER_CONFIG = {
		Logo: HiperLogo
		};
		import type { CardConfig } from '../../common';

		export function getHiperConfig() : CardConfig {
		return {
		Logo: HiperLogo
		};
		}

src/funding/card/jcb/config.js

		@@ -5,4 +5,8 @@ /* @flow */

		export const JCB_CONFIG = {
		Logo: JcbLogo
		};
		import type { CardConfig } from '../../common';

		export function getJCBConfig() : CardConfig {
		return {
		Logo: JcbLogo
		};
		}

src/funding/card/mastercard/config.js

		@@ -5,4 +5,8 @@ /* @flow */

		export const MASTERCARD_CONFIG = {
		Logo: MastercardLogo
		};
		import type { CardConfig } from '../../common';

		export function getMastercardConfig() : CardConfig {
		return {
		Logo: MastercardLogo
		};
		}

src/funding/card/visa/config.js

		@@ -5,4 +5,8 @@ /* @flow */

		export const VISA_CONFIG = {
		Logo: VisaLogo
		};
		import type { CardConfig } from '../../common';

		export function getVisaConfig() : CardConfig {
		return {
		Logo: VisaLogo
		};
		}

src/funding/common.jsx

		@@ -5,3 +5,3 @@ /* @flow */

		import { PLATFORM, CARD, type LocaleType, COUNTRY } from '@paypal/sdk-constants/src';
		import { PLATFORM, type LocaleType, COUNTRY, CARD } from '@paypal/sdk-constants/src';
		import { ElementNode } from 'jsx-pragmatic/src';
		@@ -83,3 +83,3 @@ import { LOGO_COLOR } from '@paypal/sdk-logos/src';

		type CardConfig = {\|
		export type CardConfig = {\|
		Logo : ({\|
		@@ -98,12 +98,3 @@ locale : LocaleType,
		rememberedOnly? : boolean,
		vendors? : {
		visa : ?CardConfig,
		mastercard : ?CardConfig,
		amex : ?CardConfig,
		discover : ?CardConfig,
		jcb : ?CardConfig,
		elo : ?CardConfig,
		hiper : ?CardConfig,
		[$Values<typeof CARD>] : CardConfig
		},
		vendors? : { [$Values<typeof CARD>] : ?CardConfig },
		labels : {\|
		@@ -110,0 +101,0 @@ bancontact? : FundingLabelConfig,

src/funding/config.js

		/* @flow */

		import { FUNDING } from '@paypal/sdk-constants/src';
		import { inlineMemoize } from 'belter/src';

		import { type FundingSourceConfig } from './common';
		import { getPayPalConfig } from './paypal';
		import { getVenmoConfig } from './venmo';
		import { getCreditConfig } from './credit';
		import { getCardConfig } from './card';
		import { getIdealConfig } from './ideal';
		import { getSepaConfig } from './sepa';
		import { getBancontactConfig } from './bancontact';
		import { getGiropayConfig } from './giropay';
		import { getSofortConfig } from './sofort';
		import { getEpsConfig } from './eps';
		import { getMybankConfig } from './mybank';
		import { getP24Config } from './p24';
		import { getZimplerConfig } from './zimpler';
		import { getWechatpayConfig } from './wechatpay';

		@@ -24,45 +39,21 @@ export const FUNDING_PRIORITY = [

		export const FUNDING_CONFIG : { [$Values<typeof FUNDING>] : ?FundingSourceConfig } = {
		[ FUNDING.PAYPAL ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.paypal.eligible)
		? require('./paypal').PAYPAL_CONFIG : null,

		[ FUNDING.VENMO ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.venmo.eligible)
		? require('./venmo').VENMO_CONFIG : null,

		[ FUNDING.CREDIT ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.credit.eligible)
		? require('./credit').CREDIT_CONFIG : null,

		[ FUNDING.CARD ]: (!__TREE_SHAKE__ \|\| (__paypal_checkout__.serverConfig.fundingEligibility.card.eligible
		&& __paypal_checkout__.serverConfig.fundingEligibility.card.branded))
		? require('./card').CARD_CONFIG : null,

		[ FUNDING.IDEAL ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.ideal.eligible)
		? require('./ideal').IDEAL_CONFIG : null,

		[ FUNDING.SEPA ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.sepa.eligible)
		? require('./sepa').SEPA_CONFIG : null,

		[ FUNDING.BANCONTACT ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.bancontact.eligible)
		? require('./bancontact').BANCONTACT_CONFIG : null,

		[ FUNDING.GIROPAY ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.giropay.eligible)
		? require('./giropay').GIROPAY_CONFIG : null,

		[ FUNDING.SOFORT ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.sofort.eligible)
		? require('./sofort').SOFORT_CONFIG : null,

		[ FUNDING.EPS ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.eps.eligible)
		? require('./eps').EPS_CONFIG : null,

		[ FUNDING.MYBANK ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.mybank.eligible)
		? require('./mybank').MYBANK_CONFIG : null,

		[ FUNDING.P24 ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.p24.eligible)
		? require('./p24').P24_CONFIG : null,

		[ FUNDING.ZIMPLER ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.zimpler.eligible)
		? require('./zimpler').ZIMPLER_CONFIG : null,

		[ FUNDING.WECHATPAY ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.wechatpay.eligible)
		? require('./wechatpay').WECHATPAY_CONFIG : null
		};
		export function getFundingConfig() : { [$Values<typeof FUNDING>] : ?FundingSourceConfig } {
		return inlineMemoize(getFundingConfig, () => {
		return {
		[ FUNDING.PAYPAL ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.paypal.eligible) ? getPayPalConfig() : null,
		[ FUNDING.VENMO ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.venmo.eligible) ? getVenmoConfig() : null,
		[ FUNDING.CREDIT ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.credit.eligible) ? getCreditConfig() : null,
		[ FUNDING.CARD ]: (!__TREE_SHAKE__ \|\| (__paypal_checkout__.serverConfig.fundingEligibility.card.eligible && __paypal_checkout__.serverConfig.fundingEligibility.card.branded)) ? getCardConfig() : null,
		[ FUNDING.IDEAL ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.ideal.eligible) ? getIdealConfig() : null,
		[ FUNDING.SEPA ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.sepa.eligible) ? getSepaConfig() : null,
		[ FUNDING.BANCONTACT ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.bancontact.eligible) ? getBancontactConfig() : null,
		[ FUNDING.GIROPAY ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.giropay.eligible) ? getGiropayConfig() : null,
		[ FUNDING.SOFORT ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.sofort.eligible) ? getSofortConfig() : null,
		[ FUNDING.EPS ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.eps.eligible) ? getEpsConfig() : null,
		[ FUNDING.MYBANK ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.mybank.eligible) ? getMybankConfig() : null,
		[ FUNDING.P24 ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.p24.eligible) ? getP24Config() : null,
		[ FUNDING.ZIMPLER ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.zimpler.eligible) ? getZimplerConfig() : null,
		[ FUNDING.WECHATPAY ]: (!__TREE_SHAKE__ \|\| __paypal_checkout__.serverConfig.fundingEligibility.wechatpay.eligible) ? getWechatpayConfig() : null
		};
		});
		}

src/funding/credit/config.jsx

		@@ -12,45 +12,46 @@ /* @flow */


		export const CREDIT_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,
		export function getCreditConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		url: getCheckoutUrl,

		defaultLabel: BUTTON_LABEL.CREDIT,

		labels: {
		[BUTTON_LABEL.CREDIT]: {
		...DEFAULT_LABEL_CONFIG,

		Label: ({ locale, logoColor }) => {
		if (locale.country === COUNTRY.DE) {
		return <CreditLogo logoColor={ logoColor } locale={ locale } />;
		}

		return (
		<Fragment>
		<PPLogo logoColor={ logoColor } /> <PayPalLogo logoColor={ logoColor } /> <CreditLogo logoColor={ logoColor } locale={ locale } />
		</Fragment>
		);
		},

		colors: [
		BUTTON_COLOR.DARKBLUE
		],

		logoColors: {
		[ BUTTON_COLOR.DARKBLUE ]: LOGO_COLOR.WHITE
		},

		secondaryColors: {
		[BUTTON_COLOR.GOLD]: BUTTON_COLOR.DARKBLUE,
		[BUTTON_COLOR.BLUE]: BUTTON_COLOR.DARKBLUE,
		[BUTTON_COLOR.SILVER]: BUTTON_COLOR.DARKBLUE
		},

		defaultColor: BUTTON_COLOR.DARKBLUE,

		allowPrimary: false
		url: getCheckoutUrl,

		defaultLabel: BUTTON_LABEL.CREDIT,

		labels: {
		[BUTTON_LABEL.CREDIT]: {
		...DEFAULT_LABEL_CONFIG,

		Label: ({ locale, logoColor }) => {
		if (locale.country === COUNTRY.DE) {
		return <CreditLogo logoColor={ logoColor } locale={ locale } />;
		}

		return (
		<Fragment>
		<PPLogo logoColor={ logoColor } /> <PayPalLogo logoColor={ logoColor } /> <CreditLogo logoColor={ logoColor } locale={ locale } />
		</Fragment>
		);
		},

		colors: [
		BUTTON_COLOR.DARKBLUE
		],

		logoColors: {
		[ BUTTON_COLOR.DARKBLUE ]: LOGO_COLOR.WHITE
		},

		secondaryColors: {
		[BUTTON_COLOR.GOLD]: BUTTON_COLOR.DARKBLUE,
		[BUTTON_COLOR.BLUE]: BUTTON_COLOR.DARKBLUE,
		[BUTTON_COLOR.SILVER]: BUTTON_COLOR.DARKBLUE
		},

		defaultColor: BUTTON_COLOR.DARKBLUE,

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/eps/config.jsx

		@@ -10,40 +10,41 @@ /* @flow */

		export function getEpsConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const EPS_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,

		url: getAltPayUrl,
		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.EPS,

		defaultLabel: BUTTON_LABEL.EPS,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.EPS ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: EpsLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.EPS ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: EpsLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/funding.js

		@@ -8,3 +8,3 @@ /* @flow */

		import { FUNDING_PRIORITY, FUNDING_CONFIG } from './config';
		import { FUNDING_PRIORITY, getFundingConfig } from './config';

		@@ -18,3 +18,3 @@ export function isFundingEligible(source : $Values<typeof FUNDING>, { layout, platform, remembered, fundingEligibility } :

		const fundingConfig = FUNDING_CONFIG[source];
		const fundingConfig = getFundingConfig()[source];

		@@ -21,0 +21,0 @@ if (!fundingConfig) {

src/funding/giropay/config.jsx

		@@ -10,40 +10,41 @@ /* @flow */

		export function getGiropayConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const GIROPAY_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,

		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.GIROPAY,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.GIROPAY ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: GiropayLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.GIROPAY,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.GIROPAY ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: GiropayLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/ideal/config.jsx

		@@ -10,40 +10,41 @@ /* @flow */

		export function getIdealConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const IDEAL_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,

		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.IDEAL,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.IDEAL ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: IdealLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.IDEAL,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.IDEAL ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: IdealLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/mybank/config.jsx

		@@ -10,40 +10,41 @@ /* @flow */

		export function getMybankConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const MYBANK_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,

		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.MYBANK,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.MYBANK ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: MybankLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.MYBANK,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.MYBANK ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: MybankLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/p24/config.jsx

		@@ -10,40 +10,41 @@ /* @flow */

		export function getP24Config() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const P24_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,

		url: getAltPayUrl,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		defaultLabel: BUTTON_LABEL.P24,

		labels: {
		[ BUTTON_LABEL.P24 ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: P24Logo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		url: getAltPayUrl,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		defaultLabel: BUTTON_LABEL.P24,

		labels: {
		[ BUTTON_LABEL.P24 ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: P24Logo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

174

src/funding/paypal/config.jsx

		@@ -14,92 +14,94 @@ /* @flow */

		export const PAYPAL_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,
		export function getPayPalConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		url: getCheckoutUrl,

		defaultLabel: BUTTON_LABEL.PAYPAL,

		labels: {
		[ BUTTON_LABEL.PAYPAL ]: {
		...DEFAULT_LABEL_CONFIG,

		defaultColor: BUTTON_COLOR.GOLD,

		Label({ logoColor } : { logoColor : $Values<typeof LOGO_COLOR> }) : ElementNode {
		return (
		<Fragment>
		<PPLogo logoColor={ logoColor } /> <PayPalLogo logoColor={ logoColor } />
		</Fragment>
		);
		url: getCheckoutUrl,

		defaultLabel: BUTTON_LABEL.PAYPAL,

		labels: {
		[ BUTTON_LABEL.PAYPAL ]: {
		...DEFAULT_LABEL_CONFIG,

		defaultColor: BUTTON_COLOR.GOLD,

		Label({ logoColor } : { logoColor : $Values<typeof LOGO_COLOR> }) : ElementNode {
		return (
		<Fragment>
		<PPLogo logoColor={ logoColor } /> <PayPalLogo logoColor={ logoColor } />
		</Fragment>
		);
		},

		Tag: ({ multiple, locale } : { locale : LocaleType, multiple : boolean }) => {
		return (multiple)
		? <DualTag locale={ locale } />
		: <SaferTag locale={ locale } />;
		},

		allowPrimary: true
		},

		Tag: ({ multiple, locale } : { locale : LocaleType, multiple : boolean }) => {
		return (multiple)
		? <DualTag locale={ locale } />
		: <SaferTag locale={ locale } />;

		[ BUTTON_LABEL.CHECKOUT ]: {
		...DEFAULT_LABEL_CONFIG,

		defaultColor: BUTTON_COLOR.GOLD,

		Label: ({ locale, logoColor }) => {
		return (
		<Checkout locale={ locale } logoColor={ logoColor } />
		);
		},

		Tag: ({ multiple, locale } : { locale : LocaleType, multiple : boolean }) => {
		return (multiple)
		? <DualTag locale={ locale } />
		: <SaferTag locale={ locale } />;
		},

		allowPrimary: true
		},

		allowPrimary: true
		},

		[ BUTTON_LABEL.CHECKOUT ]: {
		...DEFAULT_LABEL_CONFIG,

		defaultColor: BUTTON_COLOR.GOLD,

		Label: ({ locale, logoColor }) => {
		return (
		<Checkout locale={ locale } logoColor={ logoColor } />
		);

		[ BUTTON_LABEL.PAY ]: {
		...DEFAULT_LABEL_CONFIG,

		defaultColor: BUTTON_COLOR.GOLD,

		Label: ({ locale, logoColor }) => {
		return (
		<Pay locale={ locale } logoColor={ logoColor } />
		);
		},

		Tag: ({ multiple, locale } : { locale : LocaleType, multiple : boolean }) => {
		return (multiple)
		? <DualTag locale={ locale } />
		: <SaferTag locale={ locale } />;
		},

		allowPrimary: true
		},

		Tag: ({ multiple, locale } : { locale : LocaleType, multiple : boolean }) => {
		return (multiple)
		? <DualTag locale={ locale } />
		: <SaferTag locale={ locale } />;
		},

		allowPrimary: true
		},

		[ BUTTON_LABEL.PAY ]: {
		...DEFAULT_LABEL_CONFIG,

		defaultColor: BUTTON_COLOR.GOLD,

		Label: ({ locale, logoColor }) => {
		return (
		<Pay locale={ locale } logoColor={ logoColor } />
		);
		},

		Tag: ({ multiple, locale } : { locale : LocaleType, multiple : boolean }) => {
		return (multiple)
		? <DualTag locale={ locale } />
		: <SaferTag locale={ locale } />;
		},

		allowPrimary: true
		},

		[ BUTTON_LABEL.INSTALLMENT ]: {
		...DEFAULT_LABEL_CONFIG,

		defaultColor: BUTTON_COLOR.GOLD,

		Label: ({ locale, logoColor, period }) => {
		return (
		<Installment locale={ locale } logoColor={ logoColor } period={ period } />
		);
		},

		Tag: ({ multiple, locale } : { locale : LocaleType, multiple : boolean }) => {
		return (multiple)
		? <DualTag locale={ locale } />
		: <SaferTag locale={ locale } />;
		},

		allowPrimary: true

		[ BUTTON_LABEL.INSTALLMENT ]: {
		...DEFAULT_LABEL_CONFIG,

		defaultColor: BUTTON_COLOR.GOLD,

		Label: ({ locale, logoColor, period }) => {
		return (
		<Installment locale={ locale } logoColor={ logoColor } period={ period } />
		);
		},

		Tag: ({ multiple, locale } : { locale : LocaleType, multiple : boolean }) => {
		return (multiple)
		? <DualTag locale={ locale } />
		: <SaferTag locale={ locale } />;
		},

		allowPrimary: true
		}
		}
		}
		};
		};
		}

src/funding/sepa/config.jsx

		@@ -10,40 +10,41 @@ /* @flow */

		export function getSepaConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const SEPA_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,

		url: getGuestUrl,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		defaultLabel: BUTTON_LABEL.SEPA,

		labels: {
		[ BUTTON_LABEL.SEPA ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: SepaLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		url: getGuestUrl,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		defaultLabel: BUTTON_LABEL.SEPA,

		labels: {
		[ BUTTON_LABEL.SEPA ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: SepaLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/sofort/config.jsx

		@@ -10,40 +10,41 @@ /* @flow */

		export function getSofortConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const SOFORT_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,

		url: getAltPayUrl,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		defaultLabel: BUTTON_LABEL.SOFORT,

		labels: {
		[ BUTTON_LABEL.SOFORT ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: SofortLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		url: getAltPayUrl,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		defaultLabel: BUTTON_LABEL.SOFORT,

		labels: {
		[ BUTTON_LABEL.SOFORT ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: SofortLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/venmo/config.jsx

		@@ -11,42 +11,43 @@ /* @flow */

		export function getVenmoConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const VENMO_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,

		url: getCheckoutUrl,

		defaultLabel: BUTTON_LABEL.VENMO,

		platforms: [
		PLATFORM.MOBILE
		],

		labels: {
		[ BUTTON_LABEL.VENMO ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: VenmoLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.BLUE,
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.BLUE ]: LOGO_COLOR.WHITE,
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLUE
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.BLUE,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.BLUE,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		url: getCheckoutUrl,

		defaultLabel: BUTTON_LABEL.VENMO,

		platforms: [
		PLATFORM.MOBILE
		],

		labels: {
		[ BUTTON_LABEL.VENMO ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: VenmoLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.BLUE,
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.BLUE ]: LOGO_COLOR.WHITE,
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLUE
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.BLUE,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.BLUE,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/wechatpay/config.jsx

		@@ -10,40 +10,41 @@ /* @flow */

		export function getWechatpayConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const WECHATPAY_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,

		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.WECHATPAY,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.WECHATPAY ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: WechatpayLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		url: getAltPayUrl,

		defaultLabel: BUTTON_LABEL.WECHATPAY,

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		labels: {
		[ BUTTON_LABEL.WECHATPAY ]: {
		...DEFAULT_LABEL_CONFIG,

		Label: WechatpayLogo,

		defaultColor: BUTTON_COLOR.SILVER,

		colors: [
		BUTTON_COLOR.SILVER
		],

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/funding/zimpler/config.jsx

		@@ -10,40 +10,41 @@ /* @flow */

		export function getZimplerConfig() : FundingSourceConfig {
		return {
		...DEFAULT_FUNDING_CONFIG,

		export const ZIMPLER_CONFIG : FundingSourceConfig = {
		...DEFAULT_FUNDING_CONFIG,
		url: getAltPayUrl,

		url: getAltPayUrl,
		defaultLabel: BUTTON_LABEL.ZIMPLER,

		defaultLabel: BUTTON_LABEL.ZIMPLER,
		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],

		layouts: [
		BUTTON_LAYOUT.VERTICAL
		],
		labels: {
		[ BUTTON_LABEL.ZIMPLER ]: {
		...DEFAULT_LABEL_CONFIG,

		labels: {
		[ BUTTON_LABEL.ZIMPLER ]: {
		...DEFAULT_LABEL_CONFIG,
		Label: ZimplerLogo,

		Label: ZimplerLogo,
		defaultColor: BUTTON_COLOR.SILVER,

		defaultColor: BUTTON_COLOR.SILVER,
		colors: [
		BUTTON_COLOR.SILVER
		],

		colors: [
		BUTTON_COLOR.SILVER
		],
		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},

		logoColors: {
		[ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLACK
		},
		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		secondaryColors: {
		[ BUTTON_COLOR.GOLD ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.BLUE ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
		[ BUTTON_COLOR.DARKBLUE ]: BUTTON_COLOR.SILVER
		},

		allowPrimary: false
		allowPrimary: false
		}
		}
		}
		};
		};
		}

src/interface/button.js

		@@ -6,13 +6,15 @@ /* @flow */

		import { setupLogger } from '../lib';
		import { Checkout as _Checkout } from '../checkout';
		import { setupLogger, allowIframe as _allowIframe } from '../lib';
		import { getCheckoutComponent } from '../checkout';
		import { getButtonsComponent } from '../buttons';

		export { Buttons } from '../buttons';

		export const Buttons = getButtonsComponent();
		export let Checkout;
		export let PopupOpenError;
		export let allowIframe;

		if (isPayPalDomain()) {
		Checkout = _Checkout;
		Checkout = getCheckoutComponent();
		PopupOpenError = _PopupOpenError;
		allowIframe = _allowIframe;
		}
		@@ -19,0 +21,0 @@

src/lib/security.js

		/* @flow */

		import { getParent, isSameDomain } from 'cross-domain-utils/src';
		import { isSameDomain } from 'cross-domain-utils/src';
		import { supportsPopups } from 'belter/src';
		@@ -17,12 +17,3 @@ import { isPayPalDomain } from '@paypal/sdk-client/src';

		if (__TEST__) {
		return true;
		}

		const parentWindow = getParent(window);
		if (parentWindow && isSameDomain(parentWindow)) {
		return true;
		}

		const parentComponentWindow = window.xchild && window.xchild.getParentComponentWindow();
		const parentComponentWindow = window.xprops && window.xprops.getParent();
		if (parentComponentWindow && isSameDomain(parentComponentWindow)) {
		@@ -29,0 +20,0 @@ return true;

src/types.js

		/* @flow */

		export const TYPES = true;

		export type DimensionsType = {\|
		@@ -4,0 +6,0 @@ width : number,

src/buttons/.DS_Store

src/buttons/template/.DS_Store

src/buttons/template/componentStyle/layout.js

src/interface/checkout.js

dist/button.js

Sorry, the diff of this file is too big to display

src/.DS_Store

Sorry, the diff of this file is not supported yet

@paypal/checkout-components - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes