Adding Subscription Cards To A Subscription Page

Notes

  • For Subscription variables to be available they must be used on a page with the subscription action selected
  • See also: Subscription Variables for all available variables on a subscription page.
  • The subscription page exposes a card variable

General Approach

To display a subscription card form on a page, you should do the following:

  1.  Check whether or not a subscription has a credit card associated with it.
  • A subscription card form should be rendered in the add context if a card isn't associated with the subscription, otherwise it should be rendered in the update context
  1. Display the card form with the appropriate context.
  • The add context allows full form entry, whereas update context allows the customer to update expiry dates, CVVs, and cardholder names.
  • Displaying the form in the update context also offers a delete button.
  1. Define a post-form submission action in the attributes parameter
  • data-ajax-redirect allows for configuring a redirect page post-form submission.
  • data-ajax-update allows for configuring a partial reload post-form submission.

Example: Coffree Subscription Page (See source: page-subscription)

{% if card %}
  <p>Update Subscription Card</p>
  {{ subscriptionCardForm('update',
      {
          card: card,
          options: {
              number: {
                  placeholder: 'Card number',
                  style: "font-family: Helvetica Neue, Courier New, Courier Monospace, monospace; letter-spacing: 1.5px; font-weight: bold; font-size: 16px; color: #555; line-height: 42px; width: 100%;"
              },
              cvv: {
                  placeholder: 'CVV',
                  style: "font-family: Helvetica Neue, Courier New, Courier Monospace, monospace; letter-spacing: 1.5px; font-weight: bold; font-size: 16px; color: #555; line-height: 42px; width: 100%;"
              }
          }
      },
  { 'data-ajax-redirect': root_url('/subscription/' ~ subscription.id) }) }}
{% else %}
  <p>Add Payment Method</p>
  {{ subscriptionCardForm('add',
      {
          options: {
              number: {
                  placeholder: 'Card number',
                  style: "font-family: Helvetica Neue, Courier New, Courier Monospace, monospace; letter-spacing: 1.5px; font-weight: bold; font-size: 16px; color: #555; line-height: 42px; width: 100%;"
              },
              cvv: {
                  placeholder: 'CVV',
                  style: "font-family: Helvetica Neue, Courier New, Courier Monospace, monospace; letter-spacing: 1.5px; font-weight: bold; font-size: 16px; color: #555; line-height: 42px; width: 100%;"
              }
          }
      },
  { 'data-ajax-redirect': root_url('/subscription/' ~ subscription.id) }) }}
{% endif %}

Example Notes

The above example:

  • Displays the form in an update context if a card exists
  • Otherwise, it displays the form in an add context
  • On success, it redirects back to the subscription page.

Additional Configuration Options

  • If your subscription page is on another page, and your rendering your card forms on a different page and using the subscription page as an API, you can point the form to that page by adding an action attribute.

Example - Posting to a specific endpoint with an action attribute:

{{ subscriptionCardForm('add',
    {
      options: {
          number: {
              placeholder: 'Card number',
              style: "font-family: Helvetica Neue, Courier New, Courier Monospace, monospace; letter-spacing: 1.5px; font-weight: bold; font-size: 16px; color: #555; line-height: 42px; width: 100%;"
          },
          cvv: {
              placeholder: 'CVV',
              style: "font-family: Helvetica Neue, Courier New, Courier Monospace, monospace; letter-spacing: 1.5px; font-weight: bold; font-size: 16px; color: #555; line-height: 42px; width: 100%;"
          }
      }
    },
    {
      'data-ajax-redirect': root_url('/profile/),
      'action': '/subscription/' ~ subscription.id
    }
) }}