3D Secure Step 3: Test and implement the applicable access points

As mentioned before, we strongly recommend testing each of these access points on a separate Advanced Billing test site, after your team has determined which access points are used by your particular Advanced Billing integration.

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. You can find more information about 3D secure by checking out this help article: Testing & Implementing 3D Secure.

Testing Chargify.js

To handle SCA requests with Chargify.js, add the flag threeDSecure: true to your load function. Here 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',

        // (i.e. '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 popup is displayed to your customer will depend on whether the gateway requires a pre-auth or post-auth integration. See the section above for more information.

<script>
    var chargify = new Chargify();

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

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

const chargify = new Chargify();

const options = {
  threeDSecure = true, // Enable 3D Secure
  // (...)
}

const callbacks = {
  onThreeDsConfigError: function(error) {
    console.error(error);
  }
}

chargify.load(options, callbacks);

const chargify = new Chargify();

const options = {
  threeDSecure = true, // Enable 3D Secure
  // (...)
}

const callbacks = {
  onThreeDsConfigError: function(error) {
    console.error(error);
  }
}

chargify.load(options, callbacks);

const chargify = new Chargify();

const options = {
  threeDSecure = true, // Enable 3D Secure
  // (...)
}

const callbacks = {
  onThreeDsConfigError: function(error) {
    console.error(error);
  }
}

chargify.load(options, callbacks);

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 Chargify.js to tokenize the information first.

When creating a subscription with Chargify.js, simply pass a chargify_token under the credit_card_attributes or bank_account_attributes objects.

Testing Public Signup Pages / Offer Signup Pages

• On the sidebar under Catalog, click Public Signup Pages.
• If you haven’t created a Public Signup Page, you may do so by clicking “+ Create Public Signup Page”. If this has already been completed, click “View URL” and copy the link that pops up in the Signup Page URL modal.
• Paste the link into a new tab in your browser to view your Public Signup Page.
• Enter in any First Name, Last Name, and Email Address for the Customer Information.
• For the Billing Information, input any First Name, Last Name.
• Enter the test card information unique to your payment gateway and follow the instructions on the 3D Secure popup.

Testing Self-Service Pages

• Click on any subscription to arrive on its Summary page
• Click Subscription Actions > View self-service page; you will be redirected to their form to update card information
• Enter the test card information unique to your payment gateway and follow the instructions on the 3D Secure popup.

Testing Billing Portal

• Click Config > Settings > Billing Portal and verify the following:
  • the Billing Portal is enabled on the site
  • the feature “Allow Card Updates” is enabled
  • “Bypass email verification for logins” is enabled on management URLs; this isn’t required, but makes testing easier
• Visit any subscription and scroll down to the bottom of the Summary page. Click “View Billing Portal Management Link” and visit the URL in a new tab
• In the Billing Portal, click “Update Payment Information”
• Enter the test card information unique to your payment gateway and follow the instructions on the 3D Secure popup.

Testing Legacy invoices

• Go to 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 click “Change” on the Payment Method line to change it to invoice billing.
• Change the next billing date to 5 minutes from now and wait for 20 - 30 minutes for the subscription to renew.
• Once the subscription has been renewed, view the email to grab the public invoice URL to pay the open invoice.
  • If your email is entered on the customer record, it will be sent to you
  • Alternatively, check Tools > Email Insights > Archives to find the email from there
• Visit the link. It will resemble the following: Pay Invoice Online: https://subdomain.chargifypay.com/invoices/pay/2j993s65f4n4jn75c92mgjst
• Choose to add a new card, input the test card information unique to your payment gateway, and follow the instructions on the 3D Secure popup.

Testing Relationship Invoicing invoices

• Visit any subscription and view the Summary page.
• Click “change” on the Payment Method line to move them to remittance billing.
• Change the next billing date to 5 minutes from now and wait for 20 - 30 minutes for the subscription to renew.
• Once the subscription has been renewed, visit the “Invoices” tab and click on the new, open invoice.
• Click More Options > View Invoice Public URL and visit the provided link.
• Choose to add a new card, input the test card information unique to your payment gateway, and follow the instructions on the 3D Secure popup.