Working with Payment API

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude

<script src="INSERT_WIDGET_URI_HERE"></script>
<div id="payment-widget"></div>

<script>
    const widget = window.paymentWidget.init({
        userSessionToken: 'your-session-token',
        environment: 'live',
        countryCode: 'US',
        locale: 'en',
        container: 'payment-widget'
    });

    // Clean up when done
    widget.destroy();
</script>

styling: {
    primaryColor: '#007bff',
    textColorMain: '#333333',
    borderRadius: '4px'
}

i18n: {
    'upc.my.payment.instruments': 'My Payment Methods',
    'upc.payment.methods.add.new': 'Add New Payment Method'
}

featureFlags: {
    useRubiksUI: true; // Enable Rubiks Styleguide components (default: false)
}

devMode: true; // Shows i18n keys instead of translations for development

onSuccess: (
    paymentRequestToken,
    paymentInstrumentDetails,
    paymentInstrumentToken
) => {
    // paymentRequestToken: string - The payment request token
    // paymentInstrumentDetails: object - Payment instrument details (card info, bank details, etc.)
    // paymentInstrumentToken: string - The payment instrument token for future use
};

import React, { useEffect, useRef } from 'react';

export const PaymentWidget = ({ userToken, onPaymentSuccess }) => {
    const containerRef = useRef(null);
    const widgetRef = useRef(null);

    useEffect(() => {
        if (containerRef.current && window.paymentWidget) {
            widgetRef.current = window.paymentWidget.init({
                userSessionToken: userToken,
                environment: 'live',
                countryCode: 'US',
                locale: 'en',
                container: containerRef.current,
                featureFlags: {
                    useRubiksUI: true
                },
                onSuccess: (token, details, instrumentToken) => {
                    onPaymentSuccess(token, details, instrumentToken);
                }
            });
        }

        return () => widgetRef.current?.destroy();
    }, [userToken, onPaymentSuccess]);

    return <div ref={containerRef} />;
};

import { Component, ElementRef, ViewChild, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-payment-widget',
    template: '<div #paymentContainer></div>'
})
export class PaymentWidgetComponent implements OnDestroy {
    @ViewChild('paymentContainer', { static: true }) containerRef!: ElementRef;
    private widget: any;

    ngAfterViewInit() {
        const sessionToken =
            sessionStorage.getItem('paymentSessionToken') ||
            this.getUserToken();
        sessionStorage.setItem('paymentSessionToken', sessionToken);

        this.widget = window.paymentWidget.init({
            userSessionToken: sessionToken,
            environment: 'live',
            countryCode: 'US',
            locale: 'en',
            container: this.containerRef.nativeElement,
            onSuccess: (
                token,
                paymentInstrumentDetails,
                paymentInstrumentToken
            ) => {
                sessionStorage.removeItem('paymentSessionToken');
                this.handlePaymentSuccess(
                    token,
                    paymentInstrumentDetails,
                    paymentInstrumentToken
                );
            }
        });
    }

    ngOnDestroy() {
        this.widget?.destroy();
    }
}

<template>
    <div ref="paymentContainer"></div>
</template>

<script>
export default {
    name: 'PaymentWidget',
    props: ['userToken'],
    mounted() {
        const sessionToken =
            sessionStorage.getItem('paymentSessionToken') || this.userToken;
        sessionStorage.setItem('paymentSessionToken', sessionToken);

        this.widget = window.paymentWidget.init({
            userSessionToken: sessionToken,
            environment: 'live',
            countryCode: 'US',
            locale: 'en',
            container: this.$refs.paymentContainer,
            onSuccess: (
                token,
                paymentInstrumentDetails,
                paymentInstrumentToken
            ) => {
                sessionStorage.removeItem('paymentSessionToken');
                this.$emit('paymentSuccess', {
                    token,
                    paymentInstrumentDetails,
                    paymentInstrumentToken
                });
            }
        });
    },
    beforeUnmount() {
        this.widget?.destroy();
    }
};
</script>

