Skip to main content

Standalone payment checkout

Use this mode if you already know the donation amount and only want to let supporters choose their preferred payment method. It's ideal for quick checkouts or predefined payment pages where the amount and purpose are fixed and the focus is purely on payment method selection.

The Tamaro widget can be reduced to serve exclusively as a payment checkout for selecting a payment method. In this configuration, all elements except the payment methods block are hidden.

Payment Checkout

Payment Checkout setup​

You can achieve this by disabling all other blocks using the forceShowBlocks options. Since the widget is reduced to the payment method selection only, the amount and currencies must be defined beforehand.

By default, the widget automatically uses the currency and amount defined in paymentFormPrefill. If you want to let users choose another currency or amount, these can also be set dynamically via URL parameters. Read more about URL parameters here.

warning

When using URL parameters, ensure the provided currency exists in the defined currencies array.

https://www.example.org/?rnw-amount=200&rnw-currency=usd

Payment method requirements​

Certain payment methods - such as credit cards - require payer address details. You can find an overview in the Payment method requirements

If you prefer not to collect payer data directly in the widget, you have two options:

  1. Use payment methods that don't require payer details, such as TWINT or PayPal, or
  2. Provide the payer information programmatically.
danger

Even though it's technically possible to pre-fill address fields using URL parameters, we strongly discourage this approach due to security and privacy risks.

danger

When using advanced configuration options such as forceShowBlocks, it is your responsibility to ensure that all required information for the selected payment method is provided. Failing to do so may lead to payment failures or declined transactions. Read more here.

If you choose the second option, you can supply payer information via configuration and hide the corresponding form fields in the widget, for example:

window.rnw.tamaro.events.afterCreate.subscribe((event) => {
  const tamaro = event.data.api;
  const formData = tamaro.paymentForm.data;

  // 1. ✍️ Pre-fill address fields programmatically
  formData.stored_customer_firstname = 'John';
  formData.stored_customer_lastname = 'Doe';
  formData.stored_customer_street = 'Main Street 1';
  formData.stored_customer_zip_code = '8000';
  formData.stored_customer_city = 'Zurich';
  formData.stored_customer_country = 'CH';
  // ... add other fields as needed
});

window.rnw.tamaro.runWidget('.rnw-tamaro-widget', {
  currencies: ['chf', 'eur', 'usd'],
  paymentFormPrefill: {
    currency: 'chf',
    amount: 50,
  },
  // Hide all blocks except payment methods
  forceShowBlocks: {
    payment_purposes: false,
    payment_amounts_and_intervals: false,
    payment_email_permission: false,
    payment_cover_fee: false,
    payment_profile: false,
    payment_profile_short: false,
    payment_address: false,
  },
});

Since this setup hides most payer-facing information, we recommend:

  • ✅ Displaying the total amount and currency clearly on your checkout page.
  • ✅ Performing a server-side verification of the payment before confirming any delivery or fulfilment. (Client-side JavaScript can be altered and should not be relied upon for security-critical logic.)
  • ❌ Never pass sensitive information (like personal data) via URL parameters. Use programmatic pre-filling instead, as shown above.