Test and Implement the Applicable Access Points

Once your team has determined which access points your Advanced Billing integration uses, test 3D Secure on each one before rolling it out to your live site.

Please be aware that this article is related to testing and implementing 3D Secure. We currently support 3DS on the following gateways: Stripe, Braintree, CyberSource, Windcave (Payment Express), Adyen.

Important: Test each of these access points on a separate Advanced Billing test site.

Testing Maxio.js (formerly Chargify.js)

To handle SCA requests with Maxio.js, add the flag threeDSecure: true to your load function. The following is a minimal example that passes credit cards:

<script>
    var chargify = new Chargify();
 
    chargify.load({
        // selector, where the iframe will be included on your page
        // optional, if you have a `selector` for every field ('fields' option)
        selector: '#chargify1',
 
        // (e.g. '1a2cdsdn3lkn54lnlkn')
        publicKey: 'your-public-api-key',
 
        // form type (possible values: 'card', 'bank' or 'gocardless')
        type: 'card',
 
        // points to your Chargify site
        serverHost: 'https://acme.chargify.com',
 
        //enables support for 3D Secure
        threeDSecure: true
    });
</script>

Exactly when the SCA pop-up is displayed to your customer depends on whether the gateway requires a pre-auth or post-auth integration. See Test and Implement 3D Secure for more information.

Provide a 3D Secure verification amount for Braintree

If your signup workflow immediately creates a Subscription and you know the amount of the first charge (including taxes, discounts, etc.), you can pass this amount to be used for SCA verification, using either a config option or a text field. If an SCA challenge is necessary, the modal presents the threeDSVerificationAmount provided to Maxio.js. If no amount is provided, $1 is displayed.

3DS verification amount provided via config option:

<script>
    var chargify = new Chargify();
 
    chargify.load({
        // ...
        threeDSecure: true,
        threeDSVerificationAmount: '99.00',
    });
</script>

3DS verification amount provided via text field:

<div id='chargify-form'>
  <input
    data-chargify='threeDSVerificationAmount'
    value='99.00'
    readOnly
    hidden
  />
</div>

Handle 3D Secure configuration errors

CyberSource, Adyen, and BlueSnap all support an optional second callbacks argument with an onThreeDsConfigError callback:

<script>
const chargify = new Chargify();
 
const options = {
  threeDSecure: true, // Enable 3D Secure
  // (...)
}
 
const callbacks = {
  onThreeDsConfigError: function(error) {
    console.error(error);
  }
}
 
chargify.load(options, callbacks);
</script>

Testing API

It's possible to use the API for creating Subscriptions as well as updating payment methods. Unless you are PCI compliant, raw card data should not be passed through Advanced Billing's API; instead, use Maxio.js to tokenize the information first.

When creating a Subscription with Maxio.js, pass a chargify_token under the credit_card_attributes or bank_account_attributes objects.

See Understand PSD2, SCA, and 3DS for background on how SCA affects API-created transactions.

Testing Public Signup Pages / Offer Signup Pages

• On the sidebar under Catalog, select Public Signup Pages.
• If you haven't created a Public Signup Page, select + Create Public Signup Page. If one already exists, select View URL and copy the link from the Signup Page URL modal.
• Paste the link into a new browser tab to view your Public Signup Page.
• Enter any First Name, Last Name, and Email Address for the Customer Information.
• For the Billing Information, enter any First Name and Last Name.
• Enter the test card information unique to your payment gateway and follow the instructions on the 3D Secure pop-up.

Testing Self-Service Pages

• Select any Subscription to open its Summary page.
• Select Subscription Actions > View self-service page; you are redirected to the form to update card information.
• Enter the test card information unique to your payment gateway and follow the instructions on the 3D Secure pop-up.

Testing Billing Portal

• Select Config > Settings > Billing Portal and verify the following:
  • The Billing Portal is enabled on the site.
  • The Allow Card Updates feature is enabled.
  • Under Management Links, Anyone with the URL can access the associated Billing Portal (less secure) is selected. This isn't required, but it makes testing easier.
• Visit any Subscription and scroll to the bottom of the Summary page. Select View Billing Portal Management URL and open the URL in a new tab.
• In the Billing Portal, select Update Payment Information.
• Enter the test card information unique to your payment gateway and follow the instructions on the 3D Secure pop-up.

Testing legacy invoices

• Select Config > Settings > Invoice Billing and confirm the following:
  • Invoice billing is an option for subscribers.
  • Invoice emails are enabled.
  • Enable Pay by Credit Card Link In Invoice is enabled.
• Visit any Subscription and select Change on the Payment Method line to switch it to invoice billing.
• Change the next billing date to 5 minutes from now and wait 20-30 minutes for the Subscription to renew.
• Once the Subscription has renewed, view the email to find the public invoice URL to pay the open invoice.
  • If your email is on the customer record, the email is sent to you.
  • Otherwise, check Tools > Email Insights > Archives to find the email.
• Open the link. It resembles the following: Pay Invoice Online: https://subdomain.chargifypay.com/invoices/pay/2j993s65f4n4jn75c92mgjst
• Add a new card, enter the test card information unique to your payment gateway, and follow the instructions on the 3D Secure pop-up.

Testing Relationship Invoicing invoices

• Visit any Subscription and view the Summary page.
• Select Change on the Payment Method line to move it to remittance billing.
• Change the next billing date to 5 minutes from now and wait 20-30 minutes for the Subscription to renew.
• Once the Subscription has renewed, open the Invoices tab and select the new, open invoice.
• Select More Options > View Invoice Public URL and open the provided link.
• Add a new card, enter the test card information unique to your payment gateway, and follow the instructions on the 3D Secure pop-up.

Related information

For an overview of testing and implementing 3D Secure, see Test and Implement 3D Secure.