// Example: Multiple widget instances on the same page
const widget1 = window.paymentWidget.init({
    userSessionToken: 'token-1',
    container: 'payment-widget-1'
    // ... other config
});

const widget2 = window.paymentWidget.init({
    userSessionToken: 'token-2',
    container: 'payment-widget-2'
    // ... other config
});

// Each widget operates independently
await widget1.submitPayment(); // Only affects widget1
const state2 = widget2.getPaymentState(); // Only returns widget2 state

const widget = window.paymentWidget.init({
    userSessionToken: 'user-session-token',
    environment: 'live',
    countryCode: 'US',
    locale: 'en',
    container: 'payment-widget',
    hidePaymentButton: true,
    onPaymentStateChange: (state) => {
        // Update custom button based on payment state
        const button = document.getElementById('custom-pay-button');
        button.disabled = !state.canSubmit;
        button.textContent = state.isProcessing ? 'Processing...' : 'Pay Now';
    }
});

// Custom button handler
document
    .getElementById('custom-pay-button')
    .addEventListener('click', async () => {
        try {
            await widget.submitPayment();
        } catch (error) {
            console.error('Payment failed:', error);
        }
    });

interface PaymentWidgetInstance {
    destroy(): void; // Clean up widget
    submitPayment(): Promise<void>; // Trigger payment submission
    getPaymentState(): PaymentButtonState; // Get current payment state
    updateCustomerData(data: CustomerData): void; // Update customer data dynamically
}

interface PaymentButtonState {
    isProcessing: boolean; // Payment is being processed
    canSubmit: boolean; // Payment can be submitted (see Payment Method Behavior below)
}

interface CustomerData {
    name?: string;
    email?: string;
    address?: CustomerAddress;
}

interface CustomerAddress {
    line1?: string;
    line2?: string;
    city?: string;
    postalCode?: string;
    state?: string;
    country?: string;
}

// Example: Handling different payment methods
onPaymentStateChange: (state) => {
    // For SEPA: Button disabled until checkbox checked
    // For Stripe/Adyen: Button enabled when provider loads
    customButton.disabled = !state.canSubmit || state.isProcessing;
};

import React, { useState, useEffect } from 'react';

export const CustomPaymentButton = ({ userToken }) => {
    const [widget, setWidget] = useState(null);
    const [buttonState, setButtonState] = useState({
        disabled: true,
        text: 'Pay Now'
    });

    useEffect(() => {
        const widgetInstance = window.paymentWidget.init({
            userSessionToken: userToken,
            environment: 'live',
            countryCode: 'US',
            locale: 'en',
            container: 'payment-widget',
            hidePaymentButton: true,
            onPaymentStateChange: (state) => {
                setButtonState({
                    disabled: !state.canSubmit,
                    text: state.isProcessing ? 'Processing...' : 'Pay Now'
                });
            }
        });

        setWidget(widgetInstance);
        return () => widgetInstance?.destroy();
    }, [userToken]);

    const handlePayment = async () => {
        try {
            await widget?.submitPayment();
        } catch (error) {
            console.error('Payment failed:', error);
        }
    };

    return (
        <div>
            <div id="payment-widget" />
            <button
                onClick={handlePayment}
                disabled={buttonState.disabled}
                className="custom-pay-button"
            >
                {buttonState.text}
            </button>
        </div>
    );
};

import { Component, ElementRef, ViewChild, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-payment-with-custom-button',
    template: `
        <div #paymentContainer></div>
        <button
            (click)="handlePayment()"
            [disabled]="!canSubmit"
            class="custom-pay-button"
        >
            {{ buttonText }}
        </button>
    `
})
export class PaymentWithCustomButtonComponent implements OnDestroy {
    @ViewChild('paymentContainer', { static: true }) containerRef!: ElementRef;
    private widget: any;
    canSubmit = false;
    buttonText = 'Pay Now';

