Boleto, iDEAL, Sofort, and CashApp

recurly.AlternativePaymentMethods is a convenience wrapper around Adyen’s JavaScript component.
With one configuration object you can:

• Render a localized payment-method UI (Boleto, iDEAL, Sofort, or Cash App) inside any container.
• Tokenize the shopper’s details—no sensitive information hits your server.
• Emit a Recurly token that you send to any v3 endpoint that accepts billing_info.
• Hand off / handle actions (iDEAL & Sofort redirects) or skip them entirely (Cash App).

Prerequisites and limitations

• Your Recurly site must be connected to Adyen and the payment-method(s) you intend to offer must be enabled in your Adyen merchant account.
• For iDEAL and Sofort you must provide a returnURL.
• Cash App does not return an action_result; you can ignore paymentMethod.handleAction.

Configuration

To start with any of these payment methods, call recurly.AlternativePaymentMethods.

For example:

const paymentMethod = recurly.AlternativePaymentMethods({
  allowedPaymentMethods: [
    "boleto"
  ],
  blockedPaymentMethods: [],
  containerSelector: "#payment-methods-container",
  amount: 10,
  currency: "BRL",
  countryCode: "BR",
  locale: "en-US",
  channel: "Web",
  adyen: {
    publicKey: 'adyen_public_key',
    env: "test",
    showPayButton: false,
    componentConfig: {}
  },
  returnURL: 'https://return-url.com/success',
});

See reference for details. The various payment methods may be configured as follows:

Boleto

iDEAL

Sofort

CashApp

Rendering the Payment Methods

After configuring your recurly instance, call paymentMethod.start() to show each configured Payment Method(s) within
the target element.

Call paymentMethod.destroy() to safely remove the rendered payment UI from the document. This is necessary if you
wish to re-render the component.

Generating a token

After filling and confirming the data, paymentMethod.submit() should be called so that the token event can be
dispatched. You may optionally provide a specific customer billing address to this call.

paymentMethod.submit();

// You may wish to provide a specific customer billing address when calling `submit`.
paymentMethod.submit({
  billinAddress: {
    first_name: 'Ben',
    last_name: 'du Monde',
    address1: '1313 Main St.',
    // etc.
  }
});

After submit is called, the token will be emitted in the token event.

paymentMethod.on('token', function (token) {
  // token.id
});

Making a purchase

Having the token, a request must be sent to the server, which internally will call the Recurly API to make the purchase.
The request must contain the fields from the previously filled in the element container. The response must then be handled to retrieve the action_result and pass it back to the browser. With the action result, paymentMethod.handleAction(action_result) can be called.

const form = document.querySelector('form')

fetch(form.action, {
  method: form.method,
  body: new FormData(form),
})
  .then(response => response.json())
  .then(data => {
    console.log({ data })
    if (data.error) {
      alert(data.error);
    } else if (data.action_result) {
      paymentMethod.handleAction(data.action_result)
    }
  })
  .catch(err => {
    console.error(err);
    notifyErrors([err]);
    });

Reference

fn recurly.AlternativePaymentMethods

Arguments

Returns

A new AlternativePaymentMethods instance

fn alternativePaymentMethods.start

Arguments

None.

Returns

Nothing.

fn alternativePaymentMethods.submit

Arguments

Returns

Nothing.

events Emits

error

This event is emitted when any error is encountered, whether during setup of the payment method flow, or during customer
interaction with the payment method interface.

Payload

token

This event is fired when the customer has completed the payment method flow. Recurly has received the payment details,
and generated this token to be used in our API.

Payload