Add free trial block checkout support for card payment

modules/ppcp-blocks/resources/js/Components/card-fields.js

@@ -7,7 +7,12 @@ import {
 } from '@paypal/react-paypal-js';
 
 import { CheckoutHandler } from './checkout-handler';
-import { createOrder, onApprove } from '../card-fields-config';
+import {
+	createOrder,
+	onApprove,
+	createVaultSetupToken,
+	onApproveSavePayment,
+} from '../card-fields-config';
 import { cartHasSubscriptionProducts } from '../Helper/Subscription';
 
 export function CardFields( {
@@ -70,8 +75,21 @@ export function CardFields( {
 				} }
 			>
 				<PayPalCardFieldsProvider
-					createOrder={ createOrder }
-					onApprove={ onApprove }
+					createVaultSetupToken={
+						config.scriptData.is_free_trial_cart
+							? createVaultSetupToken
+							: undefined
+					}
+					createOrder={
+						config.scriptData.is_free_trial_cart
+							? undefined
+							: createOrder
+					}
+					onApprove={
+						config.scriptData.is_free_trial_cart
+							? onApproveSavePayment
+							: onApprove
+					}
 					onError={ ( err ) => {
 						console.error( err );
 					} }

modules/ppcp-blocks/resources/js/card-fields-config.js

@@ -44,3 +44,51 @@ export async function onApprove( data ) {
 			console.error( err );
 		} );
 }
+
+export async function createVaultSetupToken() {
+	const config = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' );
+
+	return fetch( config.scriptData.ajax.create_setup_token.endpoint, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify( {
+			nonce: config.scriptData.ajax.create_setup_token.nonce,
+			payment_method: 'ppcp-credit-card-gateway',
+		} ),
+	} )
+		.then( ( response ) => response.json() )
+		.then( ( result ) => {
+			console.log( result );
+			return result.data.id;
+		} )
+		.catch( ( err ) => {
+			console.error( err );
+		} );
+}
+
+export async function onApproveSavePayment( { vaultSetupToken } ) {
+	const config = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' );
+
+	const response = await fetch(
+		config.scriptData.ajax.create_payment_token.endpoint,
+		{
+			method: 'POST',
+			credentials: 'same-origin',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify( {
+				nonce: config.scriptData.ajax.create_payment_token.nonce,
+				vault_setup_token: vaultSetupToken,
+				is_free_trial_cart: config.scriptData.is_free_trial_cart,
+			} ),
+		}
+	);
+
+	const result = await response.json();
+	if ( result.success !== true ) {
+		console.error( result );
+	}
+}