    ngAfterViewInit() {
        this.widget = window.paymentWidget.init({
            userSessionToken: this.getUserToken(),
            environment: 'live',
            countryCode: 'US',
            locale: 'en',
            container: this.containerRef.nativeElement,
            hidePaymentButton: true,
            onPaymentStateChange: (state) => {
                this.canSubmit = state.canSubmit;
                this.buttonText = state.isProcessing
                    ? 'Processing...'
                    : 'Pay Now';
            }
        });
    }

    async handlePayment() {
        try {
            await this.widget?.submitPayment();
        } catch (error) {
            console.error('Payment failed:', error);
        }
    }

    ngOnDestroy() {
        this.widget?.destroy();
    }
}

const widget = window.paymentWidget.init({
    userSessionToken: 'user-session-token',
    environment: 'live',
    countryCode: 'US',
    locale: 'en',
    container: 'payment-widget',
    customerData: {
        name: 'John Doe',
        email: 'john.doe@example.com',
        address: {
            line1: '123 Main Street',
            line2: 'Apt 4B',
            city: 'New York',
            postalCode: '10001',
            state: 'NY',
            country: 'US'
        }
    }
});

// Update customer data dynamically
widget.updateCustomerData({
    name: 'Jane Smith',
    email: 'jane.smith@example.com',
    address: {
        line1: '456 Oak Avenue',
        city: 'Los Angeles',
        postalCode: '90001',
        state: 'CA',
        country: 'US'
    }
});

import React, { useState, useEffect, useRef } from 'react';

export const PaymentWithCustomerData = () => {
    const widgetRef = useRef(null);
    const [customerData, setCustomerData] = useState({
        name: '',
        email: '',
        address: {
            line1: '',
            city: '',
            postalCode: '',
            country: 'US'
        }
    });

    useEffect(() => {
        widgetRef.current = window.paymentWidget.init({
            userSessionToken: 'user-session-token',
            environment: 'live',
            countryCode: 'US',
            locale: 'en',
            container: 'payment-widget',
            customerData: customerData
        });

        return () => widgetRef.current?.destroy();
    }, []);

    // Update customer data dynamically
    useEffect(() => {
        if (widgetRef.current && customerData.name) {
            widgetRef.current.updateCustomerData(customerData);
        }
    }, [customerData]);

    const handleFormChange = (field, value) => {
        setCustomerData(prev => ({
            ...prev,
            [field]: value
        }));
    };

    return (
        <div>
            <h3>Customer Information</h3>
            <input
                type="text"
                placeholder="Name"
                value={customerData.name}
                onChange={(e) => handleFormChange('name', e.target.value)}
            />
            <input
                type="email"
                placeholder="Email"
                value={customerData.email}
                onChange={(e) => handleFormChange('email', e.target.value)}
            />

            <div id="payment-widget" />
        </div>
    );
};

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: 'app-payment-with-customer-data',
    template: `
        <form [formGroup]="customerForm">
            <input formControlName="name" placeholder="Name" />
            <input formControlName="email" placeholder="Email" />
            <input formControlName="line1" placeholder="Address Line 1" />
            <input formControlName="city" placeholder="City" />
            <input formControlName="postalCode" placeholder="Postal Code" />
        </form>
        <div #paymentContainer></div>
    `
})
export class PaymentWithCustomerDataComponent implements OnInit, OnDestroy {
    @ViewChild('paymentContainer', { static: true }) containerRef!: ElementRef;
    private widget: any;
    customerForm: FormGroup;

    constructor(private fb: FormBuilder) {
        this.customerForm = this.fb.group({
            name: [''],
            email: [''],
            line1: [''],
            city: [''],
            postalCode: [''],
            country: ['US']
        });
    }

    ngOnInit() {
        this.widget = window.paymentWidget.init({
            userSessionToken: this.getUserToken(),
            environment: 'live',
            countryCode: 'US',
            locale: 'en',
            container: this.containerRef.nativeElement,
            customerData: this.customerForm.value
        });

        // Update widget when form changes
        this.customerForm.valueChanges.subscribe(data => {
            this.widget.updateCustomerData({
                name: data.name,
                email: data.email,
                address: {
                    line1: data.line1,
                    city: data.city,
                    postalCode: data.postalCode,
                    country: data.country
                }
            });
        });
    }

    ngOnDestroy() {
        this.widget?.destroy();
    }
}

function initializeWidget() {
    // Get token from storage or current session
    const userSessionToken =
        sessionStorage.getItem('paymentSessionToken') || getCurrentUserToken();

    // Store for redirect continuity
    if (!sessionStorage.getItem('paymentSessionToken')) {
        sessionStorage.setItem('paymentSessionToken', userSessionToken);
    }

    const widget = window.paymentWidget.init({
        userSessionToken: userSessionToken,
        environment: 'live',
        countryCode: 'US',
        locale: 'en',
        container: 'payment-widget',
        onSuccess: (
            token,
            paymentInstrumentDetails,
            paymentInstrumentToken
        ) => {
            sessionStorage.removeItem('paymentSessionToken');
            handlePaymentSuccess(
                token,
                paymentInstrumentDetails,
                paymentInstrumentToken
            );
        }
    });
}

// Initialize widget on page load
initializeWidget();

try {
    const widget = window.paymentWidget.init(config);
} catch (error) {
    console.error('Widget initialization failed:', error.message);
}

interface PaymentWidget {
    init(config: PaymentConfig): PaymentWidgetInstance;
}

interface PaymentWidgetInstance {
    destroy(): void;
    submitPayment(): Promise<void>;
    getPaymentState(): PaymentButtonState;
    updateCustomerData(data: CustomerData): void;
}

interface PaymentButtonState {
    isProcessing: boolean;
    canSubmit: boolean;
}

interface PaymentConfig {
    userSessionToken: string;
    environment: 'test' | 'sandbox' | 'live';
    countryCode: string;
    locale: string;
    container: string | HTMLElement;
    styling?: {
        primaryColor?: string;
        textColorMain?: string;
        borderRadius?: string;
        // ... other style options
    };
    i18n?: Record<string, string>;
    featureFlags?: PaymentFeatureFlags;
    hidePaymentButton?: boolean;
    customerData?: CustomerData;
    onSuccess?: (
        paymentRequestToken: string,
        paymentInstrumentDetails?: PaymentInstrumentDetails,
        paymentInstrumentToken?: string
    ) => void;
    onPaymentStateChange?: (state: PaymentButtonState) => void;
    devMode?: boolean;
}

interface PaymentFeatureFlags {
    useRubiksUI?: boolean; // Enable Rubiks Styleguide components
}

interface CustomerData {
    name?: string;
    email?: string;
    address?: CustomerAddress;
}

interface CustomerAddress {
    line1?: string;
    line2?: string;
    city?: string;
    postalCode?: string;
    state?: string;
    country?: string;
}

interface BankAccountDetails {
    accountHolder: string;
    bankName: string;
    bic: string;
    iban: string;
    signature?: string;
}

interface PaymentInstrumentDetails {
    creditCard?: {
        brand?: string;
        cardHolder: string;
        cardNumber: string;
        expiry: string;
        issuerCountry?: string;
    };
    sepa?: {
        bankAccountDetails: BankAccountDetails;
    };
    bacs?: {
        accountHolder: string;
        bankAccountNumber: string;
        bankLocationId: string;
        directDebitPdfFormUrl: string;
        mandateId: string;
        shopperEmail: string;
    };
    chDD?: {
        bankAccountDetails: BankAccountDetails;
    };
    lsvDD?: {
        bankAccountDetails: BankAccountDetails;
    };
    ideal?: {
        issuer: string;
    };
    banContactCard?: {
        cardHolder: string;
        cardNumber: string;
        expiry: string;
    };
    paypal?: {};
    twint?: {};
    cash?: {};
    bankTransfer?: {};
}